Style guide
A showcase of the design system behind Vantage: type, colour, and the component patterns every page is built from.
Typography
Display heading
Lora 600 · clamp(2.5rem – 4rem)
Headline heading
Lora 600 · clamp(1.875rem – 2.5rem)
Title heading
Lora 600 · 1.5rem
Body large. Introductions and standfirsts use Inter at 1.125rem with relaxed leading.
Body regular. The reading size for essays is 1.05rem with a line height of 1.8, which suits long paragraphs.
Body small. Captions, dates and metadata in the muted colour.
Colour
Background
--color-bg
Surface
--color-surface
Surface 2
--color-surface-2
Surface 3
--color-surface-3
Text
--color-text
Muted
--color-text-muted
Ink accent
--color-accent
Secondary
--color-secondary
Buttons and pills
Cards
C01
The Quiet Craft of Repair: Mending More Than Just Clothes
Soft card
Used for hero panels, essays, forms and callouts. Radius 1.5rem, the warm second surface, no border.