Brand book — v0
The design system, one page.
Two anchor colors stay locked: Brand Navy and Lit Navy (the CTA hover state). Everything below extends out from those into a sophisticated supporting palette — for gradients, panels, illustration accents, and editorial moments.
Foundation
The anchors
These three colors carry the brand. Every other palette below is derived from or harmonises with them.
primary substrate
primary accent
hover / highlight derived
Navy spectrum
One color, nine readings.
Brand Navy and Lit Navy live in the middle of a full spectrum — from deep ink for grounding, to whisper-pale for backdrops. Use this scale for hierarchy, gradients, and layered depth without leaving the brand color.
deepest backdrop / extreme depth
secondary depth / footer alt
primary brand — --hd-accent
CTA hover / highlight state
subdued mid-navy
lit accent / illustration
soft tint / decor
backdrop haze / wash
barely-there navy substrate
Cool neutrals
Slate — the special grays.
Pure neutral gray reads cold next to navy. These slates carry a faint cool undertone so they harmonise with Brand Navy in mixed layouts — captions, body text alts, supporting surfaces.
ink / near-black grounding
deep neutral, harmonises with navy
mid neutral
soft neutral / borders
neutral substrate
Warm neutrals
Paper — the warm substrate.
Use sparingly. When a section wants to feel editorial / printed / human (case studies, founder notes, long-form content), substitute Paper for White and the page warms up without breaking the navy.
warm off-white substrate alt
warm card / panel
editorial accent panel
Gradients
Eight ways to combine.
Sophisticated gradient pairings within the palette. CSS code shown below each — copy directly into stylesheets.
primary navy face, lit at top, brand at floor — CTA button on hover
linear-gradient(180deg, #243F7C 0%, #182E5F 100%)deep brand surface (dark panels, footer alt, hero shadow)
linear-gradient(180deg, #182E5F 0%, #0A1530 100%)soft navy halo on white — backgrounds, behind hero, page atmospheres
radial-gradient(120% 100% at 50% -10%, rgba(24, 46, 95, 0.00) 30%, rgba(24, 46, 95, 0.08) 65%, rgba(24, 46, 95, 0.20) 100%)white-to-whisper-navy substrate fade — section breaks
linear-gradient(180deg, #FFFFFF 0%, #EAF0F8 100%)bright sky to brand — illustrative accents, hover surfaces on lighter contexts
linear-gradient(180deg, #5C7BC0 0%, #182E5F 100%)neutral cool gradient — captions, secondary surfaces, supporting panels
linear-gradient(180deg, #7484A0 0%, #3E4B66 100%)warm substrate fade — editorial moments, case-study panels
linear-gradient(180deg, #FAF8F4 0%, #E8E1D1 100%)two stacked sheens over brand — the actual button face
linear-gradient(180deg, rgba(255, 255, 255, 0.07) -10%, rgba(255, 255, 255, 0.00) 50%), linear-gradient(180deg, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.05) 110%), #182E5FTypography
One serif. One sans. Eight roles.
Hedvig Letters Serif for editorial headings. General Sans for body. The eight roles below cover every text need on the site.
text-display
clamp(32, 4vw, 56) / -1.8 / 1
text-hero
clamp(30, 4.4vw, 54) / -1.8 / 1.05
text-section
clamp(28, 3.5vw, 42) / -1 / 1.1
text-step
clamp(24, 3vw, 36) / -1 / 1.1
text-quote
clamp(26, 3.2vw, 36) / -0.6 / 1.15
text-body-lg
16 / -0.1 / 1.5
text-body-md
15 / -0.1 / 1.6
text-eyebrow
13 / 0.64 / 1 — uppercase
Components
Primary CTA — every state.
Lit-from-within depth on a solid brand face. Five inset layers plus two stacked sheens. Brightness filter carries the hover; transform translates 1px on press.