Style Lab
Bring fonts and colours together in a direction you can save, share and build from.
Generator controls
Showing Space Grotesk heading with Inter body and a 5 colour palette.
Describe your vibe
Font pairing
Font pairing preview
Click the text and type your own — it re-renders live.
Colour palette
- #0E0E12hsl 240·13·6
- #2A2440hsl 253·28·20
- #7C5CFChsl 252·96·67
- #C9C4E0hsl 251·31·82
- #FAFAF7hsl 60·23·97
Fonts for these colours
Cool blues and greens suit precise grotesques with a mono accent.
Current style summary
Style board previews
Preview: landing page hero using the current fonts and palette
Brand systems for companies that hate looking like everyone else.
Identity, type and colour, handed over as tokens your team can ship.
A 6-week identity sprint that lifted app onboarding completion by 34%.
“They gave us a system, not a logo. Six months on, everything we ship still looks like us.”
How to test a body font in ten minutes
A typeface earns its place in a paragraph, not in a logo. Set fifty words in it, at the size people actually read, and the decision usually makes itself.
Watch the rhythm: how the lowercase settles on the baseline, how tight the word spacing runs, whether the numerals sit level with the caps or drop below them.
Then check the awkward parts — a long URL, an em dash, a price like £1,249.00, a quote that runs three lines. Those are the places a pairing quietly falls apart.
Preview: type specimen using the current heading font
A typeface earns its place in a paragraph, not in a logo. Set fifty words in it, at the size people actually read, and the decision usually makes itself.
Watch the rhythm: how the lowercase settles on the baseline, how tight the word spacing runs, whether the numerals sit level with the caps or drop below them.
Then check the awkward parts — a long URL, an em dash, a price like £1,249.00, a quote that runs three lines. Those are the places a pairing quietly falls apart.
Set your own words on the Font Pairing tab — this specimen updates with every shuffle.
Preview: color field poster using the current palette
Ready when you are.
Copy your fonts and colours into your website, or share them with whoever is building it.
- CSS variables
- Font stacks
- Google Fonts reference
- Colour values
:root {
--color-1: #0E0E12;
--color-2: #2A2440;
--color-3: #7C5CFC;
--color-4: #C9C4E0;
--color-5: #FAFAF7;
--font-heading: "Space Grotesk", sans-serif;
--font-body: "Inter", sans-serif;
--font-accent: "JetBrains Mono", monospace;
}