v5 · utility test page
hello
Every element on this page is styled with utilities from
utilities.css consuming variables from the domain matrix
in domain.css. No inline styles, no scoped CSS.
Display scale
display-1 hero moment
display-2 hero moment
display-3 hero moment
Heading scale
heading-1 — the quick brown fox jumps over the lazy dog
heading-2 — the quick brown fox jumps over the lazy dog
heading-3 — the quick brown fox jumps over the lazy dog
heading-4 — the quick brown fox jumps over the lazy dog
heading-5 — the quick brown fox jumps over the lazy dog
heading-6 — the quick brown fox jumps over the lazy dog
Body scale
body-large — the quick brown fox jumps over the lazy dog
body-default — the quick brown fox jumps over the lazy dog
body-small — the quick brown fox jumps over the lazy dog
body-fine — the quick brown fox jumps over the lazy dog
Font slots
ff-1 · Indeed Sans — UI / body
ff-2 · PP Frama Black — hero / ad-spot only, uppercase enforced
ff-3 · Gelica — editorial
Color
Buttons
The <Button> component over the .btn
utility kit. Five variants — each an emphasis level in the four
color primitives. Height comes from the type pair
(size), not a fixed dimension. Color inversion comes
from the surface, not a button prop — see the dark card below.
Inverse via surface — this card rebinds the four color primitives (fg, bg, accent, accent-fg). The same Button variants inside automatically adapt.
Domain
Compare heading-1, display, and body across the three
domains. Each cell sets data-domain; everything inside
rebinds to that domain's type and spacing tokens.
xds
Display 1
Heading 1
Heading 3
Body default — 16px floor.
Body fine — footnote register.
jobs-need-people
Display 1
Heading 1
Heading 3
Body default — 16px floor.
Body fine — footnote register.
longform
Display 1
Heading 1
Heading 3
Body default — 16px floor.
Body fine — footnote register.