Jump-start your
design system.
Tailwind 4 color primitives, shadcn/ui semantic tokens, and 16 canvas components — Light & Dark, all interactive states, in one click.
Everything to get your system off the ground
22 color scales
Full Tailwind 4 palette with v4.2 additions. Every scale produces 11 shades as Figma variables — your primitive layer, done.
16 components
Button, Input, Select, Checkbox, Switch, Slider, Badge, Card, Alert, Toast, Dialog and more — wired to your tokens from the start.
2 token structures
Classic shadcn/ui flat tokens or Ale Style — a fg/bg/border hierarchy that tells you exactly which token to reach for.
5 visual styles
Vega, Nova, Maia, Lyra, Mira — each bakes a distinct radius, spacing, and sizing personality into every generated component.
All interactive states
Default, Hover, Focus, Disabled — every form component ships with the full variant set, token-bound and ready to hand off.
Custom color palettes
Add as many custom scales as you need — name them, paste any hex/rgb/oklch value, and get 11 OKLCH-generated shades ready to assign to semantic roles.
Slots-ready components
Components are structured with ⊞-prefixed slot frames so they're ready to wire up as Figma Slots the moment the feature lands in your plan.
From zero to system in three steps
Pick your colors
Choose from 22 Tailwind 4 scales — or add multiple custom palettes with your own names. Paste any hex, rgb(), or oklch() to generate 11 OKLCH shades, then assign each to a semantic role.
Configure your system
Classic shadcn/ui tokens or Ale Style, your visual style, which of the 16 components to include, which foundation layers to generate.
Generate everything
One click builds your variable collections, Light + Dark semantic themes, all component states, text and shadow styles, and canvas pages.
No more wondering which token to use
Classic shadcn/ui gives you 30+ tokens where muted, accent, and secondary often resolve to the same value. Ale Style groups tokens by what they do — foreground, background, border — with a clear intent and level hierarchy.
You always know which category to reach for. No ambiguity. Both structures generate full Light + Dark themes and work with all 16 components.
fg/neutral-1Primary textfg/neutral-2Secondary textfg/highlight-1Accent textbg/neutralPage backgroundbg/neutral-2Card surfacebg/highlightPrimary actionbg/neutral-4Form controlborder/neutralDefault borderborder/focusFocus ring16 components, ready to use
Every component arrives with Default, Hover, Focus, and Disabled variants, bound to your token collection so Light and Dark switch without touching a single component.
Your system starts here.
Free Figma plugin. No account required. Install and generate your first system in under a minute.