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.
Violet 283
Actions, links, focus. About 10% of any screen.
Orchid
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 data for text. Tracking tightens as size grows.
Aa
Geist
Display · 400 to 600
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@£$₹€%?!
Display
72 / 72 · -0.05em
Drawn in hairlines.
Heading
40 / 44 · -0.04em
Every pixel, accounted for.
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
- Precise
- Calm
- Generous
We are not
- Hype
- Cute
- Vague
“Copy the file. Own the code.”Say it like this
“Supercharge your workflow with next-gen AI magic.”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.
/* MiniDev UI 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 for data */
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.