Foundations
Logo
The Comitor mark is a modern, isometric three-faced cube in the brand's gold tones. Each face carries a geometric detail that evokes connection — the brand's idea of companionship. Use the official lockups below; never substitute, recolor, or simplify the mark. Both components ship from @comitor/ui/shell and render from a Server Component — the mark costs no client JavaScript.
Official lockups
Pair the light variant with white or cream surfaces; switch to the dark variant whenever the background is dark or warm gold so the top face of the cube keeps clear contrast.
The auto variant
On any surface that follows the theme — a card, a header, this page — reach for variant="auto" instead of picking a variant by hand. Toggle this site between light and dark and the mark below follows.
Size scale
The four steps were recalibrated to be a genuine ratio scale: the wordmark stays between 0.375 and 0.417 of the icon height at every step, and the gap stays near 0.28 of it. The gap is the brand book's (80 / 280 = 0.286). The wordmark is deliberately larger than in the brand book's print lockup, where it is 72 / 280 = 0.257 of the icon: at a 36px icon that ratio would set COMITOR at about 9px. Changing size therefore changes the size and nothing about the layout.
xssmmdlg| size | Icon | Wordmark | Gap | Where it belongs |
|---|---|---|---|---|
| xs | 36px | 14px · text-sm | 10px | App header (56px tall) and sidebar headers |
| sm | 48px | 20px · text-xl | 14px | Compact page headers, auth cards |
| md | 80px | 30px · text-3xl | 22px | The default. Landing pages, about pages |
| lg | 128px | 48px · text-5xl | 36px | Splash and cover surfaces |
One geometric constraint to respect
The wordmark, the gold rule and the slogan form a flex-col, so the rule is as wide as whichever line is wider. That gives one rule: the slogan must never be wider than the wordmark. Break it and the slogan is what stretches the rule while "COMITOR" sits short of it — which reads as a shrunken wordmark, even though nothing about the wordmark changed.
xs is the one step that still breaks it with the default sixteen-character slogan, and it was left that way deliberately: fixing it means either a slogan under the legible floor or a wordmark that overpowers the mark. Pass a short slogan at xs — an app name, as every header in the ecosystem does — or tune it with sloganClassName.
Usage
import { ComitorLockup, ComitorLogo } from '@comitor/ui/shell'
// Neither component has "use client" — both render straight from a Server Component.
// The mark on its own. Sizing is a className, not a prop.
<ComitorLogo variant="auto" className="w-20 h-20" title="Comitor" />
// The horizontal lockup. One size prop moves icon, gap, wordmark and slogan together.
<ComitorLockup variant="auto" size="xs" slogan="Design System" />
<ComitorLockup variant="light" size="md" />
<ComitorLockup variant="dark" size="lg" wordmark="COMITOR TASKS" slogan="Tasks" />Clear space
Maintain a minimum clear space of 0.5× around the icon, where × is the height of the cube. Nothing else — text, image, or border — may enter that zone.
Dashed border indicates the minimum 0.5× clear zone.
Minimum sizes
Two shapes ship in the package: the icon mark and the horizontal lockup. The brand book also defines vertical lockups — Comitor and Thiện Minh, each on light, warm and dark — as SVG files for covers, splash screens and print. When a layout needs a stacked mark, use one of those files; do not stack ComitorLogo over your own text.
| Shape | Digital min | Print min | Note |
|---|---|---|---|
| ComitorLogo — icon only | 24 px | 10 mm | Below this the geometric detail on each face of the cube blurs together. |
| ComitorLockup — horizontal | 36 px icon (size="xs") | 28 mm wide | xs is the smallest step the package ships; it is drawn for a 56px header. |
| Brand-kit SVG lockups | 140 px wide (horizontal) · 100 px wide (vertical) | 28 mm · 20 mm | The xs step is narrower than 140 px (about 113 px with a short slogan) and is meant only for app headers and sidebars. |
ComitorLogo props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'light' | 'dark' | 'auto' | 'light' | light gives the cube a pale gold top face for light surfaces; dark gives it a white top face for ink or warm surfaces; auto renders both and swaps on the theme. |
title | string | 'Comitor' | Fills the SVG <title> and the aria-label. Change it when the mark stands for a specific app. |
className | string | — | Sizing and layout classes. There is no size prop — set width and height here. |
style | CSSProperties | — | Inline style, forwarded to the <svg>. |
ComitorLockup props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'light' | 'dark' | 'auto' | 'light' | Passed straight through to ComitorLogo, and also drives the wordmark, rule and slogan colours. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Moves icon size, gap, wordmark size, slogan size and rule margin together as one ratio. |
wordmark | string | 'COMITOR' | The upper line. Change it for a per-app lockup, e.g. "COMITOR TASKS". |
slogan | string | 'Together Further' | The lower line, rendered uppercase. At size xs this is normally a short app name. |
sloganClassName | string | — | Overrides the size preset for the slogan only — used when the slogan has to be tuned to the exact width of the wordmark. |
className | string | — | Merged onto the outer flex row. |
style | CSSProperties | — | Inline style on the outer row. |
Don't
- • Don't stretch, distort, rotate, or flip the mark — the icon stays 1:1.
- • Don't add shadow, glow, outline, or bevel — the mark is flat vector.
- • Don't substitute the wordmark or slogan typeface — Inter only.
- • Don't repaint the cube faces or tokenize the hex values. The vector is copied from the brand book, and it is the one place in the system where a hardcoded colour is correct — the mark must be identical in every product.
- • Don't place the light variant on dark / warm backgrounds (or vice versa) — use the matching variant, or
autoon a themed surface. - • Don't rebuild the lockup out of a logo plus your own text. The gold rule and the slogan sit at measured ratios that a hand-assembled copy will not reproduce.