Tailwind 4 + shadcn/ui design tokens & components for Figma
Scafforge generates Tailwind 4 color primitives, shadcn/ui semantic tokens, and ready-to-use Figma components to jump-start your design system.
Select a theme, pick a style, and generate variables + canvas components in one click. Supports Light & Dark modes, two token structures (Classic and Ale Style), and covers the full component range.
Built with Tailwind 4 as the foundation, with more complex components composed with shadcn/ui and Radix primitives coming as it evolves.
- 22 color scales — Full Tailwind 4 palette with optional opacity variants
- 6 semantic roles — Neutral, Primary, Destructive, Success, Warning, Info
- 2 token modes — Classic (ShadCN flat tokens) or Ale Style (fg/bg/border grouping)
- 5 visual styles — Vega, Nova, Maia, Lyra, Mira
- 16 components — Buttons, inputs, selects, checkboxes, switches, badges, alerts, dialogs, and more
- 2 icon libraries — Lucide and Iconoir, fetched from CDN at runtime
- 11 font families — Inter, Geist, Roboto, DM Sans, Plus Jakarta Sans, Manrope, Nunito, Outfit, Poppins, Work Sans, IBM Plex Sans
- Foundation toggles — Radius, Spacing, Font Sizes, Border Width, Opacity
- Figma styles — Shadow effect styles (sm–2xl + inner) and Text styles (xs–9xl)
- Opacity variants — Figma doesn't allow combining a color variable with an opacity variable in a single fill. Scafforge works around this by automatically generating pre-composed color+opacity variables (e.g.
blue-500/50) so you get true opacity tokens that stay linked to their base color and just work.
Scafforge ships with an alternative token structure called Ale Style — a simpler, more intuitive way to organize semantic tokens.
Traditional shadcn/ui themes use flat, context-heavy names that quickly get confusing:
background, foreground, card, card-foreground, popover, popover-foreground,
primary, primary-foreground, secondary, secondary-foreground, muted,
muted-foreground, accent, accent-foreground, destructive,
destructive-foreground, input, ring, primary-hover, ...
That's 30+ tokens where half are -foreground suffixes, names overlap (muted vs secondary vs accent often resolve to the same value), and there's no clear system for when to use what.
Ale Style groups tokens by what they do — foreground, background, and border — with a clear naming hierarchy:
fg/neutral-1 ← primary text
fg/neutral-2 ← secondary text
fg/neutral-3 ← tertiary/muted text
fg/highlight-1 ← primary accent text
fg/over-theme ← text on colored backgrounds
fg/destructive-1 ← error text
bg/neutral ← page background
bg/neutral-2 ← card/surface background
bg/highlight ← primary action fill
bg/highlight-2 ← subtle accent surface
bg/destructive ← error background
border/neutral-1 ← default border
border/neutral-2 ← subtle border
border/highlight ← accent border
border/focus ← focus ring
The naming convention follows a category/intent-level-modifier pattern:
- Category — what the token controls:
fg/,bg/, orborder/ - Intent — the semantic purpose:
neutral,highlight,destructive,alert,info,positive - Level — numeric scale for intensity variants:
-1,-2,-3 - Modifier — optional interaction state:
-hover
For example, bg/highlight-hover is a background token for the primary action in its hover state, and fg/destructive-2 is a secondary-level destructive foreground color.
You never have to wonder whether to use muted, accent, or secondary — you just pick a neutral at the right level. Foreground is always fg/, background is always bg/, border is always border/. No ambiguity.
Both modes generate full Light + Dark themes and work with all 16 components.
| Group | Components |
|---|---|
| Controls | Button, Button Group |
| Forms | Label, Input, Textarea, Select, Checkbox, Radio, Switch, Slider, Form Field |
| Display | Badge, Card |
| Feedback | Alert, Toast |
| Overlay | Dialog |
| Collection | Contents |
|---|---|
Tailwind / Primitives |
Full Tailwind 4 color scale + black/white |
Tailwind / Sizing |
Font sizes, border radius, border widths, opacity |
shadcn / Themes |
Semantic color tokens (Light + Dark modes) |
shadcn / Components |
Per-component token variables |
| Style | Description |
|---|---|
| Vega | The classic shadcn/ui look |
| Nova | Compact, reduced padding |
| Maia | Rounded, spacious |
| Lyra | Monospace, technical |
| Mira | Dense, minimal |
- Open the plugin in Figma
- Select your colors and assign semantic roles
- Pick a token structure (Classic or Ale Style)
- Choose a visual style
- Toggle foundation options and select components
- Click Generate
Source-available. See LICENSE for details. Redistribution, commercial use, and derivative works are not permitted.
Created by Alexandre Schrammel