Tokens, primitives, and compositions for the workflows real teams run — long lists, branching wizards, dashboards that surface signal not noise.
What the system is, the tokens underneath it, and the rules every component follows. In this order.
Tokens, primitives, patterns, behaviors, and how every component page is laid out so you can skim it in two minutes.
Read 02 · FoundationsColor, typography, spacing, layout, elevation and radius, motion, iconography. Use the token; never hard-code the value.
Read 03 · StandardsAccessibility, interaction states, and voice and tone. The part of the system that outlives any single component.
ReadLive examples, properties, anatomy, and best practices for every primitive. Built to be skimmed in two minutes and copied in five.
| FX-2041 | 1,420 |
| FX-2042 | 84 |
| VL-118A | 312 |
Compositions of primitives — not new components. Use them intact; don't reinvent.
Header + 2-col body + side panels + sticky footer. Workspace creation, import flows, configuration setup — same chrome, different fields.
Open 02 · InboxTabs · toolbar · message cards · detail pane · bulk-action bar. Notification centers, comment threads, approval queues — one shell.
Open 03 · Upload WizardSettings → Mapping. File picker, options, folder, priority list, column mapping. The most common enterprise chore, done once and reused.
OpenIf a component, layout, or copy choice conflicts with one of these, the principle wins.
Color, motion, and elevation are signals — not decoration. Reserve the loud treatment for moments that need attention.
Numbers stack vertically. Tabular-nums, right-aligned, same column width regardless of value. A misaligned digit reads as a typo.
The bulk-action bar in the inbox is the same component in the library and the parts list. Fork the data, not the chrome.
Build new screens by composing primitives. If you can't, the gap is the system's — file a proposal before shipping a one-off.
Hover, active, focus, selected, disabled — never decoration. They communicate intent. Use them consistently; users learn them once.
Tight rows, compact toolbars, full-screen tables. But 32px is the floor for any interactive target. Compact never means hard to hit.
Start with the introduction, browse a primitive, or jump straight into a composition. Every page has live examples and copy-pasteable code.