Living document

Style Guide

Edit values in src/app/globals.css (the :root block). Every page reads from these tokens.

Color

primary

--color-primary

--color-bg

--color-fg

fg-soft

--color-fg-soft

border

--color-border

yellow

--color-yellow

magenta

--color-magenta

orange

--color-orange

grey-100

--color-grey-100

grey-200

--color-grey-200

grey-800

--color-grey-800

black

--color-black

Typography

h1 — display

Headline 106

h2 — big

Headline 64

h2

Heading 30

h3

Heading 30

h4 — meta label

Label

h5

Subhead 24

body

The quick brown fox jumps over the lazy dog. 0123456789

body big

The quick brown fox jumps over the lazy dog.

Spacing scale

--space-xs

--space-sm

--space-md

--space-lg

--space-xl

--space-2xl

Motion

Hover any swatch to preview the easing on a 600ms transform.

ease-sine

--ease-sine

ease-out

--ease-out

ease-in

--ease-in

Buttons + Links

Default link →
External link

Grid

12 columns. Total width = 96vw on desktop, 100% with 15px gutters on mobile.