Foundations

Tokens

Every value below resolves from @webzenia/tokens at runtime — nothing is hand-typed. Two layers: primitive scales, and the semantic tokens components actually consume.

Colour
neutral · 0 → 1000 · the canvas, surfaces, and text
brand · blue 50 → 950 · hue 262.236°, the scarce accent
status · success · error · warning · info
surface
base
card
elevated
text
default
muted
accent
inverse
border
faint
subtle
divider
default
strong
accent
default
fill
hover
status
success
error
warning
info
Typography
AgSöhne Display
AgSöhne
AgDomaine Display
AgSöhne Mono
display-xlDisplay XL
display-lDisplay L
section.h2

Section heading H2

section.h3

Section heading H3

section.h4

Section heading H4

body-large

Body large — the workhorse paragraph role.

mono-eyebrowmono · eyebrow
Spacing · 25-step scale
step-2
step-4
step-6
step-7
step-9
step-11
step-12
step-14
step-15
step-16
step-18
step-20
Radius
radius-2
radius-4
radius-6
radius-8
radius-10
Elevation · shadow
card resting
elevated
subtle glow
brand glow · rare
Glass · blur ≤ 16px
.glass-card — nav / modals / ambient only
Motion
120ms
instant
140ms
micro
150ms
fast
200ms
base
260ms
expand
300ms
slow
320ms
modal
500ms
slower
ease-defaultcubic-bezier(.16, 1, .3, 1)
ease-outcubic-bezier(0, 0, .2, 1)
ease-incubic-bezier(.4, 0, 1, 1)
ease-springcubic-bezier(.34, 1.56, .64, 1)