Design Tokens
Typography.
Poppins from Google Fonts — used for everything from the “OH!” logo mark down to the smallest caption. A wide weight range gives the brand its punchy contrast.
Typeface
Poppins
Aa Bb Cc.
Google Fonts · weights 300 – 900
https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap
Weights
All seven Poppins weights are preloaded. Use them sparingly — most UI lives between 400 and 800.
WeightSampleUsage
300
The quick brown fox — Light
Rare — large decorative numerals only.
400
The quick brown fox — Regular
Body copy, descriptions, form input.
500
The quick brown fox — Medium
Subtle emphasis inside paragraphs.
600
The quick brown fox — Semibold
Supporting UI labels.
700
The quick brown fox — Bold
Buttons (UPPERCASE), card titles.
800
The quick brown fox — ExtraBold
H1 / H2 section titles.
900
The quick brown fox — Black
The "OH!" logo mark.
Type scale
The standard text tokens used across the design system.
display
Hello, Optimise.
36 / 48 px · 800
h1
Section headline.
30 / 36 px · 800
h2
Supporting heading.
20 px · 800
eyebrow
DESIGN TOKENS
11 px · 700 · cyan · tracking 0.14em
body
Direct, energetic, warm — never clinical.
15 px · 400
caption
Last updated April 23
12.5 px · 400 · muted