# Make a brand kit with AI, and design in it

> Give vDesign your website, guidelines or design tokens and it makes a brand, with your colours, type, logo, rules and voice. Then every design an agent makes uses it, and one step switches a design to another brand.

The prompt:

> Make a brand for Lantern Café from these guidelines, and use it on the menu. Then make Harbour Coffee from its guidelines and switch the menu to it.

## How it was made

The agent gave vDesign the two cafés' guidelines as text, one colour to a line. vDesign's code,
not the model, read the exact values and proposed which colour plays which role, marking each
guess for review. The agent added what code cannot know: who the brand is, how it speaks, the
words it never uses, and the rules a design is held to. Then it linked the menu to Lantern
Café, which turned every colour on the menu into a role, and switched it to Harbour Coffee.

The switch changed six lines, the role values, and nothing else:

```vd
$primary = #1F7A8C
$background = #F2F6F7
$text = #13294B
$on-primary = #F2F6F7
$surface = #D9E6EA
$muted = #50617A
```

Every heading, rule and panel already said `fill=primary` or `fill=surface`, so they all
followed. The café's name is copy, not brand, so that one line was retyped.

## A brand is a file too

A brand is a `.vd` document of its own kind, readable by people and by any model. Here is
Harbour Coffee's:

```vd
version 5
kind brand
title "Harbour Coffee"
brand harbour-coffee@1
  summary "A bright seaside coffee bar."

$foam = #F2F6F7
$deep = #13294B
$sea = #1F7A8C
$mist = #D9E6EA
$slate = #50617A

role primary light=sea
role background light=foam
role text light=deep
role on-primary light=foam
role surface light=mist
role muted light=slate

rule reads must "Text reads at 4.5:1 on the background" check=contrast fg=text bg=background min=4.5
rule no-gradients must "No gradients" check=no-gradient

guide voice
  "Breezy, short and friendly."
  banned "artisanal"
  banned "curated"
```

## What it does for every design after

- **Designs start on brand.** An assistant reads the brand's short brief first and names roles,
  `fill=primary`, rather than writing colours out.
- **Drift is caught.** A colour the brand does not have, text that fails its contrast rule, or
  a banned word shows up in the design's problems, with the nearest role to use instead.
- **Switching is one step.** "Re-skin this deck in Harbour Coffee" swaps the roles, fonts and
  logo, and it is one undo.
- **It travels.** A design keeps a copy of its brand, so it opens on any machine, and an update
  to the brand is offered, never applied without asking.
- **It exports.** As design tokens (DTCG) for developers, and as a Markdown brief for any
  model.

[Download vDesign for Mac or Windows](https://getv.design/#download) and make a brand from your website, or ask
your assistant over [MCP](https://getv.design/mcp) to make one from your guidelines.

## Questions

### What can a brand be made from?

Your website's address, the text of your brand guidelines or a guidelines PDF, design tokens (DTCG or Tokens Studio), a stylesheet or a Tailwind v4 theme, a PowerPoint theme, an image's palette, or an existing vDesign design.

### What does a brand hold?

Its palette, the roles each colour plays (background, text, primary and the rest), in light and dark, its fonts, its logos for light and dark grounds and its favicons, the rules a design is checked against, such as contrast, and how it speaks, with words it never uses.

### Where are brands kept?

A brand you save is kept in your vDesign account, so the desktop app has it on every computer you sign in to, and so do the assistants you connect to the desktop app. Your designs themselves stay on your computer, and each one keeps a copy of the brand it uses, so it still opens anywhere.

### Can I make a brand in the web app?

Not yet. Brands are made in the desktop app, or by an assistant connected over MCP. Designs that use a brand open and draw everywhere.