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.
Tide
Actions, links, focus. About 10% of any screen.
Sage
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 for text. Tracking tightens as size grows.
Aa
Geist
Display · 400 to 600
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@£$₹€%?!
Display
72 / 72 · -0.05em
Ice at bedtime.
Heading
40 / 44 · -0.04em
The last bottle you'll buy.
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
- Playful
- Honest
- Outdoorsy
We are not
- Preachy
- Techy
- Discount-y
“Left it in a hot car. Ice at 6pm.”Say it like this
“Premium hydration solutions for modern lifestyles.”Never like this
05
In the product
Material: paper. 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.
/* hale. brand tokens, generated by MiniDev UI */
:root {
--accent: …; /* */
--accent-2: …; /* */
--ink: …; /* */
--bg: …; /* */
--surface: …; /* */
--fg-muted: …; /* */
--success: …; /* */
--warning: …; /* */
--danger: …; /* */
--info: …; /* */
--on-accent: …; /* */
--border: …; /* */
--fg: …; /* */
}
/* material: paper · display: Geist · text: Geist */
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.