← Documentation

Colors

Note: These docs describe the colors system in the Pro edition (1.8.0+). The Community edition uses an older setup — see the legacy docs accordions on the Tips and references page for details on earlier versions.

The theming variables are based on the shadcn/ui theming docs.

We offer both light and dark themes.

shadcn colors#

The shadcn colors collection is the main thing you’ll want to customize. It contains the 27 semantic tokens that shadcn/ui components reference — background, foreground, primary, primary foreground, secondary, accent, muted, destructive, border, input, ring, and so on.

It’s configured with two modes: shadcn (light) and shadcn-dark (dark), so every component automatically picks up the right value for the active mode.

If you open the collection, you’ll see that each token points at a value from one of the other collections — it’s a mix of:

  • theme-neutrals/* (from the neutrals collection) — used for backgrounds, foregrounds, secondary, muted, borders, and similar.
  • shadcn/* (from the shadcn theme colors collection) — used for primary and accent. We use the 5-step shadcn scale here specifically for the primary button, so the kit stays compliant with how theming works in shadcn/ui create — picking a primary color there generates a 5-step scale, and our Figma variables map one-to-one to that. The same 5-step scale is also used for the chart colors.
  • tw-raw/* (from the raw tailwind colors collection) — used directly for a few tokens, notably destructive (tw-raw/red/600 in light, tw-raw/red/400 in dark) and background (tw-raw/white / tw-raw/neutral/950).

If you want to reskin the kit, this is where to start:

  • Change primary to retint buttons, checkboxes, focus rings, and other accented elements in one step.
  • Change accent to brand your menus, links, and subtle highlights.
  • Change destructive to match your brand’s error/danger color.

To flip the neutral tone of the whole kit (e.g. switch from neutral to stone, slate, zinc, etc.), you don’t touch shadcn colors at all — instead, remap the values inside the neutrals collection. Everything in shadcn colors that references theme-neutrals/* will update automatically.

For step-by-step instructions, see Customizing colors.

Raw colors (source palettes)#

Two collections act as the source palette for everything above:

  • raw tailwind colors — the full Tailwind 4.2 palette on the standard 11-step scale (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950). Published by default — we keep this one published because many people use the kit for wireframing and want direct access to the full Tailwind palette without extra setup. Also handy when you’re building custom brand palettes.

    On the flip side, if you’re using the kit as the foundation for a tightly-scoped design system, it often makes sense to do the opposite: unpublish raw tailwind colors so designers can’t pull arbitrary Tailwind shades into their work. That restricts the usable palette to shadcn colors + neutrals + chart colors, which keeps the system disciplined.

  • shadcn theme colors (unpublished) — the tighter 5-step scale that shadcn/ui uses for its own theme tokens. As the name suggests, this one is unpublished by default: it’s meant as reference material that feeds into shadcn colors, not something you apply directly to layers. If you want to reference it from your own variables, you can publish it manually.

Note: Figma does not support OKLCH, so we are using hex-based variables.

Default usage#

When you download the kit, here’s how it’s set up out of the box:

  • neutrals is mapped to tw-raw/neutral.
  • shadcn colors references neutrals for foreground/secondary/muted/border tokens, uses shadcn/* values for primary and accent, and points directly at tw-raw for background and destructive.
  • Both light (shadcn) and dark (shadcn-dark) modes are fully configured.
  • All components consume only the shadcn colors tokens, so they pick up any changes you make to that collection automatically.

This default setup is a good starting point — you can use it as-is, or follow the steps in Customizing colors to swap in your own brand palette.

How we use the colors#

Raw colors are never applied directly to components. Instead, they flow through a chain of collections so you can reskin the entire kit without touching individual layers:

  1. Raw palettes (raw tailwind colors + shadcn theme colors) — the source values, unpublished.
  2. Supporting collections (neutrals, chart colors, alpha) — pull specific values from the raw palettes to form the kit’s working palette.
  3. shadcn colors — the 27 semantic tokens reference values from the supporting collections (and occasionally directly from raw colors). This is the layer components actually consume.
  4. Components — every component uses only the shadcn colors tokens, so they automatically pick up theme changes.
The shadcn colors, chart colors, and supporting variable collections in the Pro edition
The color collections in the Pro edition

Colors and the CSS Export plugin#

The CSS Export plugin generates Tailwind v4 / shadcn-compatible CSS directly from the kit’s variable collections. It’s what lets you round-trip a Figma theme into a working globals.css.

Here’s what the plugin actually does with each collection:

  • shadcn colors — this is the collection the plugin exports as your theme. It reads the collection (matched by name containing “shadcn” and “color”), walks each variable, resolves aliases all the way down to a concrete color value, and outputs standard shadcn CSS variable names: --background, --foreground, --primary, --primary-foreground, --card, --popover, --secondary, --muted, --accent, --destructive, --border, --input, --ring, and the full --sidebar-* set.
  • chart colors — exported as --chart-1 through --chart-5, following shadcn/ui’s flat chart naming convention.
  • neutrals and alpha — these collections are excluded from direct export. The plugin skips them because they’re meant to feed into shadcn colors through variable aliases. As long as a shadcn colors token ultimately resolves to a neutral or alpha value, the plugin picks it up automatically when it resolves the alias chain.
  • raw tailwind colors and shadcn theme colors — the plugin doesn’t export these directly either. They’re source palettes; their values only end up in the output if a shadcn colors token references them.

Dark mode is handled via Figma variable modes. Any mode whose name ends in -dark (e.g. shadcn-dark) is emitted as a .dark { … } block. The plugin does this automatically — you don’t need to run it twice.

Alpha colors work through the kit’s two-fill pattern (see the Alpha colors section on the Tips page). The plugin resolves alpha values through the alias chain, so as long as your layer uses the alpha variables the kit provides, the exported CSS matches shadcn’s conventions.

What this means for how you build#

  • Bind layers to shadcn colors tokens wherever possible. If every component in your design references the semantic tokens (via aliases down the chain), the plugin produces output that drops straight into a shadcn/ui codebase with zero manual edits.
  • Avoid bypassing the chain. If you paint a component directly with a tw-raw/* value, it’ll still work visually, but it won’t show up in the exported theme — the plugin only exports what’s in shadcn colors and chart colors.
  • Customize inside shadcn colors and neutrals, then export. A typical workflow: remap neutrals (to switch the kit’s neutral tone), update shadcn colors tokens for brand/primary/accent, run the plugin, and paste the resulting CSS into your shadcn project. Both light and dark modes come through in one export.

Going further#

  • Customizing colors — step-by-step instructions for changing the primary button color, switching the neutral tone, and recoloring the charts.
  • Light and dark mode — how to switch between light and dark mode in Figma using variable modes.
  • Tips and references — variable usage tips, styling notes for simulating other shadcn/ui styles, alpha colors, and legacy docs for kit versions 1.0.0–1.7.0.