> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kombai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Themes

> A Theme is a structured design system that tells Kombai how to style your UI, covering everything from colors and typography to spacing, shadows, and border radius.

export const PaletteIcon = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{
    display: "inline"
  }} {...props}>
        <path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path>
        <circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle>
        <circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle>
        <circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle>
        <circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle>
      </svg>
    </div>;
};

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.

## When to use Themes

Use Themes when you need precise, token-level control over every aspect of your design system. Common scenarios include:

* You have an established design system with specific color tokens, type scales, spacing values, and border radii, and you want Kombai to generate designs that adhere to it exactly.
* You want to extract design tokens from an existing website or codebase and apply them consistently across all designs in a Canvas.
* You want changes to a token (e.g. updating your primary color) to propagate automatically to every design the Theme is applied to.
* You are working across multiple Canvases and need to bring a Theme from one Canvas into another to ensure cross-project consistency.

If you want a faster, lower-fidelity way to set a visual direction without managing individual tokens, use a [Style Guide](/design/design-system/style-guides) instead. If you want to reuse a specific UI structure or layout pattern, use a [Block](/design/design-system/blocks) instead.

## Theme vs Style Guide

Themes and Style Guides both shape the visual identity of your designs, but Themes give you a level of precision and consistency that Style Guides cannot. Use a Theme when your design system is defined and you need Kombai to adhere to it exactly.

|                           | Theme                                                                                                | Style Guide                                                                                   |
| ------------------------- | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| **Fidelity**              | Granular: every individual design token mapped explicitly                                            | High-level: seed color, palette, typography, radius, and freeform instructions                |
| **How it applies**        | Injected as structured token variables; token changes propagate automatically to all applied designs | Kombai regenerates the design to match the Style Guide's parameters                           |
| **Best for**              | Enforcing an existing design system precisely, or when token-level consistency is required           | Exploring visual directions, onboarding a new aesthetic, or aligning multiple designs quickly |
| **Freeform instructions** | No                                                                                                   | Yes — the Additional Instructions tab lets you pass prose guidelines to the LLM               |
| **Cross-Canvas reuse**    | Can be copied and applied across Canvases                                                            | Applied per Canvas                                                                            |

Use a Theme when your design system is settled and every token needs to be locked down. Use a Style Guide when you are still exploring or want a faster way to align the look and feel.

## Theme structure

A Theme is organized into the following groups of design tokens. Click each group to see the individual fields.

<AccordionGroup>
  <Accordion title="Theme name">
    A unique name to identify your Theme.
  </Accordion>

  <Accordion title="Fonts">
    The font families used across the Theme.
  </Accordion>

  <Accordion title="Typography">
    `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`
  </Accordion>

  <Accordion title="Primary Color">
    `primary` and `primary-hover`
  </Accordion>

  <Accordion title="Secondary Color">
    `secondary` and `accent`
  </Accordion>

  <Accordion title="Neutrals">
    `text-primary`, `text-secondary`, and `text-muted`
  </Accordion>

  <Accordion title="Errors">
    `success`, `warning`, and `error`
  </Accordion>

  <Accordion title="Backgrounds">
    `bg-page`, `bg-surface`, and `bg-surface-hover`
  </Accordion>

  <Accordion title="Borders">
    `border`, `border-hover`, `width-default`, and `width-thick`
  </Accordion>

  <Accordion title="Shadow">
    `sm`, `md`, and `lg`
  </Accordion>

  <Accordion title="Spacing & Radius">
    `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` for spacing and `sm`, `md`, `lg`, `xl`, and `full` for radius
  </Accordion>
</AccordionGroup>

## 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:

<AccordionGroup>
  <Accordion title="From a website">
    Use this when you want to replicate the visual style of an existing website.

    1. Click the <PaletteIcon /> 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 create a Theme.
  </Accordion>

  <Accordion title="From a design">
    Use this when you already have a design in the Canvas and want to extract a reusable Theme from it.

    1. Click the <PaletteIcon /> icon on the left toolbar to open the Themes sidebar on the right.
    2. Click the **+** icon.
    3. If you have already selected a design, you will see a **From the selected design** option. Select it for Kombai to extract the Theme from the selected design.
    4. If you haven't selected a design, click **Select design on canvas** option, then select a design and click **Create theme** button.
  </Accordion>
</AccordionGroup>

You can also ask Kombai to generate a Theme directly via chat. This is particularly useful when you want to generate a Theme from a Figma design or extract tokens from your own codebase.

## 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.

<AccordionGroup>
  <Accordion title="From the current Canvas">
    1. Click the <PaletteIcon /> icon on the left toolbar.
    2. Select the design you want to apply the Theme to.
    3. On the Theme card you want to use, click the **Apply to design** button.
  </Accordion>

  <Accordion title="From another Canvas">
    1. Click on the design you want to apply the Theme to.
    2. Click the <PaletteIcon /> 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.
  </Accordion>
</AccordionGroup>

## Edit a Theme

You can update the individual tokens of the Theme at any time from the Themes sidebar.

1. Click the <PaletteIcon /> icon on the left toolbar.
2. Click the **Edit** button on the Theme card you want to edit. If you haven't selected a design, click the <Icon icon="ellipsis" size={16} /> icon and select **Edit** from the menu.
3. Modify the individual tokens of the Theme.
4. 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 <PaletteIcon /> icon on the left toolbar.
2. Under the Theme card you want to detach, click the <Icon icon="ellipsis" size={16} /> icon.
3. Select **Detach from node** or **Detach from all** depending on your intent.

## Delete a Theme

<Warning>Deleting a Theme is permanent and cannot be undone.</Warning>

1. Click the <PaletteIcon /> icon on the left toolbar.
2. Under the Theme card you want to delete, click the <Icon icon="ellipsis" size={16} /> icon.
3. Select **Delete** from the menu.

## Attach Themes in chat

There are two ways to attach a Theme to the chat as context:

<AccordionGroup>
  <Accordion title="From the Design System popover">
    1. Switch to Design Mode from the modes dropdown in the chat input box.
    2. Click the <PaletteIcon /> icon in the chat input to open the **Design System** popover.
    3. Switch to the **Themes** tab.
    4. Select the Theme you want to attach to the chat as context.
  </Accordion>

  <Accordion title="Using the @ command">
    1. Type `@Themes` in the chat input.
    2. Select the Theme you want to attach.
    3. Type your prompt and send.
  </Accordion>
</AccordionGroup>