Skip to main content
Your theme defines design tokens for your project. Design tokens are reusable values for colors, typography, borders, corners, and shadows. Each project contains its own theme used to generate a custom Tailwind CSS configuration.

​
Navigating the theme page

Open Theme under Project in the left sidebar, or press Cmd + K and search “Theme”. Expand the Theme tab to jump to any section (Colors, Typography, Corners, Shadows, Borders). A toolbar at the top of the theme page holds Import and a ⋯ menu with New theme, Rename theme, Version history, Export theme, Reset theme, and Add dark mode / Add light mode. When dark mode is enabled, the menu shows Remove dark mode / Remove light mode instead. See Dark mode for details. All changes save automatically and apply immediately across your project. See also: Importing tokens, Exporting theme, Adding custom fonts

​
Adding themes

Add more themes to a project to try a different look, like a rebrand, without changing your default theme. Multiple themes are available on Pro and Custom plans.
  1. Click + next to the theme tabs at the top of the theme page, or click ⋯ and select New theme
  2. Edit the new theme’s tokens. It starts as a copy of your default theme.
Click a tab to switch which theme you’re editing. To rename a theme, click ⋯ and select Rename theme. To delete the theme you’re editing, select Delete current theme. You can’t delete the default theme, and Reset theme deletes every theme except the default. On the Free plan, adding a theme asks an Admin to upgrade to Pro. Teams that move to Free keep the themes they have.

​
Finding token usage

Right-click any color, typography, border, corner, or shadow token and select Show token usage to see every design that references it. Search the list, click a design to preview it, then click Go to component to jump into the editor. Check usage before renaming or deleting a token so you know what your changes will affect.

​
Edit theme with the agent

The theme page's Colors section with agent chat docked on the right, its composer showing the Theme context chip
Use agent chat to update your theme from a prompt:
  1. Press Cmd + / to open agent chat
  2. Describe your changes: “warmer tones, rounder corners”, “make it brutalist”, or “retro theme with muted colors and bold typography”
  3. Send the prompt. The agent updates colors, typography, corners, and shadows
The agent can also rename or delete tokens when the changes call for it. All component references update automatically.
Theme changes affect your entire project. To undo them, restore an earlier theme from version history.

​
Colors

Subframe organizes colors into color tokens grouped by folders.
Colors section with a color token's context menu open on Move to folder, listing folders such as Secondary, Primary, and Text
Color tokens define individual colors for your design system. They can be used for specific UI purposes like Brand Primary, Default Background, or Neutral Border. Tokens can reference other tokens as aliases (e.g. Brand Primary → Brand 700). Folders group related color tokens together. Organize tokens however you want — by brand, by feature, by shade scale, or any grouping that fits your system. A default Colors folder holds standalone tokens. To quickly add tokens from an existing design system, see Importing tokens.

​
Creating color tokens and folders

New color token:
  1. Click New color in the Colors section header, click a folder’s … menu and select New color token, or click the + button at the end of a folder’s token row
  2. Name your token descriptively: accent-primary, surface-elevated
  3. Set color via picker or reference existing token
New folder:
  1. Click New folder in the Colors section header
  2. Rename your folder by clicking its name
  3. Add tokens manually or via import
Reordering: Drag folders or tokens to reorder. Use the … menu on a folder to move it up or down.
Deleting a folder deletes all tokens inside it. Any component references to deleted tokens are detached.

​
Editing color tokens

Click any token to open color picker. Set a direct color value or reference another token as an alias.

​
Typography

Text tokens define typography styles with font family, size, weight, line height, and letter spacing.
Typography section of the theme page with a text token's popover open, showing its font, size, line height, weight, and letter spacing

​
Creating text tokens

  1. Click New text style in the Typography section
  2. Rename and adjust properties
New tokens duplicate the properties from the first token. Typography tokens auto-sort based on font size on the theme page.

​
Editing text tokens

Click any text token to edit:
  • Font size — Slider in pixels
  • Line height — Slider in pixels
  • Font weight — Slider based on font’s supported weights
  • Letter spacing — Slider from -0.1em to 0.1em

​
Changing font families

Click the font name card at the top to select a different font family. This updates all tokens using that font. Choose from a curated list of Google Fonts or custom uploaded fonts. When dark mode is enabled, the font family card shows separate Light and Dark selectors so you can pair different fonts per mode.

​
Adding custom fonts

Upload WOFF, WOFF2, TTF, or OTF font files, with support for variable fonts. For detailed upload steps and codebase installation, see Adding custom fonts.

​
Borders

Border tokens define composite border styles consisting of color, width, and style.
Borders section of the theme page showing editing a border token
When generating code, border styles turn into explicit values for the border:

​
Creating border tokens

  1. Click New border in the Borders section
  2. Rename and adjust style, size, color

​
Editing border tokens

Click any border token to edit:
  • Border style — Solid or dashed
  • Border size — Pixel width
  • Border color — Color token reference or direct value

​
Corners

Corner tokens define border radius values for consistent rounded corners.
Corners section of the theme page with the Lg corner token's popover open, showing its radius

​
Creating corner tokens

  1. Click New corner in the Corners section
  2. Set radius value
Corner tokens auto-sort based on value.

​
Editing corner tokens

Click any corner token to edit radius value in pixels.

​
Shadows

Shadow tokens define box shadows with multiple layers for depth and elevation.
Shadows section of the theme page with the Lg shadow token's popover open, showing a drop shadow layer's offset, blur, spread, and color

​
Creating shadow tokens

  1. Click New shadow in the Shadows section
  2. Add, remove, or edit shadow layers
Shadow tokens auto-sort based on perceived shadow effect.

​
Editing shadow tokens

Click any shadow token to edit individual shadow layers. Each layer has:
  • Inset — Whether shadow appears inside element
  • X/Y offset — Horizontal and vertical offset in pixels
  • Blur radius — Blur amount in pixels
  • Spread radius — Spread amount in pixels
  • Color — Shadow color with opacity
Add multiple layers for complex shadow effects.

​
Resetting your theme

Reset your theme to start over from an empty one:
  1. Click ⋯ in the toolbar and select Reset theme…
  2. Click Reset to confirm
Resetting deletes every token and removes dark mode. Designs that use a token keep the value it had in your default theme.
You can’t undo a reset. To get your tokens back, restore an earlier theme from version history.

​
Version history

View and restore previous versions of your theme:
  1. Click ⋯ in the toolbar and select Version history
  2. Browse the timeline and select a version to preview
  3. Click Restore to revert to that version
Select Exit version history from the same menu to return to editing.

​
Limitations

Spacing not configurable — Spacing tokens (padding, gaps) use Tailwind defaults. Extend your Tailwind config manually for custom spacing in your codebase.
Last modified on October 20, 2026