Surface, text, radius and spacing tokens are combined here using the generated values.
Ready for handoffAssign semantic colour roles
These names describe intended use, not a shade number. Six-digit hex values are required.
Verify essential contrast pairs
Normal text uses the WCAG AA threshold of 4.5:1. Interactive states and non-text UI need additional review.
Set typography and spacing foundations
The generated scale remains editable in code; these values establish a coherent starting point.
12–24 px
2–16 px
Generated type scale
Preview implementation intent
This is a component sanity check, not a replacement for product-specific visual and accessibility QA.
Brand systemOverview · Work · Contact
Semantic foundations
Designed once.
Implemented consistently.
Colour, type and spacing decisions arrive in code with roles, aliases and a contrast report.
Save the system and export handoff files
The ZIP is generated locally using an uncompressed, standards-compatible archive.
tokens.css
tokens.json
tokens.dtcg.json
tailwind.theme.js
contrast-report.md
README.md
Essential contrast checks are failing. Fix the palette before export, or explicitly acknowledge that the ZIP contains known WCAG AA failures.
Shareable stateThe URL contains only these token values and is capped at 5 KB.
Continue the handoff
Take the generated system into real production work.
The US$9.99 Toolkit adds delivery checklists today. The Figma system remains a transparent pre-launch until its native files and beta gates pass.