domains / families / design / design-theme-guide
design-theme-guide
authentic
Design-token register: colour, typography, spacing and radius tokens with light and dark values, contrast ratio and WCAG level. Use for design system documentation.
When to use
- brand colours, colour palette, theme
- typography, font pairing, type scale
- spacing, grid, layout rules
- "we have no design system"
- dark mode and light mode variants
- accessibility of our own colours
- Figma variables, Style Dictionary, CSS custom properties, `tokens.json`
When not to use
- This is a register of values. It does not draw the screens, and it does not implement
- It cannot pick a brand colour for the business. That is a decision, and the skill asks
- Contrast ratios here are calculated from hex values, which is correct for flat colour and
- It does not check a licensed typeface's terms, and it does not embed or host a font.
- A token register does not become a design system until components reference tokens
- Dark mode is a second set of values, not an inversion. Every token needs a real
- A theme cannot be audited for accessibility as a whole by a table. Automated tools catch
- No token pipeline, Figma variable sync or build step is generated. The register is the
Skill page
Source