Themes is currently in beta, so you may run into the occasional bug or rough edge as you work with it. The feature is rolled out to accounts on the Organization plan — if you'd like access, reach out to your account admin or our support team.
A theme bundles colors, typography, and spacing into one swappable system. Apply a theme to a project, and the whole design takes on its colors, fonts, and layout rhythm. Switch themes and everything updates automatically — no manual re-styling.
This article walks through what's inside a theme, how to set one up, and how to use themes across your projects.
What's in a theme
A theme defines three things that flow through every page and element of a project:
Colors — your brand palette, the structural colors of the design (page background, text, frames, borders), and any optional decorative colors.
Typography — the fonts available in the project and the default styles for headings, body text, and links.
Spacing — a set of named spacing values (xs through 3xl) that drive padding, gaps, and the overall rhythm of your layouts.
Pick a different theme, and all three re-skin the project at once.
How the color system works
The color system is built on Tailwind's color scales — eleven shades per scale, numbered 50 through 950 — and organized around two ideas: a source palette of brand tokens, and a small set of structural colors that draw from it.
Brand tokens (the foundation)
Your brand tokens are Primary, Secondary, Accent, and Neutral. These four colors define your identity. Each is a full Tailwind scale, so you get 11 shades to work with per token — generated automatically from a single hex.
You can also add Extras: additional Tailwind scales for decorative use, like charts, illustrations, or accents that fall outside the core four. Extras are optional and live alongside your brand tokens. 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.
Structural colors (drawn from brand)
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.
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 structural colors re-resolve to the new theme's brand tokens automatically.
Setting up colors
Setup is hex-driven. For each brand token, enter a hex code (or use the color picker), and the system automatically maps your hex to the closest Tailwind scale. Structural colors then point into those scales at specific shades.
This means you can paste any hex and the system handles the scale generation for you. You don't need to know Tailwind scale names to set up a theme.
Typography
Beyond color, a theme includes typography settings. You can:
Upload a custom font (or use a Google or Typekit font) to make available throughout the theme.
Set default text styles for headings (h1–h6), body, and links — including font size, weight, line height, letter spacing, and color.
Configure per-breakpoint overrides, so for example your h1 can scale down on mobile.
When you switch themes, text styled with these defaults updates automatically to the new theme's settings.
Spacing
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), so authors can pick from the theme's rhythm rather than typing in raw pixel values.
This keeps spacing consistent across designs that use the same theme — and lets you redefine the rhythm of a layout just by switching themes.
Using a theme in a project
In a project, you apply tokens to elements rather than fixed values. For example, you'd set a button's background to your Primary brand token instead of a specific hex. When you swap to a different theme, those tokens re-resolve to the new theme's settings automatically. Your primary stays primary, your headings stay headings — they just render in the new theme's colors and styles.
Where to find themes in a project
Open the Themes tab in the left panel. Themes are organized into two groups:
This project — themes that only exist inside the current project. Useful for one-offs or testing different looks.
Account — the shared collection of themes available to every project on the account.
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.
Editing a theme
Hover over a theme card and click the pencil icon to open it inline. You can adjust title, brand colors, structural defaults, fonts, text styles, spacing, and link style — all in the same panel. Changes save automatically.
Create a new theme
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. This is handy when you're experimenting or building a one-off look.
Sharing a project theme with the account
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. The theme moves into the shared account library and becomes available in every project.
Project-theme cards have an overflow menu with Edit, Share to account, and Delete. Account-theme cards only support selection — to edit them, head to the dedicated themes page (see below).
Managing the shared theme collection
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 browse, edit, and delete the themes that are shared across your account.
Setting a default theme
You can set a theme as the default on an account. Worth thinking through before you do:
Every new project on the account will inherit the default theme automatically from the moment it's created.
Existing projects aren't affected. They keep whatever theme (or no theme) they already have.
This is powerful for teams that want every new project to start on-brand. But because it changes the starting point for every future project, it's worth aligning with your team before locking it in.
Tips
Stick to brand and structural tokens for anything that should adapt cleanly when you swap themes. Extras are great for one-off decoration, but won't always carry over.
Set hex codes once, get scales for free. You don't need to think in Tailwind shades — pick the colors you want and the system fills in the rest.
Project themes are great for experimentation. Use them as a sandbox, then promote to the account when you've landed on something the team should reuse.
Need help?
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. Your input directly shapes where the feature goes next.