Ship accessible UI faster, with less to maintain.
Production-ready components and tokens that compile to plain CSS variables. Less custom styling, fewer regression risks, and a system that flexes from light to dark without touching your component code.
Why this helps you
Components do the heavy lifting
Buttons, inputs, modals — tokenized, themeable, accessible by default. Drop them in and stop reinventing the same five primitives.
Tokens propagate
Tokens compile to --color-*, --spacing-*, --type-* CSS variables. Change one value, every consumer updates.
Accessibility comes baked in
WCAG 2.2 AA contrast is validated at build time. Keyboard support, focus rings, and screen-reader semantics ship with the components.
How to start
Five concrete moves you can make today — each links to the page that gets you unstuck fastest.
- Open Overview
Read Tokens → Overview
Twelve minutes to understand the two-tier architecture, naming convention, and theme model. Don't skip — it explains everything.
- Open All Tokens
Browse All Tokens to find what you need
Searchable, filterable reference for all 270 tokens. Click any CSS variable chip to copy var(--name) to your clipboard.
- Open Iconography
Use Lucide for icons
Internal apps standardize on
lucide-react. Tree-shakable, accessible, and matches our stroke style. - Open Components
Reach for components before custom CSS
If a component covers your need, use it as-is. If it almost covers your need, raise the gap before you fork.
- Open Accessibility
Run the accessibility checklist before merging
The list at the bottom of the Accessibility page catches most issues that surface in audits. It's faster than learning them the expensive way.
Where to go next
The pages most often referenced by engineers. Bookmark them — you’ll be back.
- All Tokens
270 tokens with previews, filters, and click-to-copy CSS variables.
- Components
Production-ready React components with documented states.
- Iconography
Lucide setup, sizes, labeling rules, and the starter set.
- Accessibility
WCAG 2.2 AA criteria and a pre-merge checklist.
- Tokens Overview
How the JSON → CSS + TypeScript pipeline works.
See a missing variant? Open an issue.
Contribution beats forking — every fork drifts. If a component is missing a variant, a state, or a token, file it and the next engineer benefits too.