Token Forge
Brand colors and a font in, full design system tokens out
Every project starts with the same grind — building color scales, type scales, spacing systems, and shadow tokens from scratch. Hand your Claw the brand colors and a font choice, and get a complete token set in CSS custom properties, Tailwind config, or SCSS variables.
PROMPT
Create a skill called "Token Forge". When I give you brand colors (as hex codes) and a font choice, generate a complete design token system. Include: color palette with shades from 50 to 950 for each color, semantic color tokens (success, warning, error, info), an accessible contrast matrix showing which foreground/background pairings meet WCAG AA (4.5:1) and AAA (7:1), a modular type scale from xs to 4xl with line heights and responsive sizes (configurable ratio, default 1.25), a spacing scale, shadow tokens from sm to 2xl, border radius tokens, and transition tokens. Output in my choice of CSS custom properties, Tailwind config, SCSS variables, or JSON. If I don't specify a format, default to CSS custom properties.
How It Works
Give your Claw your brand's primary colors and font choice. It generates
a complete, mathematically consistent design token set — color shades from
50 to 950 with accessible contrast pairings, a modular type scale with
responsive sizes, a spacing scale, shadow system, border radii, and
transition tokens. All in your preferred output format.
What You Get
- Color palette: 50-950 shades for each brand color, plus semantic tokens (success, warning, error, info)
- Accessible contrast matrix showing which foreground/background pairings meet WCAG AA and AAA
- Type scale: sizes from xs to 4xl with line heights, letter spacing, and responsive variants
- Spacing scale: consistent intervals from 1 to 96
- Shadow system: sm through 2xl elevation tokens
- Border radius tokens: sm through full
- Transition/animation tokens: durations and easing curves
- Output as CSS custom properties, Tailwind config, SCSS variables, or JSON
Setup Steps
- Provide brand colors (primary, secondary, accent) as hex codes
- Choose a font pairing (headings + body)
- Optionally specify a type scale ratio (default: 1.25 — major third)
- Optionally specify output format (default: CSS custom properties)
- Your Claw generates the complete token set
Tips
- The contrast matrix saves hours of manual checking — you'll know instantly which combos are accessible
- Works great as the first step in any new project before opening Figma
- Re-run with different scale ratios to compare options side by side
- The Tailwind config output plugs directly into tailwind.config.js with zero editing