> ## 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.

# Manage a Design System

export const PaletteIcon = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{
    display: "inline"
  }} {...props}>
        <path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path>
        <circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle>
        <circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle>
        <circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle>
        <circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle>
      </svg>
    </div>;
};

Once a Design System is created, you can edit its tokens, apply it to designs, attach it to the chat as context, or delete it.

## Edit a Design System

You edit a Design System by editing its underlying `.ds` file — Markdown with a YAML front-matter block — directly from its detail page.

1. Open the Design System's detail page and click **Edit**.
2. The source editor opens alongside a live preview, so you can edit any token or prose section directly and see the result.
3. Click **Save** to apply the changes, or **Cancel** to discard them.

## Apply a Design System

Applying a Design System regenerates the selected design using its tokens, while preserving the original layout and content.

1. Select the design on the Canvas you want to apply the Design System to.
2. Right-click the selection to open the context menu. Under the **Design System** section, open the **Apply** submenu.
3. Select the Design System you want. Kombai sends a prompt to the agent to regenerate the selected design using the Design System's tokens.

<Note>The [Design System Gallery](./overview#design-system-gallery) is where you browse and manage your systems — applying a system to a design is done from the Canvas context menu above.</Note>

## Attach a Design System in chat

To attach a Design System to the chat as context:

1. Switch to Design Mode from the modes dropdown in the chat input box.
2. Click the <PaletteIcon /> icon in the chat input to open the **Design System** popover.
3. Select the Design System you want to attach to the chat as context.

## Delete a Design System

<Warning>Deleting a Design System is permanent and cannot be undone.</Warning>

1. Open the [Design System Gallery](./overview#design-system-gallery) and switch to the **My design systems** tab.
2. On the row or card for the Design System you want to delete, open the <Icon icon="ellipsis" size={16} /> menu.
3. Select **Delete**.
