---
title: Paper
description: Put your brand's tokens and components into a Paper file with an agent that has both Paper's MCP server and your brand's.
---

> Source: https://www.heyarchetype.com/docs/agents/paper

[Paper](https://paper.design) is a design tool whose canvas is HTML and CSS. Its MCP server lets an agent read and write the file you have open. Give one agent Paper's server and your brand's, and it can put your tokens into a Paper file as Paper tokens and draw your components on the canvas, bound to those tokens.

There is nothing to connect between Archetype and Paper. Paper's MCP server runs inside the Paper Desktop app on your own computer, so the agent does the work. That means it has to be an agent that runs on your computer too: Claude Code, Cursor, Codex, the Claude desktop app, or another local MCP client. ChatGPT on the web, v0 and Lovable can't reach Paper.

## Set it up

Open **Settings → Integrations** and click **Set up** on the Paper card. Pick your agent and follow its four steps.

:::steps
### Open Paper Desktop
[Download it](https://paper.design/downloads) if you don't have it, and open the file you want the brand in. Paper's agent tools only work while the app is open with a file loaded.

### Add Paper to your agent
Each agent adds it differently. The drawer shows the right command for the one you picked.

### Add your brand to the same agent
This is the step from [Connect an agent](/docs/agents/connect). Skip it if your brand is already there.

### Ask for it
Paste the prompt from the drawer. It asks for the tokens first, then for the components you name.
:::

For Claude Code, Paper's plugin installs with:

```bash title="Terminal"
claude plugin marketplace add paper-design/agent-plugins
claude plugin install paper-desktop@paper
```

## What the agent does

Two reads from your brand do the work, both with `format` set to `paper`:

| Call | What comes back |
| --- | --- |
| `get_brand {"domain": "tokens", "format": "paper"}` | Your tokens as entries for Paper's `create_tokens`: colors, radius, spacing, font families, and each text style's size, weight, line height and letter spacing. Shadows and gradients come back as plain values, because Paper has no token type for them. |
| `get_brand {"domain": "components", "handle": "button", "format": "paper"}` | The component's examples, as they always come, with the rules for writing them into Paper. |

Each token keeps the name your components already use, such as `--color-brand-blue-500` or `--radius-md`. When the agent draws a component with its `var(--…)` references kept, Paper binds each one to the token of the same name. Change the token in Paper and the component follows.

Paper keeps inline styles only: it drops class names and style sheets, and has no grid or margin. So the agent restates each example's CSS as inline styles, turns a grid into rows and columns with gaps, and draws `::before` and `::after` as real layers. Hover and other states are separate examples in Archetype, so it draws the ones you ask for.

## Good to know

- **Paper's free plan allows 100 MCP calls a week**, and drawing one example takes several. That's why the prompt asks which components you want rather than drawing every one. Paper Pro allows far more.
- **Paper has no modes yet.** Tokens go in as your default mode's values. Ask the agent for another mode and it reads them with `mode` set, such as `dark`.
- **Fonts.** Paper sets type in Google Fonts and in fonts installed on your computer. If your brand uses its own uploaded font, the agent gives you the files to install.
- **Artifacts don't run in Paper.** Where a component holds one of your [artifacts](/docs/brand/artifacts), the agent leaves its box empty and tells you.
- **It's a copy.** Tokens in Paper don't follow later changes in Archetype. Ask the agent again to bring them up to date.
- **Bring it back.** Copy layers or tokens in Paper and press ⌘V in Archetype. See [From Paper](/docs/import/paper).
- **Check the result.** The agent can read what it drew back as code with Paper's `get_jsx` and pass it to `check_against_brand`.