Skip to content
AI Design Kits
All Prompts
Design systems Prompt In the kit

Design tokens from brand guidelines

Derive a semantic color, type and spacing token set with light and dark themes.

Prompt

You are a design systems lead. Brand input: [colors, fonts, tone].
Produce:
1. Primitive palette (10 steps per hue, OKLCH).
2. Semantic tokens: background, surface, text, muted, primary, border, focus, success, warning, danger — light + dark.
3. Contrast check for every text/background pair (WCAG AA).
4. Type scale (6 steps) and spacing scale (4px base).

How to use

  1. 01Paste brand colors and fonts.
  2. 02Paste the CSS output into Cursor or your Figma variables plugin.