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 Style Guide is a lightweight design system that captures the overall visual identity of a UI, covering seed color, palette, typography, corner radius, and design instructions. Unlike a Theme, a Style Guide focuses broadly on your design language rather than granular, token-level detail, making it a faster way to set a consistent look and feel across your Canvas. You can create a Style Guide manually, extract one from an existing design, or pull it from a live website. Once saved, a Style Guide can be applied to any design in your Canvas to regenerate its visual styling while keeping the layout and content intact.

​
When to use Style Guides

Use Style Guides when you want to define or experiment with a visual direction without committing to granular token-level detail. Common scenarios include:
  • You want to quickly give a set of designs a consistent look and feel (same palette, fonts, and corner radius) without manually specifying every token.
  • You are exploring different visual directions for a design and want to swap between color schemes or typographic pairings without rebuilding from scratch.
  • You want to extract the visual identity of an existing website or design and reapply it across your Canvas.
  • You want to pass high-level design guidelines (e.g. spacing philosophy, surface inversion rules) as freeform instructions to the LLM during generation.
If you need precise, token-level control over every aspect of your design system, use a Theme instead. If you want to reuse a specific UI structure or layout pattern, use a Block instead.

​
Style Guide vs Theme

Style Guides and Themes both influence how your designs look, but they operate at different levels of fidelity. Style Guides are the faster, more flexible option — they are best when you are still shaping a visual direction.
Style GuideTheme
FidelityHigh-level: seed color, palette, typography, radius, and freeform instructionsGranular: every individual design token mapped explicitly
How it appliesKombai regenerates the design to match the Style Guide’s parametersInjected as structured token variables into the design; changes propagate automatically
Best forExploring visual directions, onboarding a new aesthetic, or aligning multiple designs quicklyEnforcing an existing design system precisely, or when token-level consistency is required
Freeform instructionsYes — the Additional Instructions tab lets you pass prose guidelines to the LLMNo
Cross-Canvas reuseApplied per CanvasCan be copied and applied across Canvases
Use a Style Guide when speed and flexibility matter more than precision. Switch to a Theme once your design system is settled and you need every token locked down.

​
Style Guide structure

A Style Guide is organized into the following fields. Together, they define the personality of your UI, from the feel of individual components to the overall color story. A Style Guide has two tabs: Tokens and Additional Instructions. Tokens organizes your design values into collapsible sections:
  • Name: A unique name to identify your Style Guide.
  • Colors: The primary, secondary, tertiary, and neutral colors. Each token shows its name and hex value. You can add more color tokens using the + Add button.
  • Typography: Font and size settings for Headline, Body, and Label styles. Each entry includes a font family and a size value. You can add more typographic styles using the + Add button.
  • Spacing: Custom spacing tokens. Empty by default. Use + Add to define spacing values.
  • Radius: Border radius tokens (e.g. default: 8px). Use + Add to define additional radius values.
Additional Instructions contains:
  • Design Instructions: A freeform text area for design system guidelines passed directly to the LLM during design regeneration. The character count is shown at the bottom of the text area.

​
View a Style Guide

Clicking on a Style Guide card from the Design System page opens its detail view. The detail view shows you all the tokens and instructions that make up the Style Guide, and lets you edit them directly. The detail view has two tabs:
  • Tokens: Displays the design tokens organized into collapsible sections: Colors, Typography, Spacing, and Radius. Each color token shows a color swatch, its name, and its hex value. You can expand or collapse each section using the chevron, and add new tokens with the + Add button.
  • Additional Instructions: Displays the freeform design instructions text, along with a character count. Click the pencil icon next to the Additional Instructions heading to edit the text.
From the detail view you can also:
  • Click Use style guide to add the Style Guide to the chat as context.
  • Click Save to save any edits, or Discard changes to revert them.
  • Click the delete icon to permanently delete the Style Guide.

​
Apply a Style Guide

When you apply a Style Guide to a design, Kombai regenerates the selected design using the Style Guide’s parameters while preserving the original layout and content. This is useful when you want to explore a different visual direction for an existing design or align multiple designs to a shared Style Guide without rebuilding them from scratch.
  1. Click on the design you want to apply the Style Guide to.
  2. Click the icon on the left toolbar.
  3. Hover on the Style Guide card you want to use, click the Use style guide button. Kombai will send a prompt to the agent to regenerate the design using the selected Style Guide.

​
Add a Style Guide

There are three ways to add a Style Guide to your Canvas: build one from scratch, extract it from an existing design, or pull it from a live website. All three options are accessible from the + menu in the Style Guides sidebar.
Use this when you want full control over the Style Guide’s values, setting the palette, typography, and corner radius manually to match a specific design direction.
  1. Click the icon on the left toolbar, then click the + icon and select Create new.
  2. Enter a name, then configure the Tokens tab: set colors (including seed color and palette), typography, spacing, and radius values using the collapsible sections and + Add buttons. Switch to the Additional Instructions tab to add any freeform design guidelines.
  3. Click Save to save the Style Guide.
Use this when you already have a design in the Canvas and want to derive a Style Guide from its existing visual appearance. Kombai will analyze the design and extract its colors, typography, and radius settings automatically.
  1. Click the icon on the left toolbar, then click the + icon and select Import from design.
  2. Kombai will prompt you to select a design. Click on the design you want to extract the Style Guide from.
  3. Click Extract style. Kombai will send a prompt to the agent to analyze the design and extract its visual identity. The resulting Style Guide will appear in the My Style Guides tab of the Style Guides sidebar.
Use this when you want to replicate the visual style of an existing website. Kombai visits the URL, analyzes its visual identity, and saves the extracted Style Guide.
  1. Click the icon on the left toolbar, then click the + icon and select Import from URL.
  2. In the Extract style from URL modal, paste the URL of the website.
  3. Click Extract style. Kombai will prompt the agent to create a Style Guide from the site.

​
Edit a Style Guide

You can update any field of a saved Style Guide at any time. There are two ways to edit a Style Guide:
  1. Click the icon on the left toolbar to open the Style Guides sidebar.
  2. Hover over the Style Guide card you want to edit and click the Edit button. If you have selected a design on the Canvas, you will see the Apply button instead. In that case, click the dropdown next to the Apply button and select Edit from the menu.
  3. Modify the individual fields.
  4. Click Save to apply the changes.
  1. Open the Design System page from the Canvas Gallery.
  2. Ensure the Style Guides tab is selected.
  3. Click on the Style Guide card you want to edit to open its detail view.
  4. In the Tokens tab, expand the Colors, Typography, Spacing, or Radius sections and edit the individual token values. Use + Add to add new tokens.
  5. Switch to the Additional Instructions tab and click the pencil icon to edit the freeform design instructions.
  6. Click Save to apply the changes, or Discard changes to revert.

​
Duplicate a Style Guide

Duplicating a Style Guide creates an exact copy of it in your Canvas, which you can then edit independently.
  1. Click the icon on the left toolbar.
  2. Hover over the Style Guide card you want to duplicate, click the dropdown next to the Apply/Edit button.
  3. Select Duplicate from the menu.

​
Delete a Style Guide

Deleting a Style Guide removes it permanently and cannot be undone.
  1. Click the icon on the left toolbar.
  2. Hover over the Style Guide card you want to delete, click the dropdown next to the Apply/Edit button.
  3. Select Delete from the menu.

​
Attach Style Guides in chat

There are two ways to attach a Style Guide 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 Style Guides tab.
  4. Select the Style Guide you want to attach to the chat as context.
  1. Type @Style Guide in the chat input.
  2. Select the Style Guide you want to attach.
  3. Type your prompt and send.