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.
Pix green
Actions, links, focus. About 10% of any screen.
Lagoon
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 amounts for text. Tracking tightens as size grows.
Aa
Geist
Display · 400 to 600
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@£$₹€%?!
Display
72 / 72 · -0.05em
Money home.
Heading
40 / 44 · -0.04em
Money home in 12 seconds.
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
- Warm
- Exact
- Bilingual
We are not
- Salesy
- Fine print
- Cold
“Mãe got R$ 1.814,20. It took 11 seconds.”Say it like this
“Competitive rates on international remittances.”Never like this
05
In the product
Material: metal. 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.
/* Ponte brand tokens, generated by MiniDev UI */
:root {
--accent: …; /* */
--accent-2: …; /* */
--ink: …; /* */
--bg: …; /* */
--surface: …; /* */
--fg-muted: …; /* */
--success: …; /* */
--warning: …; /* */
--danger: …; /* */
--info: …; /* */
--on-accent: …; /* */
--border: …; /* */
--fg: …; /* */
}
/* material: metal · display: Geist · text: Geist Mono for amounts */
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.