← Documentation

Colors

Note: These docs describe the colors system in the 2.0 kit, shared by both the Community and Pro editions — Community ships the Nova style; Pro adds all 8 styles, Pro Blocks, and Obra Custom components (see Pricing for the full comparison). For kit versions before 2.0, see the legacy color docs.

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 semantic tokens that shadcn/ui components reference — background, foreground, primary, primary foreground, secondary, accent, muted, destructive, border, input, ring, the chart tokens, 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/* (from the theme collection) — the source values for shadcn colors’ background, foreground, secondary, muted, borders, destructive, and chart tokens. Editing theme sends its changes downstream into shadcn colors automatically — it’s the single place you go to retint the kit’s neutrals, destructive color, and charts together.
  • tw-raw/* (from raw tailwind colors) — used directly for a few tokens, notably primary/accent (e.g. tw-raw/blue/500) and background (tw-raw/white / tw-raw/neutral/950).
  • Alpha variants — the two-fill opacity pattern (see Tips) lives inside shadcn colors itself, rather than a separate collection.

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.

To flip the neutral tone, retint destructive, or recolor the charts, you don’t touch shadcn colors at all — instead, remap the values inside the theme collection. Everything in shadcn colors that references theme/* updates automatically.

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

Raw colors (source palette)#

raw tailwind colors is the source palette for everything above — 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 + theme, which keeps the system disciplined.

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:

  • theme is mapped to tw-raw/neutral for its neutral scale.
  • shadcn colors references theme for foreground/secondary/muted/border/destructive/chart tokens, and points directly at tw-raw for primary, accent, and background.
  • 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 palette (raw tailwind colors) — the source values.
  2. theme — pulls specific values from the raw palette to form the kit’s neutral tone, destructive color, and chart palette in one place.
  3. shadcn colors — the semantic tokens reference values from theme (and occasionally directly from raw tailwind 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.

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:

  • 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, --chart-1 through --chart-5, and the full --sidebar-* set.
  • theme — excluded from direct export. The plugin skips it because it’s meant to feed into shadcn colors through variable aliases — as long as a shadcn colors token ultimately resolves to a theme value, the plugin picks it up automatically when it resolves the alias chain. That’s also why the plugin needed no changes when theme took over neutrals, destructive, and chart colors in 2.0 — it was already resolving through shadcn colors, regardless of what feeds into it.
  • raw tailwind colors — not exported directly either. It’s a source palette; its values only end up in the output if a shadcn colors token references it.

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). Since alpha variants live inside shadcn colors itself, the plugin resolves them through the same alias chain as everything else.

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.
  • Customize inside shadcn colors and theme, then export. A typical workflow: remap theme (to switch the kit’s neutral tone, destructive color, or charts), 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 and retinting the theme collection.
  • Light and dark mode — how to switch between light and dark mode in Figma using variable modes.
  • Tips and references — variable usage tips, style availability, and alpha colors.
  • Legacy color docs — how the colors system worked in kit versions before 2.0.