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.
Chinar teal
Actions, links, focus. About 10% of any screen.
Saffron
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
Instrument Serif for display, Geist for text. Tracking tightens as size grows.
Aa
Instrument Serif
Display · 400 to 600
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@£$₹€%?!
Display
72 / 72 · -0.05em
The right doctor, today.
Heading
40 / 44 · -0.04em
Know who's in before you leave home.
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
- Kind
- Local
- Plain
We are not
- Clinical
- Scary
- Corporate
“Dr Qadri is in. About 12 minutes wait.”Say it like this
“Leverage our healthcare ecosystem.”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.
/* Kura 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: Instrument Serif · 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.