Design Tokens Export

01 — What are design tokens

Named decisions, not named colors

A design token is a named value that represents a design decision. Color: background = #F5DBC1. Not "beige". Not "hex-1". A decision with a name.

Tokens are platform-agnostic. They do not care if you ship to web, iOS, Android, or Figma. The token is the source of truth. The platform gets a translation.

Paletter generates tokens with semantic role names. Background, ink, accent, support, neutral. Decisions that survive a rebrand.

02 — The format

Standard JSON structure

Paletter exports the W3C Design Tokens Community Group format. Every tool in the ecosystem reads it:

{
  "color": {
    "background": { "value": "#F5DBC1", "type": "color" },
    "ink": { "value": "#583819", "type": "color" },
    "accent": { "value": "#FC6911", "type": "color" },
    "support": { "value": "#9A7658", "type": "color" },
    "neutral": { "value": "#D9B89D", "type": "color" }
  }
}

Five tokens. Typed values. Nested under a color group. Clean, predictable, parseable by anything that reads JSON.

03 — Works everywhere

One source, every tool

Style Dictionary

Amazon's open-source token transformer. Feed it your tokens, get CSS, SCSS, iOS, Android, Flutter output. One input, every platform.

Tokens Studio

The Figma plugin that bridges design and code. Import Paletter tokens directly. Sync changes bidirectionally.

Figma Variables

Figma's native variable system understands the token structure. Import once, reference everywhere in your design files.

Custom pipelines

It is JSON. Parse it with any language. Build your own transforms. Integrate with your CI/CD pipeline. No vendor lock-in.

04 — Part of the system

One palette, every format

Design tokens are one export from the same palette that also generates CSS custom properties, Tailwind v4 @theme blocks, SCSS variables, and COLORS.md for AI tools.

Change once, export everywhere. Your Figma tokens, your CSS variables, your Tailwind classes, and your AI context all derive from the same five colors. Zero drift.

Export design tokens

Generate a palette. Download your tokens. Feed them to everything.

Start generating