Design Vars

Design Vars automatically builds a production ready Figma variable system from just 1–2 brand colors. No more manually creating color scales, semantic tokens, or component variables one by one.

What gets generated:

🎨 Primitive Colors — 12-step scale (c0→c950) for primary, secondary, neutral, and 9 status colors (success, warning, error, info, processing, pending, active, new, inactive)🧠 Semantic Colors — 180+ alias variables with ☀️ Light and 🌙 Dark modes, covering backgrounds, text, borders, icons, status system, and component-level tokens✏️ Typography — font size, line height, font weight, letter spacing, and 29 semantic text roles (display, heading, body, label, button, table, badge, and more)📐 Spacing & Radius — full spacing scale + border radius tokens🌫 Shadows — effect styles (xs→2xl) + float variables🌈 Gradients — primary, soft, deep, and supporting color gradientsBuilt for design systems teams, UI/UX designers, and agencies who want a consistent, scalable token foundation without the setup overhead.

Supports 3 naming conventions: Figma style (color/primary/c500), Tailwind style (primary-500), or custom prefix.

Also supports supporting/accent brand colors, each with their own full 12-step scale and semantic aliases.