Foundations
Logo
The Comitor mark is a golden isometric cube with three companion figures — a symbol of partnership, perspective, and forward motion. 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, as the brand book has it. 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. Marketing sections, 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, and only two: the icon mark and the horizontal lockup. There is no vertical lockup and no stacked variant — if a layout seems to need one, use the icon mark alone.
| Shape | Digital min | Print min | Note |
|---|---|---|---|
| ComitorLogo — icon only | 24 px | 10 mm | Below this the three companion figures merge into the sphere. |
| 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. |
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.