Put your brand in a design system

A design system is where your brand lives in Kite: colours, type, sizes, radii and shadows as variables, skills that say how to use them, and a library of your logos and parts. Files are drawn with it, and agents read it before they draw.

1. Read your website

1. In your library's sidebar, choose Design systems.
2. Choose New → From a website.
3. Type your site's address, such as yourcompany.com, and choose Read the site.

Kite reads a few of your site's pages and looks at pictures of them, which takes a minute or two, then opens the new design system. Only colours and type the site really uses become variables: where it says nothing, nothing is made up. It also writes a skill on how your brand looks, and puts your logos, buttons, card and field in the system's library, so files and agents place the real logo.

2. Check the variables

1. On the Variables tab, look down the list. The variables sit in groups, such as color, font and radius.
2. Click a variable to open it on the right: its value, the code name your files use, and a line on what it is for.
3. Fix anything that is off: a colour that isn't quite yours, a heading font, a body size. Click the value and change it. Kite saves as you go and says Saved at the top.
4. Missing one? Choose New variable and pick its kind: Colour, Number, String or Boolean.

If your brand font isn't on Google Fonts, upload it once for the whole workspace in Settings → General → Fonts, or files will show a fallback.

3. Add your rules as skills

The Skills tab holds what a variable can't: layout, tone of voice, how buttons and cards should look. Kite has started one with what it saw on your site. Open it to check it, or choose + (New skill) for a rule set of your own. A skill's first line says what it is for, such as “For every screen.”, then the rules in plain sentences, for example:

• One primary button per screen, in the primary colour.
• Headlines short and in sentence case. No exclamation marks.
• Cards sit on the surface colour with the card radius and no border.

Agents follow the skills that fit what they were asked, so the clearer they are, the closer their first try.

4. Add a dark mode

1. Back on Variables, the column heads are the modes. A system read from a website starts with one, Default.
2. Click + (Add mode) at the end of the column heads. A new Mode 2 column appears, with the same values as the first.
3. Double-click Mode 2 and rename it Dark. Rename Default to Light the same way, if you like.
4. In the Dark column, change the colours that should differ: the background, the surface, the text and the border, at least. Leave the brand colours as they are unless they need to change.

5. Use it in a file

1. Open a file, or make one: in your library, click New at the top right and choose New file.
2. At the top of the left panel, click the Assets tab. The box at the top says which design system the file uses, None for now. Click it and choose yours.
3. On the toolbar at the bottom of the board, click Frame (the # grid) and drag on the board to draw a frame. Keep it selected. In the right panel, hover over the colour under Fill (choose + to add one if there is none) and click the variable button that appears (Apply variable). Choose your background colour. The fill now follows the variable: change it in the design system and the frame changes with it.
4. Click Text on the toolbar (the T), click inside the frame and type something. Set its colour the same way, to your text colour.
5. Select the frame. Under Variable modes in the right panel, set Theme to Dark. The frame and everything in it switch to the dark values.

Sizes, radii, gaps and padding take variables too: look for the same button in each field as you hover over it. Text, colour and effect styles are applied from the Styles button beside a section's heading.

6. Design with your agent

With the file open, ask your connected agent: “In my open Kite file, design a pricing section with three plans, using the file's design system.” It reads your variables and skills first, then draws with them, so its colours, type and radii are yours. Not connected yet? See Your first design with an agent.

Every file in the workspace can use the same design system, and agents can choose it for a new file they make.

Next

• Design systems: collections, styles, aliases, scopes, and exporting to CSS, Tailwind or DESIGN.md.
• Build a button component with your new colours.
• Fills, strokes and text.