Skip to main content
Design mode is currently in alpha. Please contact us at support@kombai.com to get access.
A theme is a structured design system that tells Kombai how to style UI, covering everything from colors and typography to spacing, shadows, and border radius. Kombai can extract a theme directly from an existing website or a design, and you can edit individual values to update the theme. You can also apply your saved themes from the current canvas or from other canvases directly to a generated design.

​
Theme structure

A theme is organized into the following groups of design tokens. Click each group to see the individual fields.
A unique name to identify your theme.
The font families used across the theme.
primary and primary-hover
secondary and accent
family-heading, family-body, size-xs, size-sm, size-base, size-lg, size-xl, size-2xl, size-3xl, size-4xl, size-5xl, weight-normal, weight-medium, weight-semibold, and weight-bold
text-primary, text-secondary, and text-muted
success, warning, and error
bg-page, bg-surface, and bg-surface-hover
border, border-hover, width-default, and width-thick
sm, md, and lg
xs, sm, md, lg, xl, 2xl, 3xl for spacing and sm, md, lg, xl, and full for radius

​
Generate a theme

Kombai lets you extract a theme from an existing website or a canvas design. It pulls real design tokens like colors, fonts, spacing, and more—and maps them to the theme structure automatically. There are two ways to generate a theme:
Use this when you want to replicate the visual style of an existing website.
  1. Click the icon on the left toolbar to open the Themes sidebar on the right.
  2. Click the + icon and select From website.
  3. In the Create a new theme modal, paste the URL of the website you want to extract the theme from.
  4. Click the Create Theme button. Kombai will extract the design tokens from the website and populate the theme.
Use this when you already have a design in the canvas and want to derive a reusable theme from it.
  1. Select the design you want to extract the theme from.
  2. Click the icon on the left toolbar to open the Themes sidebar on the right.
  3. Click the + icon and select From design.
  4. Click the From the selected design button. Kombai will send a prompt to the agent to extract and save the theme from the selected design.

​
Preview a theme

You can preview a design with any applied theme across mobile, tablet, and desktop screen sizes. See Preview in the Canvas docs for the full walkthrough.

​
Apply a theme

Themes are applied to designs individually. You can apply a theme from the current canvas or bring one in from another canvas.
  1. Click on the design you want to apply the theme to.
  2. Click the icon on the left toolbar.
  3. On the theme card you want to use, click the Apply the node button.
  1. Click on the design you want to apply the theme to.
  2. Click the icon on the left toolbar.
  3. In the Themes sidebar on the right, switch to the Other files tab.
  4. Browse and click on the theme card you want to use.
  5. Click the Copy & Apply button to send the theme to the agent and apply it to the selected design. This will also copy the theme into the current canvas. Alternatively, click the Copy to current file button to copy the theme into the current canvas without applying it to the selected design.

​
Edit a theme

You can update the individual tokens of the theme at any time from the Themes sidebar.
  1. Click the icon on the left toolbar.
  2. Under the theme card you want to edit, click the icon.
  3. Select Edit from the menu.
  4. Modify the individual fields.
  5. Click Update to apply the changes.

​
Detach a theme

When you detach a theme from a design, Kombai removes the theme’s association from that design. The design reverts to its earlier styling and is no longer linked to the theme. There are two detach options available from the theme card menu:
  • Detach from node: Removes the theme from the currently selected design.
  • Detach from all: Removes the theme from every design it is applied to across the canvas.
To detach:
  1. Click the icon on the left toolbar.
  2. Under the theme card you want to detach, click the icon.
  3. Select Detach from node or Detach from all depending on your intent.

​
Delete a theme

Deleting a theme is permanent and cannot be undone.
  1. Click the icon on the left toolbar.
  2. Under the theme card you want to delete, click the icon.
  3. Select Delete from the menu.