docs /tokens
Tokens

Tokens can only be created via the MCP at this time.

Using tokens—named values for color, spacing, typography, and more—to keep your Paper canvas and codebase consistent

Overview

Tokens

Tokens—also known as CSS variables—are values that make up a design system that you can apply across your Paper canvas and codebase. If you use Tailwind, Paper’s token system maps directly to how it works. Instead of hardcoding a hex value or a font size, you reference a token. When you update a token, everything using it updates automatically.

Color token picker in Paper showing named tokens like muted, faint, and white

Currently supported tokens

  • Color
  • Font family
  • Font weight
  • Font size
  • Line height
  • Letter spacing
  • Spacing
  • Container
  • Breakpoint
  • Radius

Roadmap

  • Create tokens directly in Paper
  • Group element styles together into reusable theme classes (e.g. an H1 that bundles font family, size, weight, line height, and letter spacing in one click)
  • Support multiple theme modes, such a “dark mode” or “compact”, so tokens will have a different value depending on the active theme mode

Guides

Add tokens

From a design

If you have an existing design on the canvas, you can have the agent generate tokens from it:

  1. Point the agent at a frame on your canvas
  2. Ask it to create tokens in Paper based on that design, specifying what to include (typography, color, spacing, radius, breakpoints, etc.)
  3. The agent will generate tokens in Paper

You’ll know it worked when you see the token UI appear in Paper when editing an element.

From a codebase

Many teams already have tokens in their codebase and want their designs to reflect that as the source of truth.

  1. Connect your codebase and point your agent to it
  2. Ask it to create tokens in Paper using your CSS variables in code
  3. The agent will generate tokens in Paper

Use tokens

In a file that has tokens, look for dropdown menus in the property panel and select a token from there.

Line height token picker in Paper

For color properties, you can also click the four-circle icon to open the drop down of available tokens.

Color token dropdown in Paper showing white, surface, track, border, and teal tokens

Detach tokens

When you detach a token, the property keeps its current value but is no longer linked to the token.

  • To detach a color token, click the detach button to the right of the color property.
  • To detach any other token, open the token dropdown and select the detach option, or click backspace.
Detach token button next to a color token in the Paper property panel

Update tokens

Currently only agents can update tokens, so you’ll need to ask the agent to update a token to a specific value. You can also have it pull a color directly from the canvas if you’ve done exploration there. The update reflects everywhere that token is used.

Copy and share tokens

We’re working on libraries, but for now you can copy a theme to share tokens between files or paste them into your codebase.

Between Paper files

  1. Click the Paper logo in the top left corner to open the file menu
  2. Select Theme > “Copy theme”
  3. Open your other file
  4. In the same menu, select “Paste theme”
Copy theme menu in Paper project settings

Tokens will be available in that file, but they will not update if changed in a different file.

Into your codebase

  1. Copy theme from the same menu
  2. Paste into your CSS theme file

Clear tokens

Your agent can remove specific tokens from your file. Just ask!

To remove all tokens:

  1. Click the Paper logo in the top left corner to open the file menu
  2. Select Theme > “Clear theme”