The design system that closes the gap between design and code.
A typed React component library, an OKLCH token system, and a pattern catalog — shared across every surface we ship.
Project
Migration to v1.4
Auto-deploy
on merge to main
Theme
- Components
- 42across 6 categories
- Tokens
- 1,184primitive · semantic · component
- Accessibility
- WCAG 2.2AA targeted
- Patterns
- 15reference compositions
An OKLCH-native token system.
Three tiers — primitives, semantic, and component — so a single source of truth flows from --color-blue-500 to --color-button-primary-background. Light and dark are mirror twins of the same contract.
Open the token explorerinteractive · primary
oklch(L C 274)
type scale
spacing
42 typed React components.
Headless primitives, fully composable, accessible by default. Every component ships with TypeScript types, Storybook stories, with TypeScript types and full Storybook documentation.
Foundations
12Button
Primary, secondary, outline, ghost, destructive.
Forms
14Input
Text, email, password, search, file.
Navigation
9Tabs
Underline, contained, vertical orientations.
Overlays
8Dialog
Modal, sheet, popover, tooltip, hover card.
Delete project?
This cannot be undone.
Data Display
11Table
Sortable, sticky headers, dense or comfortable.
Feedback
8Alert
Default, success, warning, destructive.
Build passed
3,402 tests · 1m 14s
From components to compositions.
15 reference patterns that show how the primitives compose into the screens you actually ship — auth flows, form compositions, layout shells, page compositions, and more.
Layout Patterns
Page shell, sidebar, content area — collapses to a sheet below lg.
Login & Registration
Sign-in, registration, social auth. Same schema, three layouts.
Site Header
Sticky nav, search trigger, theme toggle — used on this very page.
Token Bridge keeps Figma and code in sync.
Pull the latest tokens into Figma as variables, or push your edits back to a pull request. No more drift between the file you're designing in and the code that ships.
- Two-way sync. Figma variables ↔ CSS custom properties ↔ Tailwind theme.
- Mode-aware. Light and dark collections map to a single token contract.
- Opens a PR. Designer-side edits land in GitHub with a diff and a reviewer assigned.
Free · v0.9 beta · in development
Collections
Modes
Pending sync · 3 changes
ahead by 3