Design System
Tools
The token generator is the headline — a live component theatre that re-renders with every edit. The rest are utilities that handle specific corners: diffing two kits, building palettes, auditing accessibility, modelling ROI.
Token Generator
- OKLCH
- APCA
- 11 EXPORT FORMATS
- LIVE PREVIEW
OKLCH-based token engine with a live component theatre — every token edit re-renders a marketing surface and a dashboard preview in real time, side by side with the controls. APCA contrast, 11 export formats including W3C Tokens Studio, shareable URL state, and an API endpoint at /api/tokens.
Token Diff
Compare two design token kits side by side. See every color, type, and spacing shift in one view.
- TOKENS
- DIFF
Accessibility Checklist
Audit a design system implementation against WCAG, APCA, and the real-world a11y rules teams miss.
- A11Y
- CHECKLIST
ROI Calculator
Model the engineering hours and design hours a system saves vs builds at a known team size.
- BUSINESS
- METRICS
Grid Builder
Visualize a responsive grid system — columns, gutters, breakpoints — and export the spec.
- LAYOUT
- GRID
Release Checker
Validate a design-system release for SemVer correctness, breaking-change detection, and release notes.
- RELEASE
- VALIDATION