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.

​
Style Guide structure

A Style Guide is organized into a small set of high-level design decisions. Together, these fields define the personality of your UI, from the feel of individual components to the overall color story.
  • Name: A unique name to identify your Style Guide.
  • Seed Color: A single base color that Kombai uses to derive the rest of the palette.
  • Palette: The four primary, secondary, tertiary, and neutral colors.
  • Typography: The headline, body, and label fonts.
  • Corner Radius: The border radius of elements - None, Sm, Md, or Lg.
  • Design Instructions: A freeform text area for design system guidelines passed directly to the agent during regeneration.

​
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 Apply 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, set a seed color, configure the palette (optional), typography, corner radius, and design instructions to your preference.
  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.
  1. Click the icon on the left toolbar.
  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.

​
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

  1. Type @Style Guide in the chat input.
  2. Select the Style Guide you want to attach.
  3. Type your prompt and send.
Kombai has a collection of pre-defined Style Guides that you can access from the Style Gallery. You can copy them in My Style Guides to edit or use them in your own designs.
  1. Click the icon on the left toolbar, then switch to Gallery tab.
  2. Click on a Style Guide card to check its seed color, palette, typography, corner radius, and design instructions.
  1. Click the icon on the left toolbar, then switch to Gallery tab.
  2. Hover over the Style Guide card you want to use and click the dropdown next to the View button.
  3. Click Copy to My styles.
  4. Switch to My styles tab.
  5. Select the design you want to apply the Style Guide to.
  6. Hover over the newly added Style Guide card and click the Apply Style Guide button.
  1. Click the icon on the left toolbar, then switch to Gallery tab.
  2. Hover over the Style Guide card you want to use and click the dropdown next to the View button.
  3. Click Copy to My styles.
  4. Switch to My styles tab.
  5. Click the Style Guide card that you just copied.
  6. Modify the individual fields and click Save.
  1. Click the icon on the left toolbar, then switch to Gallery tab.
  2. Hover over the Style Guide card you want to use and click the dropdown next to the View button.
  3. Click Use style guide to add the style guide to the chat input.
  4. Type your prompt and send the message.