Tools
Make decisions.
Make the tokens.
Generate tokens, compare kits, check accessibility, and model ROI. No signup. Token editing stays in your browser; the two website scanners send the URL to our server to fetch public pages.
Token Generator
- OKLCH
- APCA
- 12 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. Your exact brand hex anchors its scale, semantic roles ship for light and dark, and 12 export formats include W3C, Tokens Studio and a Figma Variables script. APCA contrast, shareable URL state, and an API endpoint at /api/tokens.
color.brand.50 → 950 · one of the outputs
Agent-Ready Check
Scan any docs site for the five agent-readiness signals — llms.txt, component registry, DTCG tokens, MCP, Code Connect — and get a 0–5 score with evidence in seconds.
- AI-ready
- Scanner
- Free
Website → design.md
Paste any URL and get a full design kit — design.md, tokens.css, W3C token JSON, and a Tailwind theme — then hand it to the Token Generator, the Grid Builder or the Atlas.
- Extraction
- Tokens
- AI-ready
Token Diff
Compare two token kits side by side — every colour step, semantic role, chart colour, type, spacing, shape and motion change 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
Set columns, gutters, page margin, container and breakpoints, then export the same numbers as CSS Grid, Flexbox, a Tailwind theme or W3C layout tokens.
- Layout
- Grid
Release Checker
Diff two token exports to get the SemVer bump, the renames and removals that break consumers, and drafted release notes — then run the release checklist.
- Release
- Validation