Your design decisions
drift the moment
they ship.

A color changes in Figma, someone retypes it in code, and the two quietly diverge — while a doc swears everything's in sync. Particles UI moves every token into one governed system: versioned, reviewed, accessibility-gated, and released to every codebase and AI agent.

01 — The problem

Ungoverned tokens fail quietly.

The handoff loses the thread

A value lives in Figma, gets retyped across three repos, and slowly diverges. “Which one is right?” becomes an investigation, not a lookup.

A style guide can’t say no

Your doc says AA. Nothing stops an inaccessible color pair from merging and shipping anyway. Rules that can’t be enforced aren’t rules.

Merges overwrite in silence

Two people edit the palette, last write wins, and a decision disappears — no diff, no trace, no one the wiser.

02 — The solution

Put every decision under version control.

All three failures share one fix: make tokens behave like source code. Branch, edit, and merge design decisions against a single source of truth — designers in Figma, developers in code, no retyping in between.

Attribute-level history is included. Every change carries who, when, and why, with an atomic revert — by default, from the first token you bring in.

Bring tokens in minutes

Pull Figma variables with the plugin, or drop a DTCG, Tokens Studio, CSS or TypeScript file — detected automatically, diffed before it lands.

Branch and edit safely

Make your changes feel native. Nothing touches main until it's merged — experiments stay experiments.

Review with blast radius

Every request shows the visual diff plus what it cascades to: tokens, usages, themes. No surprises after merge.

Pass the gate

Contrast below AA can't merge and can't publish. The same math runs in CI, so the rule holds everywhere.

Go to production

Publish a release and the paperwork does itself: signed webhook, regenerated files, a pull request in your repo. Byte-identical, every time.

03 — Why it holds

Governed tokens are smart tokens

Because every token lives in one system, it carries the context to enforce those rules for you — and unlocks features you'd normally build from scratch.

Impact analysis
Audit trail
Multi-brand themes
Release pinning
Contrast checks
Agent recipes

The Particles UI platform

See every dependency, instantly

Don’t wait for the incident. We track every alias and usage binding, so "where is this token used" is a lookup, not an investigation.

Publish immutable releases

A release is a snapshot with a version. Your CI pins it and gets the same bytes every run — as easy as depending on a package.

Sync Figma and code, both ways

Designers pull and push variables from the plugin. Developers sync from the CLI. Agents read over MCP. One record, no drift.

terminal
$ particles token-studio sync --wcag-level AA
release v1.2.0 · 248 tokens · 4 themes
contrast: 132/132 pairs ≥ AA
wrote src/styles/tokens.css (byte-identical)
 
$ particles token-studio push --file brand.json
dry-run +12 added · 3 updated · 0 removed
apply? (y/N) y
pushed to branch brand-refresh · request opened
 
$ git log --oneline -1
a41f2c9 chore(tokens): release v1.2.0 (#218)

Fits the stack you already have

Figma
Tailwind
GitHub
MCP
TS
TypeScript

SQL and spreadsheets not required. Or build your own — the CLI is MIT open-source and every export is DTCG-native, so your tokens are never held hostage.

04 — What you get

Fewer fire drills. A design system that ships itself.

Free where it counts, open where it matters

The first-class way in and out is MIT-licensed and works without an account — local token management and export, free forever. Governance is what you add when the team grows.

A system your whole org can trust

The best of a design system with the safety of infrastructure: review, gates, releases, and an audit trail your compliance team will actually thank you for.

Style Playground

New

Theme your design system. Watch it react.

A tweakcn-style editor on the left, a real Mail / Dashboard / Cards / Tokens preview on the right. Every change you make is reflected instantly across the canvas — no commit, no PR, no waiting on a build.

  • Live preview

    Mail, Dashboard, and Cards canvases update the instant you tweak a slot.

  • Pick or generate

    Alias any slot to an existing token, or run the type-scale and shadow wizards.

  • Dry-run save

    See every create, update, and conflict before you commit. Skip or override per slot.

particles · playground
dark*

Colors

primary
secondary
accent
background
foreground
destructive

Inbox

AllUnread

William Smith

Meeting tomorrow

workmeeting

Alice Smith

Re: Project update

3 unread

Plans & pricing

Free for one project, forever. Pay as you grow — and viewers are always free, so your whole org can consume governed tokens.

Free

for trying it properly
$0forever
  • 1 project · main branch · 3 free viewers
  • Unlimited tokens
  • All export formats — Tailwind v4, CSS, SCSS, TS, JS
  • Releases + version pinning
  • Figma pull, inspect & 1 theme
  • Dry-run import preview
  • CLI (all export formats)
Start for free

Pro

for solo builders
$19/ month · 1 seat
  • 5 projects · 5 branches
  • Unlimited themes + Figma variable modes
  • Custom types, sub-groups & tags
  • Token graph / DAG explorer
  • Commit history & atomic revert
  • Figma push + full in-plugin CRUD
  • 14-day free trial
Try 14 days — no card
MOST POPULAR

Team

the change pipeline
$29/ editor / month
  • Token requests · review · 3-way merge
  • WCAG release gate — Studio + CI (opt-in)
  • Webhooks → release-to-PR
  • MCP + agent recipes
  • Unlimited viewer seats — always free
  • Semantic (natural-language) token search
  • Design docs + scaffolded guidelines
Try 14 days — no card

Business

for multi-brand scale
$79/ editor / month
  • Multi-level: Foundation → Brand → Product
  • Pinned module releases + conflict review
  • Knowledge graph explorer
  • Granular per-project RBAC
  • Make Scalable — automated restructuring
  • 4-hour SLA · onboarding
  • Dedicated Slack channel
Try 14 days — no card

Viewers always free · Downgrades keep every token — features above the limit become read-only