Foundations

Typography

Schibsted Grotesk across all text — headings and body. JetBrains Mono for code moments only. Display and H1–H3 are fluid, so what you see matches your viewport. Everything smaller is fixed, with line-heights on a 4px grid.

Typefaces

Schibsted Grotesk
Headings and body text400 — regular · 600 — semibold
JetBrains Mono
Code moments only400 — regular

Type scale

DisplayFluid — clamp(2rem, 0.75rem + 5vw, 5rem)

The space between design and code.

H1 (fluid)Fluid — clamp(1.75rem, 0.75rem + 4vw, 4rem)

Token-first. Automated. Production.

H2 (fluid)Fluid — clamp(1.625rem, 1rem + 2.5vw, 3rem)

Component library

H3 (fluid)Fluid — clamp(1.5rem, 1rem + 2vw, 2.5rem)

Selected work

H4--font-size-h4 · 24px / 32px

Button

H5--font-size-h5 · 20px / 24px

Installation

Body--font-size-body · 18px / 28px

Every page on this site is the design system running in production. This reference updates automatically whenever a change merges — no manual documentation writing.

Control--font-size-control · 16px / 24px

Save changes

Small--font-size-small · 14px / 20px

29 components · 368 tokens

Label--font-size-small · 14px / 16px

Email address

Caption--font-size-caption · 12px / 16px

PRIMITIVE · COMPOSITION · PATTERN

Token reference

Typography tokens are not axis-aware — they are identical across dark mode and bold expression. Full searchable list at /design-system/tokens (filter by "font" or "line-height").

Contact

Say hello