One source of truth for your design system. Live for teammates, previews, exports, and the AI agents writing your components.

Create your design system See how →

PLATFORM

01 — Create

Every token in one place

Author colors, type, space and the rest in one place. Every change stays live: for export, your team, and the agents writing your components.

platform — acme-design-system
NameValuePreview
primary#4ED391
surface#1A1D22
ink#EDEFF4
muted#949AA6
success#7BC96F
danger#E5484D

css output — live

:root {
--color-primary: #4ED391;
--color-surface: #1A1D22;
--color-ink: #EDEFF4;
--color-muted: #949AA6;
--color-success: #7BC96F;
--color-danger: #E5484D;
}
copy css

02 — Share

Share your design system

One document reaches the whole team. Developers get CSS and JSON, designers get DTCG for Figma, and agents read tokens live over MCP.

With developers

Copy CSS custom properties or export a JSON theme object. Drop them into the stack you ship. No sync script, no stale file in the repo.

acme / tokens
/* tokens.css */
:root {
--color-primary: #4ED391;
--color-ink: #EDEFF4;
--radius-md: 8px;
--shadow-sm: 0 1px 2px;
}

With designers

Export DTCG and import it with a variables plugin. Designers and engineers stay on one document, not two hand-synced sources of truth.

Import variables

Token file

figma.tokens.json DTCG · 6 variables

Preview

  • color/primary#4ED391
  • color/ink#EDEFF4
  • color/surface#1A1D22
  • color/muted#949AA6
Import to this file

With agents

Point Cursor or Claude Code at your Platform server over MCP. Agents read the real tokens while they write components. Nothing to paste into a prompt.

Your tokens. Your team, your previews, your agents.

Create yours