Headings
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
Subheadings
The quick brown fox
The quick brown fox
The quick brown fox
Body
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
Inline text styles
Single-class modifiers applied to runs of type. Combine with any variant.
Italic emphasis
Strikethrough copy
All caps run
No wrap inside this run
Muted secondary copy
Two-line clamp — line one continues here and line two finally cuts off
Three-line clamp — the body wraps to fill three visual lines before the ellipsis truncates the rest of the run
Text colour
Four semantic text-colour tokens. Use the token, never a raw hex.
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
Alignment
Three alignment utilities. Apply to a block-level element.
Aligned to the left edge — default for body copy.
Centered run — reserve for very short labels.
Aligned to the right edge.
Rich text
Long-form flow — every HTML primitive styled to system. The <RichText> wrapper holds h1–h6, p, lists, blockquote, code, hr, and figure with caption.
Heading 1
The grain of a system is felt in the longest paragraph, not the loudest button.
Heading 2
Tracking eases at smaller sizes. Opacity carries hierarchy where size cannot. Links inside a paragraph, like this one, share the underline pattern of the plain link component.
- Tokens before components.
- Opacity before colour.
- Hierarchy before decoration.
To dwell is to garden. Every line is a row that needs weeding.
Inline --space-4 keeps rhythm consistent.
Opacity scale
The only four content opacities permitted in the system.