Components
Tokens
Grouped token tables, mode comparisons, and reusable cells.
Tokens panel
The complete sidebar. Switch modes to compare values and collapse groups independently.
Tokens
| Name | Value |
|---|---|
Label | #334155 |
Border | #e2e8f0 |
Heading | #0f172a |
Surface | Secondary/Background |
Background | #2563eb |
Label | #ffffff |
Background | #f1f5f9 |
Border | #cbd5e1 |
Label | #1e293b |
Radius | |
Horizontal padding | |
Unit | |
Token table
Four modes in a narrow viewport. Drag column edges and scroll horizontally; names and headers stay pinned.
| Name | Light | Dark | Sepia | High contrast |
|---|---|---|---|---|
Label | #334155 | #cbd5e1 | #735735 | #000000 |
Border | #e2e8f0 | #334155 | #ddc5a0 | #000000 |
Heading | #0f172a | #f8fafc | #563d21 | #000000 |
Surface | Secondary/Background | Secondary/Background | Secondary/Background | Secondary/Background |
Background | #2563eb | #93c5fd | #975a16 | #0000ff |
Label | #ffffff | #172554 | #fff7ed | #ffffff |
Background | #f1f5f9 | #253248 | #f5ead6 | #ffffff |
Border | #cbd5e1 | #475569 | #ddc5a0 | #000000 |
Label | #1e293b | #e2e8f0 | #563d21 | #000000 |
Column header and resize handle
Drag or use Left/Right arrows to resize. Shift moves faster. Double-click or press Enter to restore the initial width.
| Name | Light | Dark | Sepia | High contrast |
|---|
Token name
Color and dimension identities, with full names available on hover.
Group toggle
An expandable group with mouse and keyboard controls.
Value cell
Color swatches, transparency, dimensions, aliases, and invalid references.
Empty states
An empty library and a mode with no changing tokens.
No tokens yet
Your document’s color and dimension tokens will appear here.
No tokens change with Style
Choose another mode or All to see the rest of your tokens.