01
Logo
The mark and wordmark always travel together at hero sizes. Below 24px, use the mark alone.
Clear space: x = the height of the mark
64px
32px
16px
16px is the minimum. Never stretch, recolour or outline the mark.
02
Colour
Sampled live from the product's tokens. Click any value to copy it.
Signal amber
Actions, links, focus. About 10% of any screen.
Gold
Gradients and charts only, next to the accent.
Ink
Primary buttons, headlines on light.
Canvas
The page. About 60%.
Surface
Cards and fields. About 30%.
Graphite
Body text and labels.
Proportion
How much of each colour a typical screen uses.
60 · 30 · 7 · 3
Success
Warning
Danger
Info
03
Typography
Geist for display, Geist Mono for text. Tracking tightens as size grows.
Aa
Geist
Display · 400 to 600
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@£$₹€%?!
Display
72 / 72 · -0.05em
Resolved in 4 seconds.
Heading
40 / 44 · -0.04em
Agents that close the ticket.
Body
17 / 28 · 0
Clear sentences, one idea each. Numbers in tabular figures. No exclamation marks.
Label
12 / 16 · +0.08em
Status · Updated 16:04
04
Voice
How the brand sounds. Read it out loud; if it sounds like a brochure, rewrite it.
We are
- Direct
- Accountable
- Technical
We are not
- Magic
- Vague
- Overpromising
“Refunded $49. Rule: refund.max_amount.”Say it like this
“Our AI understands your customers like a human.”Never like this
05
In the product
Material: hairline. Every component below is the real kit, in this brand.
06
Out in the world
The same system on the things people actually touch: a card, a phone, a link someone shares.
Business card · 85 × 48 mm
9:41
Tuesday 14 October
App icon · 1024 px master
Social share card · 1200 × 630
07
Take it with you
The tokens as CSS variables, ready to drop into any Tailwind or plain CSS project.
/* relay brand tokens, generated by MiniDev UI */
:root {
--accent: …; /* */
--accent-2: …; /* */
--ink: …; /* */
--bg: …; /* */
--surface: …; /* */
--fg-muted: …; /* */
--success: …; /* */
--warning: …; /* */
--danger: …; /* */
--info: …; /* */
--on-accent: …; /* */
--border: …; /* */
--fg: …; /* */
}
/* material: hairline · display: Geist · text: Geist Mono */
Want a brand kit like this?
MiniDev builds the brand, the product and the site as one system, with a kit like this one at the end.