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.
color.brand.50 → 950 · one of the outputs
Website → design.md
Paste any URL and get its palette, type, spacing, and radius as a downloadable design.md with an AI-ready prompt.
- Extraction
- AI-ready
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