A theme bundles colors, typography, spacing, and border radius into one swappable system. Use themes to rebrand a project quickly, keep a consistent look across multiple projects, or test different visual directions without rebuilding. Apply a theme to a project and the whole design takes on its colors, fonts, layout rhythm, and rounding. Switch themes and the project updates to match.

Quick start. Open the Themes tab in the left panel, click New theme to create a project-scoped theme, then hover the new card and click the pencil icon to open the inline editor — adjust colors, fonts, spacing, and radius from there. The rest of this article explains what's inside a theme, how to set one up, and how to use themes across your projects.

A theme defines four things that flow through every page and element of a project:

Pick a different theme, and all four re-skin the project at once.

The color system uses an 11-shade scale per color, from lightest (50) to darkest (950), and is organized into two layers: a source palette of brand colors, and a small set of default colors that draw from them. (Under the hood the scales follow Tailwind's numbering, but you don't need to know Tailwind to use Themes.)

A token is a named slot — like Primary or Text — that points to a specific color. Anything in the project that references the token updates when the token's value changes.

Your brand colors are Primary, Secondary, Accent, and Neutral. These four colors define your identity. Each is a full 11-shade scale, generated automatically from a single hex.

You can also add Extras: additional scales for decorative use, like charts, illustrations, or accents that fall outside the core four. Extras are optional and live alongside your brand colors. Use them when you need them, but lean on the core four for anything that should adapt cleanly when you swap themes — extras don't always travel across themes, since a different theme may not include the same extra token.

In the editor, these appear in the Default colors section. Page, Text, Frames, and Border cover the structural parts of a design. They don't have colors of their own — each one points at a specific shade in your brand tokens. For example, you might set the Page background to Neutral 950 and the Text to Neutral 100.

To set these, click a row (Page, Text, Frames, or Border) in the Default colors section of the theme editor and pick a shade from any brand token's scale.

This keeps the structure of every design grounded in your brand, and it's what makes theme-swapping work: swap to a different theme and the default colors re-resolve to the new theme's brand tokens automatically.

These controls live inside the theme editor — see Editing a theme below for how to open one.

For each brand color, pick its main shade — by hex, color picker, or by selecting a chip in the shade strip. The rest of the 11-shade scale is generated from that main shade, so you don't need to fill in every step by hand.

The main color isn't fixed to a particular slot. Click any non-main chip in the strip and confirm Set as main in the popover; the scale re-ramps around the new anchor. Useful when your brand color naturally sits darker or lighter than the middle of a typical scale.

Toggle Custom on when you want to take over individual shades. In Custom mode the auto-generated scale collapses, leaving just the main shade — from there you build the scale up by hand. Empty slots show a + on hover so you can add a shade one at a time (the picker opens pre-filled with what the auto value would have been, as a starting point). Click a filled chip to edit it, and use Remove in the picker to clear a shade. Toggle Custom off to return to the full auto-generated scale.

Extras can be named. By default an extra inherits its base family name (for example, Sky) and updates automatically if you change the family. You can also set a custom name in the Name field on the row (for example, Sunset or Bramble); that name flows through token references wherever it's used.

Beyond color, a theme includes typography settings. You can:

When you switch themes, text styled with these defaults updates automatically to the new theme's settings.

A theme also defines spacing values that flow through your layout, including padding and gaps. The spacing scale is exposed in the editor's spacing controls (xs, s, m, l, xl, 2xl, 3xl) with descriptive labels — Extra small, Small, Medium, Large, Extra large, 2X large, 3X large — so you can pick from the theme's spacing scale rather than typing raw pixel values.

A theme also defines a border-radius scale — Small, Medium, and Large — that's available in the editor's radius controls. On top of that, the theme sets a default radius for frames, so every frame in the project picks up the theme's chosen rounding unless you override it on the element.

Switching themes updates these together: a theme with smaller radius values reduces rounding across the project; one with larger values increases it.

In a project, you apply tokens to elements rather than fixed values. For colors, pick a brand color like Primary instead of a raw hex; for text, pick a style like Heading 1 instead of typing font settings by hand. When you swap to a different theme, those tokens re-resolve to the new theme's settings automatically — a button set to Primary still uses Primary; an H1 still uses the H1 style. They render in the new theme's colors and fonts.

Open the Themes tab in the left panel. Themes are organized into two groups:

To apply a theme, click its card. To deselect, click the same card again. Use the search box at the top to filter by name.

Hover over a theme card and click the pencil icon — or open the card's overflow menu and choose Edit — to open it inline. Adjust title, brand colors, default colors, fonts, text styles (including H1–H6, Base, and link style — H4–H6 added via Add style), spacing, and radius from the same panel. Changes save automatically.

Click New theme to start from scratch. By default, new themes you create from inside a project are project-scoped — they only show up inside that project. Use project-scoped themes when you're experimenting or building a one-off look.

If a project theme turns out to be something the rest of the team should be able to use, open the overflow menu on the theme card and choose Share to account, then click Share to confirm. The theme moves into the shared account library and becomes available in every project.

The Themes page on your dashboard is where you manage the full library of account-wide themes. Project-scoped themes are filtered out here so they don't clutter the list.

From this page, you can:

You can mark one theme as the default for the account. Worth thinking through before you do:

To set it: on the dashboard Themes page, hover a theme card, open the overflow menu, and choose Set as default. The same menu lets you remove the default later.

Set featured is a separate, lighter option — featured themes get prominence in the picker but aren't auto-applied to new projects. Use default when you want every new project to inherit a specific theme automatically; use featured to suggest a theme without locking it in.

Themes is in beta, so if you hit something unexpected — or you have feedback on what's working and what isn't — let us know. We read every report and use it to prioritize fixes.