Skip to main content

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.

Design Mode is currently in beta. For feedback, please contact us at support@kombai.com.
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. 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.
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
primary and primary-hover
secondary and accent
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 create a Theme.
Use this when you already have a design in the Canvas and want to extract a reusable Theme from it.
  1. Click the 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.
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.
  1. Click the 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 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. Click the Edit button on the Theme card you want to edit. If you haven’t selected a design, click the 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 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.

​
Attach Themes in chat

  1. Type @Themes in the chat input.
  2. Select the Theme you want to attach.
  3. Type your prompt and send.