Skip to main content
A Design System is a structured, file-based spec of a product’s visual language. Instead of managing separate color palettes, type scales, and freeform style notes, a Design System brings every layer of a visual identity together, from brand colors and typography down to spacing, elevation, grids, and usage guidelines, in a single artifact that Kombai can read, edit, and apply consistently across your designs and code. Kombai can generate a Design System from an existing codebase, a Figma file, a Design.md file, a design on your Canvas, or a live website. Every Design System is stored as a .ds file in your user-wide Kombai library at ~/.kombai/design-systems/, so it is available across all your projects. A .ds file placed anywhere inside a project is also discovered automatically. A .ds file is Markdown with a YAML front-matter block — the front matter holds the structured tokens, and the Markdown body holds the prose guidance.

​
Design System structure

A Design System has two layers: a YAML front matter block holding the structured tokens, and a Markdown body holding prose guidance organized into sections. The front matter holds the hard data: the color palette and its semantic roles (e.g. background.canvas, text.primary, border.focus), gradients, font families and text styles, spacing, radius, shadows and elevation levels, border widths and styles, opacity levels, motion durations and easings, breakpoints, component specs, asset patterns, icon glyphs, and motion patterns. The body is organized into the following sections. Click each to see what it covers.
How to apply the system when building UI — which token to reach for, usage and scarcity constraints, and the system’s voice.
Usage of each brand and accent color in the palette.
Usage of each surface and background color across pages, cards, and containers.
Usage of each text color — headings, body copy, secondary text, and links.
Usage of status, overlay, and semantic colors (success, warning, error, info) for badges, links, and highlights.
Font families and what each carries, type principles, and recommended substitutes.
Max content width, grid columns, gutters, and whitespace philosophy.
Per-component collapsing rules across breakpoints — nav, hero, grids, footer, and touch targets.
Radius-scale usage plus photography and illustration geometry.
The imagery and media narrative, including generation prompts for reusable assets.
Icon style and usage narrative; the icon glyphs themselves live in the front matter.
A one-line usage note per component covered by the Design System.
The motion narrative — signature transitions and any JS-, video-, or canvas-driven motion that can’t be expressed as CSS tokens.
Recommended practices for applying the Design System.
Anti-patterns to avoid, e.g. color pairings or spacing rules that break the system.
Distinctive, system-specific details: signature components, brand gradients, color-block patterns, and decorative depth.
Catch-all for actionable caveats, known gaps, and edge cases that don’t fit another section.

​
Design Systems page

The Design Systems page lets you browse, create, and manage systems in a two-column view. Select a Design System from the left sidebar to view its spec on the right. The sidebar includes two tabs:
  • Public design systems: A curated library of Design Systems extracted from popular, real-world products (e.g. Discord, Stripe, Nike).
  • My design systems: All the Design Systems you’ve created or imported.
Use the search box at the top of the sidebar to filter the active tab. On the Public design systems tab, click a tag chip to show only the systems with that tag, or click the arrow at the end of the chips to search all tags with Filter tags. Click All to clear the tag filter. If a public Design System has a source website, open the menu above its spec and select Open source site to visit it.

​
Open the Design Systems page

  1. Click the icon in the chat input to open the Design Systems popover.
  2. Click Manage at the bottom of the popover to open the Design Systems page. On the desktop app, you can also click the Design Systems button in the left sidebar to open the page.
On the IDE extension, if you have turned on Open canvas in browser in Kombai’s settings, the Design System page will open in the Kombai Browser.

​
View a Design System

Select a Design System from the left panel to open its spec on the right. The spec includes:
  • Header details: The system name and last updated timestamp(for your Design Systems).
  • Tokens and guidance: Style tokens and usage notes organized by category and displayed as cards.
To edit the underlying .ds Markdown source file, see Edit a Design System.