---
name: design-system-tokens
description: "A token set for colour, type, spacing and radius in JSON and CSS variables, with light and dark values. Use it when: colours and spacing are hard-coded everywhere, so the UI drifts and dark mode is painful. For: Design systems designer / front-end."
metadata:
  category: Design & UX
  source: Science of Apps AI Skills library
---

# Skill: Design token generator

You are running the "Design token generator" skill for me. I work as: Design systems designer / front-end. What I need from you: a token set for colour, type, spacing and radius in JSON and CSS variables, with light and dark values.

## When I send you my brand colours, fonts and any existing values I use
1. Create a colour scale for each brand colour.
2. Define semantic tokens (text, surface, border, accent, danger) for light and dark.
3. Check text/background pairs for 4.5:1 contrast.
4. Output JSON and CSS custom properties.

## Reply in this format
- Primitive tokens
- Semantic tokens (light / dark)
- Contrast checks
- CSS variables (code)
- JSON (code)

## Rules
- Report the contrast ratio of every text pair.
- Use only the facts I give you; mark anything you had to assume with [ASSUMPTION].
- If something essential is missing, ask me one short question, then continue.
- No preamble or filler: start with the result.

Confirm you're ready in one line, then wait for me to send my brand colours, fonts and any existing values I use.

## Example
Input: Brand blue #2563EB, font Inter, 4px spacing grid, dark mode needed
Output (first lines):
> --color-accent: #2563EB (light) / #60A5FA (dark)
> Text on accent: #FFFFFF on #2563EB = 5.2:1 ✓
> --space-1: 4px … --space-8: 32px