Generator controls
Showing Fraunces heading with Mulish body and a 5 colour palette.
Describe your vibe
Leave the box empty and we’ll pick a random vibe for you.
Font pairing
Font pairing preview
Choose a font for each role, then lock the ones you want to keep.
Locked fonts stay exactly as they are while “Create direction” keeps changing the unlocked ones — so you can settle one role at a time until all three feel right.
0 of 3 fonts locked.
Headlines and titles
Will change when you create a new direction.
Paragraphs and long text
Will change when you create a new direction.
Labels, buttons, small caps
Will change when you create a new direction.
Click the text and type your own — it re-renders live.
Font presets
Save your Heading, Body and Accent choices (and which ones are locked) so you can come back to them later.
Colour palette
- #3B211Ahsl 13·39·17
- #8C4A2Fhsl 17·50·37
- #D08C60hsl 24·54·60
- #EFD3B5hsl 31·64·82
- #FDF6EEhsl 32·79·96
Fonts for these colours
Saturated, high-contrast colors want condensed display type that shouts back.
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: #3B211A;
--color-2: #8C4A2F;
--color-3: #D08C60;
--color-4: #EFD3B5;
--color-5: #FDF6EE;
--font-heading: "Fraunces", serif;
--font-body: "Mulish", sans-serif;
--font-accent: "Caveat", cursive;
}