Colors

--color-brandprimary brand blue

--color-brand-pressedlink active / pressed

--color-brand-tintlight surface, hover fill

--color-brand-tint-softsubtle background

--color-accent-cyansecondary accent

--color-accent-orangehighlight, used sparingly

--color-headingdefault heading color

--color-heading-herohero h1 override

--color-bodydefault body text

--color-text-on-brandtext on brand backgrounds

--color-surfacedefault page surface

--color-surface-altalternating section background

--color-surface-softvery subtle off-white

--color-borderdividers, input borders

--color-border-softsubtle separators

--color-inklogo, footer text

Type scale

--font-size-xsThe quick brown fox

--font-size-smThe quick brown fox

--font-size-baseThe quick brown fox

--font-size-mdThe quick brown fox

--font-size-lgThe quick brown fox

--font-size-xlThe quick brown fox

--font-size-2xlThe quick brown fox

--font-size-3xlThe quick brown fox

--font-size-heroThe quick brown fox

Font weights

light (300)The quick brown fox

regular (400)The quick brown fox

medium (500)The quick brown fox

semibold (600)The quick brown fox

bold (700)The quick brown fox

Buttons

Verified against legacy/index.html in DevTools. Primary: blue fill, white text, 10×48 padding. Secondary: tint fill, brand text, 10×10 padding.

Spacing scale

--space-0

--space-1

--space-2

--space-3

--space-4

--space-5

--space-6

--space-8

--space-10

--space-15

--space-20

--space-25

Border radii

--radius-sm

--radius-md

--radius-lg

--radius-xl

--radius-pill