Raw profile
This page exercises the profile — the package vocabulary — naked, before any presentation dresses it: the semantic colour roles, the type and space scales, radii and widths, the focus ring, and the accessibility floor.
Neutral roles
Chrome: backgrounds, surfaces, borders, the solid fill, and text. Radix's 12-step jobs, named.
Text role: high-contrast body text (--color-text).
Text role: muted / low-contrast text (--color-text-muted).
Accent roles
Emphasis / brand, same shape as a status family.
Text role: accent-coloured text (--color-accent-text).
Status roles
Convention (hue → meaning) — success, warning, danger, info. Never the sole signal; pair with an icon or word.
Success
Warning
Danger
Info
Type scale
The semantic size roles, largest to smallest. Each is one decision over the primitive scale (ratio 1.25).
Display --text-size-display
Title --text-size-title
Lede --text-size-lede
Body --text-size-body
Secondary --text-size-secondary
Muted --text-size-muted
Code 1234 --text-size-code
Space scale
The primitive rhythm (n = px ÷ 4). The inset / gap / flow roles map t-shirt sizes onto these.
Radii & widths
Radius roles
Border widths
Focus ring
Tab to a focusable element to see the ring (--focus-ring-width, --focus-ring-offset, --color-accent-border):
a focusable link, then a .
Accessibility floor
There is a screen-reader-only note right after this sentence — this text is visually hidden but announced by assistive tech (.sr-only). invisible on screen, present to a screen reader.
The skip-link behaviour ships in the profile; the visible focused state is the consumer's to style.
End of profile test.