Design systems

What a design system holds

• Variables: single values with a name, such as a colour, a size or a font. A variable can have a different value in each mode, such as Light and Dark.
• Styles: a look kept once and applied to layers: a text style, a colour, a shadow or a layout grid.
• Skills: what a variable can't hold, in plain words: how the brand looks, how posts are made, what never to do.
• A library, if you like: the brand's logos and parts, as components every file using the system can place.

A file uses one design system at a time. Change a value in the system and every file that uses it is redrawn with the new value at once. Agents read the system and the skills that fit what they were asked before they draw, so what they make uses your colours and type instead of their own guesses.

The Design systems page

Open Design systems from your library's sidebar. Each card shows the system's leading colours, its name, how many variables and styles it has, and how many files use it. Click a card to open the system.

Every workspace has its own design systems. Owners and editors of the workspace can create and change them; people who can only view see them but can't change anything. Changes save as you make them; the top of the page says Saving… and then Saved.

Create one

On the Design systems page, choose New. There are five ways to start:

The new system opens straight away, ready to change.

From a frame

Already have a design you like? In the editor, right-click a frame and choose Make a design system from this frame. Kite reads exactly the colours, type, radii, shadows and spacing the frame uses, makes a design system of them in your workspace, and sets the file to use it. A message says how many variables it made.

Collections and modes

Variables live in collections, listed down the left of the Variables tab. A collection keeps related variables together, for example colours in one and spacing in another. Click New collection to add one; its menu has Rename and Delete collection. Deleting a collection deletes its variables too.

Each collection has one or more modes, shown as columns in the table. Modes let one variable hold several values: Light and Dark, or Compact and Comfortable.

• Add mode (the + at the end of the table's header) adds a column.
• A mode's menu has Rename, Duplicate (a copy that starts with that mode's values), Make default and Delete mode.
• The first mode is the default: it is what a frame uses unless you pick another.

Variables

Open a collection and choose New variable. A variable is one of four types:

• Colour: fills, strokes, text colour, shadow colour.
• Number: sizes, gaps, padding, radii, opacity, font sizes and weights.
• String: words, such as a font family or a value like clamp(…).
• Boolean: true or false, such as whether a layer shows.

Type in Find a variable to search names, code names and values.

Groups

A slash in a variable's name makes a group: color/text/primary sits in the group text, inside color. Groups show in the left panel and as headings in the table. A group's menu has Rename group and Delete group. To move several variables at once, tick them and choose Move to group… in the bar that appears.

Values and aliases

Click a variable to see its Value (or Values, one per mode) in the panel on the right. A value can also point at another variable: Use another variable makes it an alias, so it always shows that variable's value. Detach alias turns it back into a value of its own.

Renaming or deleting a variable never breaks a file: layers that used it keep the value it gave them. The same goes for anything that was an alias to it.

Name, code and where it shows

• Name: what people see in pickers, slashes included.
• Code: the name it has in code, used as var(--name). Click a code in the table to copy it.
• Unit, for numbers: px, %, em, rem, or none (for a weight or a line height such as 1.5).
• A short note on what it is for, which pickers show when you point at it.
• Offered for: the fields it is offered in, such as Corner radius, Gap and padding or Text fill. Everything offers it everywhere its type fits.
• Hide from pickers: keeps it out of the lists in the editor. Useful for raw values that only other variables should point at.

Styles

The Styles tab lists the system's styles by kind. Choose New style and pick one:

• Text: font, weight, italic, size, line height, letter spacing and case.
• Effect: a shadow, a layer blur or a background blur.
• Colour: one colour.
• Grid: a frame's layout grid.

Each part of a style can be a value or point at a variable, so a text style can use your font and size variables.

Skills

A skill is something agents should know: the brand's look, a guardrail, how a kind of design is made here. Each has a name and its instructions, and the first line says what it is for, such as “For Instagram and LinkedIn posts.” Agents see every skill's name and first line, and follow the ones that fit what they were asked, so a skill for posts is left out of a product screen.

• On a design system's page, open the Skills tab. Choose + (New skill), give it a name and write its instructions. Short lists of rules work best, for example “One primary action per screen, in var(--primary).”
• Import reads skills from .md files, such as a Claude SKILL.md or a Cursor rule. Each skill's Download as .md button saves it as one.
• A file can add skills of its own: in the editor, open Local variables from the Assets tab and choose Skills. The design system's skills are listed under them, From its name, to read; Change it there opens the system.

You can also ask your agent to add or change a skill: it keeps what you tell it.

Its library

A design system can have a library: a file holding the brand's logos and components. A system read from a website gets one with the site's logos, buttons, card and field. For any other, choose Make a library under Library in the right panel of the system's page; Open library opens it.

Every file using the system lists its library first in Assets, under the system's name, so you and your agents place the real logo. Colours, type and skills change in every file as soon as you save; components change once the library is published and each file updates them. See Components.

Switch a file to another design system and Kite offers to Swap the parts placed from the old system's library for the new one's of the same name, keeping their words. What has no match stays as it is.

Use it in a file

Choose a file's system

In the editor, open the Assets tab. The menu at its top names the file's design system, or None. Click it to choose another of your workspace's systems, to remove it with None, or to open the Design systems page with Manage design systems…. Only people in the file's workspace who can edit it can change this.

The Local variables button beside it opens a dock under the board with the same Variables, Styles and Skills tabs, and the file's Library. Changes made there change the design system itself, for every file that uses it. Open page takes you to the system's own page. A file without a design system offers Create a design system under Variables; its skills and library tabs work all the same.

Apply a variable

Fields that can take a variable (sizes, gaps, padding, radius, opacity, colours and text settings) show a small variable button when you hover them: Apply variable. Click it to pick from the variables that fit that field, grouped as in the system. With many, a search box appears at the top.

• A field tied to a variable shows the variable's name instead of a number.
• Detach variable unties it and keeps the value it had.
• Create variable…, at the foot of the list, makes a new variable from the field's current value. Name it and press Enter; if the system has several collections, choose which one.

Apply a style

The Text, Fill, Effects and Layout grid sections have a four-dot Styles button in their heading. Click it to apply one of the system's styles of that kind, or choose Create style… to save the layer's current look as a new one. An applied style shows at the top of the section with Detach style beside it.

Modes on frames

When a collection has more than one mode, a selected frame shows Variable modes in the inspector, with a menu for each such collection. Pick a mode and the frame, and everything in it, is drawn with that mode's values: put a Light and a Dark copy of a screen side by side. Auto follows the frame around it, or the default mode.

Export

On a design system's page, Export takes it out of Kite for your code or another tool:

Duplicate and delete

The More menu at the top right of a design system's page has Duplicate, which makes a copy named “(copy)” and opens it, and Delete.

Deleting a design system doesn't change how your files look. Before it goes, every value it gave a file is written onto that file's layers, so they keep their colours and type. They no longer follow a system until you choose another one. Its library, if it has one, is archived with it. If a file can't be kept as it looks, Kite says so and nothing is deleted.

Limits

• 2,000 variables and 500 styles in a design system.
• 20 collections, and 20 modes in each collection.
• A note on a variable or style: 200 characters. Up to 30 skills, each up to 20,000 characters.

Your own fonts

Fonts that aren't on Google Fonts, such as your brand's own, are uploaded once for the whole workspace under Settings → General → Fonts. A design system can then name them, and every file in the workspace can use them. See Workspaces and people.