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.
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 instead. If you want to reuse a specific UI structure or layout pattern, use a Block 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.
ThemeStyle Guide
FidelityGranular: every individual design token mapped explicitlyHigh-level: seed color, palette, typography, radius, and freeform instructions
How it appliesInjected as structured token variables; token changes propagate automatically to all applied designsKombai regenerates the design to match the Style Guide’s parameters
Best forEnforcing an existing design system precisely, or when token-level consistency is requiredExploring visual directions, onboarding a new aesthetic, or aligning multiple designs quickly
Freeform instructionsNoYes — the Additional Instructions tab lets you pass prose guidelines to the LLM
Cross-Canvas reuseCan be copied and applied across CanvasesApplied 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.
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 to design 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

There are two ways to attach a Theme to the chat as context:
  1. Switch to Design Mode from the modes dropdown in the chat input box.
  2. Click the 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.
  1. Type @Themes in the chat input.
  2. Select the Theme you want to attach.
  3. Type your prompt and send.