Skip to main content
Design mode is currently in alpha. Please contact us at support@kombai.com to get access.
A style 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 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 manually, extract one from an existing design, or pull it from a live website. Once saved, a style can be applied to any design in your canvas to regenerate its visual styling while keeping the layout and content intact.

​
Style structure

A style 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.
  • 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

When you apply a style to a design, Kombai regenerates the selected design using the style’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 without rebuilding them from scratch.
  1. Click on the design you want to apply the style to.
  2. Click the icon on the left toolbar.
  3. Hover on the style card you want to use, click the Apply Style button. Kombai will send a prompt to the agent to regenerate the design using the selected style.

​
Add a style

There are three ways to add a style 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 Styles sidebar.
Use this when you want full control over the style’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.
Use this when you already have a design in the canvas and want to derive a style 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 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 will appear in the My Styles tab of the Styles 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 send a prompt to the agent to visit the site, analyze its visual identity, and save the extracted parameters as a style.

​
Edit a style

You can update any field of a saved style at any time.
  1. Click the icon on the left toolbar.
  2. On the style 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

Duplicating a style 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 card you want to duplicate, click the dropdown next to the Apply button.
  3. Select Duplicate from the menu.

​
Delete a style

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