Primitives + accessibility showcase
Bundle primitives wrap the .of-* idioms in of-styles.css; system primitives consume the same tokens. This page exercises both, plus the keyboard, focus, and reduced-motion paths the e2e suite audits.
Wrappers around .of-* CSS idioms
These primitives wrap selectors from of-styles.css verbatim — adding typed React APIs without inventing new visuals. The bundle stays the spec.
Eyebrow + Hairline
Section labels in 0.18em uppercase tracking, plus 1px hairline rules.
Section content lives between hairline rules.
Manifesto
Left-rule indented column with [k, v] rows. Used for principles and tabular-num enumerations.
Terminal
macOS chrome + tab strip + REPL body. Token classes (.ps / .com / .ok / .kw / .arg) match the bundle.
StatStrip
N-cell horizontal strip with hairline dividers. Tabular-num values; optional delta in sage.
TokenCard
Slab card with eyebrow tag, name + ticker accent, description, meta footer.
Non-yielding protocol token, minted 1:1 against USDC.
Vault position spread across strategies. Accrues exchange-rate appreciation.
Governance and utility token for protocol participation and treasury control.
Controls and inputs
Large touch targets, labeled inputs, modal trigger. Buttons are normal-case with sage on hover; inputs use the sage focus ring.
Loading state
The container keeps a stable footprint while skeletons transition into real content.
Chart demo
Tokens at a glance
Focus flow sample
Extra keyboard targets keep the showcase in a strictly top-to-bottom tab sequence for auditing.