Unreleased software — APIs may change without notice.
Lookup
Reference
Every token, class, and attribute on one page. For the full explanation of any item, see its section.
Color
| Token | Range | Purpose |
|---|
| --bg | 0 → 1 | Surface presence. 0 transparent, 1 loud chromatic. |
| --fg | −1 → 1 | Ink contrast. Negative neutral, positive chromatic. |
| --hue | 0 → 360 | Brand hue. Set on :root. Inherits. |
| --hue-shift | 0 → 360 | Relative rotation off the brand hue. |
| --hue-lock | 0 → 360 | Absolute hue. Overrides brand and shift. |
| Class | Meaning |
|---|
| .suc | Success — green. |
| .inf | Info — blue. |
| .wrn | Warning — yellow. |
| .dgr | Danger — red. |
| .bw | Neutral — zero chroma. |
| Variable | Use |
|---|
| var(--border) | Quiet border. Derives from --bg. |
| var(--Border) | Louder border, for focus and hover. |
Scale
| Token | Inherits | Purpose |
|---|
| --type | no | Local step. 0 is body, +N bigger, −N smaller. |
| --scale | yes | Regional multiplier. Rescales a whole subtree. |
Spacing derives from these: padding in em, sizing and gaps in lh. There is no separate spacing token.
Stage
| Class | Purpose |
|---|
| .stage | Paints a surface. Depth auto-cascades on nesting. |
| .stage-0 … .stage-3 | Pinned depth. 0 frontmost, 3 deepest. |
| .glass | Translucent stage with backdrop blur. |
Layout primitives
| Class | Arrangement |
|---|
| .row | Horizontal flow, wraps. |
| .column | Vertical flow. |
| .split | Rigid 50/50 grid. |
| .spread | Content-sized, slack in the gap. |
| .lcr | Three children: left, center, right. |
| .tmb | Three children: top, middle, bottom. |
| .flank | First child fixed, last fills. |
| .flank-end | First child fills, last fixed. |
| .grid | Auto-fit; wraps below --grid-min. |
| .hud-overlay | Children share one cell, pinned by anchor class. |
| .hud-grid | Children in nine distinct cells. |
| .hero | 5-slot panel: top, bottom, left, right, main. |
| .frame | Fixed aspect ratio; child fills. |
HUD anchor classes: ↖ ↑ ↗ ← • → ↙ ↓ ↘
Page layout
| Slot | Role |
|---|
| body.page | The eleven-slot grid. Only pg-main is required. |
| .pg-banner | Topmost strip — announcements. |
| .pg-header | Primary chrome — brand, top nav. |
| .pg-subheader | Secondary chrome — breadcrumbs, filters. |
| .pg-navigation | Navigation column. Scrolls. |
| .pg-main | Main content. Scrolls. Required. |
| .pg-aside | Right-side metadata. Scrolls. |
| .pg-footer | Bottom dock. |
Components
| Class / element | Component |
|---|
| .btn .icon-btn | Button — labeled, or square icon-only. |
| .tag | Chip. As button with aria-pressed, a toggle. |
| .tabs .tabs.underline | Tab strip. aria-selected marks the active tab. |
| .card .Card | Bordered container — quiet or louder border. |
| .input | Text field, select, or textarea. |
| .check .radio | Styled checkbox and radio. |
| .avatar | Initials chip. |
| .crumbs | Breadcrumb trail with auto separators. |
| .link | Inline text link. |
| .navbar .navbar-dynamic | Vertical nav column; dynamic collapses to icons. |
| <progress> | Determinate bar or indeterminate pulse. |
| <kbd> | Keyboard key. |
| <hr> hr.vr | Divider — horizontal, or vertical with .vr. |
| .nowrap .truncate | Text flow — no wrap, or ellipsized overflow. |
Theme attributes
Set on <html> or any ancestor.
| Attribute | Values |
|---|
| data-ui-theme | light · dark · (omit for system) |
| data-ui-motion | on · off · debug |
| data-ui-type | sm · md · lg |