Colors

Note: These docs describe the colors system in the Pro edition (1.8.0+). The Community edition uses an older setup — scroll down to the “Legacy docs” accordions 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.

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 “How we use the colors” below 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.

How to change the primary button color

The primary button uses the primary token in the shadcn colors collection, which points at a 5-step scale from shadcn theme colors.

1. Open the shadcn colors collection and find the primary token (and primary foreground).
2. For both shadcn (light) and shadcn-dark (dark) modes, point primary at a different scale — for example, shadcn/blue/4 in light and shadcn/blue/5 in dark.
3. If primary foreground needs to contrast the new color, update it too (commonly tw-raw/white or a light neutral).

All primary buttons, checkboxes, radios, and focus rings update at once. If none of the built-in shadcn/* scales match your brand, add a new 5-step scale to the shadcn theme colors collection and point primary at it.

How to change the kit’s neutrals

The kit’s neutral tone (background, foreground, muted, borders, etc.) is driven by the neutrals collection, which contains the 11 theme-neutrals/* values that shadcn colors references.

1. Open the neutrals collection.
2. Remap each theme-neutrals/* value to a different Tailwind neutral scale — for example, point them at tw-raw/stone/*, tw-raw/slate/*, tw-raw/zinc/*, or tw-raw/gray/*.
3. Do this for both shadcn and shadcn-dark modes if you want both themes retinted.

You don’t need to touch shadcn colors at all — every token that references theme-neutrals/* updates automatically.

How to change the chart colors

The chart colors collection holds 5 values used by chart components. Like primary, they reference the 5-step shadcn theme colors scale so charts stay consistent with shadcn/ui’s charting conventions.

1. Open the chart colors collection.
2. For each chart slot (chart-1 through chart-5), point the value at a different 5-step scale in shadcn theme colors — for example mix shadcn/blue, shadcn/green, shadcn/orange, shadcn/purple, shadcn/red to get a multi-hue chart palette.
3. Update both shadcn and shadcn-dark modes so charts stay readable in both themes.

Every chart component pulls from this collection, so updating it here is enough — no component-level edits needed.

Colors and the Design to Code plugin

The Design to Code 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 below). 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.

How to switch between light and dark mode in Figma

Because the kit uses Figma variable modes for theming, you switch between light (shadcn) and dark (shadcn-dark) by changing the mode — not by editing any colors. You can do this at multiple levels:

• Page level — change the variable mode of the current page to flip the whole page between modes.
• Frame level — override the mode on an individual frame. This is useful for showing the same design in both themes side by side.

Use the Apply variable mode control in Figma’s right-hand sidebar to do this.

Variable tips

Backgrounds

• Use background (standard color: white) for backgrounds
• Use muted for muted backgrounds
• The secondary background is used for secondary buttons, if you want secondary buttons to look good on muted backgrounds they will likely need to be a bit darker

Foreground

In general, use foreground for text and icons.

Use Foreground Muted for muted text.

Accent

Accent is muted by default in shadcn, but in our kit is a bright color, to be able to support accented variants.

Border and input variables

Both “border” and “input” refer to borders.

Styling/component tips

This kit is based on the Vega style of shadcn. You can see the different shadcn/ui styles via shadcn/ui create.

You can simulate the other shadcn/ui component styles or make your own by changing the variables in our kit.

If you change the variables, you can simulate the other styles: Nova, Maia, Lyra, Mira and Luma.

Here’s some examples:

• Lyra has square corners: can be simulated by setting all border radii to 0 (excluding infinite),
• Mira and Lyra are very condensed styles. You can change the overall spacing in the spacing collection to make it tighter. All components are built with auto layout and will scale along.
  • If you go for this path, your elements will change size. You might have to refresh the Autodocs based documentation.

Do note that some aspects are handled on the component level:

• Changing inputs to rounded: we offer both rounded and non-rounded inputs as Figma component variants
• Changing accent color to a bright or muted color: we offer both accented and non-accented menu options as Figma component variants

If you don’t desire these variants to be used, you can delete them in the process of creating your own design system.

Alpha colors

Use alpha colors to simulate opacity or blend modes. Figma does not provide a way to set opacity on a variable. As a workaround, we sometimes use 2 fills, generally on fills and strokes. A layer would then, for example, have a fill at 85% white and a general destructive color.

There are 2 variants: switch and non-switch.

• Switch automatically flips white to black and black to white in dark mode. Use it for overlays and highlights that should always read against the current background.
• Non-switch keeps the color you define, regardless of mode. This is useful for UI situations where you don’t actually want the colors to reverse — like shadows on dialogs.