Skip to main content
Design Mode is currently in alpha. Please contact us at support@kombai.com to get access.
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 guide. 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 guide from URL modal, paste the URL of the website.
  3. Click Extract style guide. Kombai will send a prompt to the agent to visit the site, analyze its visual identity, and save the extracted parameters as a Style Guide.

​
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. On the Style Guide card you want to edit, click the dropdown next to the Apply button.
  3. Select Edit from the menu.
  4. Modify the individual fields.
  5. 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. On the Style Guide card you want to duplicate, click the dropdown next to the Apply 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. On the Style Guide card you want to delete, click the dropdown next to the Apply button.
  3. Select Delete from the menu.