Our Design System
The visual foundations that keep all our projects consistent. Tokens, palettes, typography, spacing — open and documented.
Colour palette
--primary: 16 71% 42%THE action colour: CTAs, links. 5.3:1 on white
--accent: 214 52% 25%Headings, structure. 11.3:1 on white
--navy-deep: 213 56% 17%Banner and footer backgrounds
--gold-bright: 41 88% 62%Figures on navy backgrounds only
--foreground: 215 28% 17%Body text. 14.7:1 on white
--muted-foreground: 215 14% 40%Notes, captions. 6.0:1 on white
--rose: 14 62% 40%Extended palette, toned down to the range
--violet: 214 52% 32%Extended palette, toned down to the range
--cyan: 205 48% 33%Extended palette, toned down to the range
--gold: 40 90% 30%Reviews, awards. ≥ 4.5:1 on white
--indigo: 213 56% 25%Extended palette, toned down to the range
--destructive: 0 72% 42%Errors, deletion
Typography
Typographic elegance from Lyon
Headings, CTAs, accents. 100–900.
Optimal readability for long paragraphs, with a carefully crafted editorial rhythm.
Body, navigation, labels. 200–800.
| Element | Size (fluid) | Line height | Usage |
|---|---|---|---|
h1 | clamp(2.125rem, 1.35rem + 3.3vw, 4.25rem) | 1.06 | Page title, above the fold |
h2 | clamp(1.625rem, 1.2rem + 1.8vw, 2.75rem) | 1.14 | Section title |
h3 | clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem) | 1.25 | Subtitle, card |
h4 | 1.125rem | 1.35 | Subheading |
h5, h6 | 1rem | 1.4 | Minor headings |
body | 1rem | 1.65 | Body text (Plus Jakarta Sans) |
text-sm | 0.875rem | 1.25rem | Secondary body, notes |
text-xs | 0.75rem | 1rem | Meta, badges, captions |
Spacing (Tailwind scale)
0.52px14px28px312px416px624px832px1248px1664px2496pxShadows
shadow-e1Barely perceptible hairline — fields, chips
shadow-e2Cards at rest
shadow-e3Hovered cards, floating buttons
shadow-e4Dialogs, panels
Custom CSS utilities
.glassWhite card, thin hairline, soft shadow — cards, fields
.glass-strongSame surface, stronger shadow — dialogs, headers
.glass-premiumHighlighted surface — above the fold, portfolio
.surface-sunkenAlternating cool-grey section, edges faded over 40 px
.section-yVertical section rhythm (--section-y)
.measureLine length capped at 68 characters
.text-gradient-warmTerracotta highlight on a heading word
.text-gradient-coolNavy highlight on a heading word
.cta-gradientTerracotta highlight + --primary-foreground label
.section-divider1 px hairline, faded at both ends
.card-img-frame16/10 image frame, zero CLS, zoom on hover
.spot-cardGlow and edge that follow the cursor
.btn-glow-fillSolid button: sheen + terracotta halo on hover
.btn-glow-ringOutline button: glowing edge on hover
.link-growUnderline that stretches from the left
.skip-linkSkip link, visible on focus
Component preview
Buttons
Badges
Gradients
KAYZEN Premium
Modern engineering
Glass Strong
Example card using the .glass-strong class.
A reusable design system
Your projects benefit from this proven design system. Visual consistency, accessibility and performance are guaranteed by design.