Now in public beta — we'd love your feedback

Design token platform

Design systems that
ship at startup speed.

The fastest way to create, version, and sync design tokens across your entire team. Studio, Figma, and code — unified. Branches, reviews, themes, and releases designed for how you actually work.

Get started free See how it works →

particles / acme-ds / main

color

spacing

typography

radius

shadow

elevation

primary

oklch(0.62 0.19 261)

background

oklch(0.09 0 0)

foreground

oklch(0.98 0 0)

border

rgba(226, 226, 226, 0.12)

muted

oklch(0.12 0 0)

card

oklch(0.11 0 0)

ring

oklch(0.35 0 0)

Token

color / primary

Type

color

Tier

primitive

Raw

oklch(0.62 0.19 261)

Scope

All fills

AA PASSAAA PASS

Why designers love Particles

Everything you need to ship a design system your team will love

Studio

Ship tokens, not spreadsheets

Ditch the Google Sheet and Figma chaos. Create, edit, and browse tokens in a purpose-built editor — colour swatches, spacing scales, typography bundles. Pick a primitive or reference a semantic alias in one click.

Branching

Experiment without fear

Branch your token set like you branch code. Iterate safely, then open a review request with live colour swatches. Your team sees exactly what changed before anything touches production.

Themes

One token set, infinite brands

Dark mode, Brand A, Brand B, white-label — each theme overrides only what differs. Everything else inherits automatically. Switch themes in a click. Add a new brand in minutes, not days.

Playground

New

See your theme before you ship it

Tweak primary, body, radius, and shadows in a side panel and watch a real Mail, Dashboard, and Cards preview update live. Pick from existing tokens, rename slots into your own vocabulary, or generate a full type scale with one wizard. Dry-run every write — never break a token you didn't mean to.

Color Wizard

New

A full palette from one hex.

Type a hex, pick an algorithm — OKLCH, HSL, tint-shade, alpha-blend, or curve-anchored — and watch a complete Tailwind shade scale appear in real time. Compare methods side by side. Save all eleven shades as primitive tokens in one click. No spreadsheet. No guesswork.

Text Wizard

New

A type scale in seconds.

Pick a base size and a modular ratio — minor third, perfect fourth, golden — and a full typography scale materialises with live previews. Tune line-height and tracking per step. Save the whole scale as composition tokens, ready for headings, body, and caption.

Shadow Wizard

New

Elevation, properly layered.

Build single multi-layer shadows or an entire elevation scale from xs to 2xl. Reference a color token for the shadow tint so dark mode and rebrands cascade automatically. Live previews on light and dark surfaces, side by side.

Animation Wizard

New

Motion that feels alive.

Generate durations, easings, and ready-made compositions with real-time previews — duration bars filling at true speed, easing dots tracing their curves. Replay any animation in one click. Ship motion tokens your team can actually feel before they commit.

Figma sync

Figma ↔ Studio. Two-way. Live.

Push tokens to Figma as native Variables and Text Styles. Pull edits back to the platform. Each token carries a scope — restrict a colour to fills only, or a spacing token to gap only — so variables snap to exactly the right Figma properties.

Accessibility

Ship accessible, ship confident

Tag foreground/background pairs and get instant WCAG AA/AAA grades. Failing pairs surface the nearest compliant alternative. Accessibility isn't an afterthought — it's built in.

Releases

Freeze time. Ship trust.

Publish a semver-tagged snapshot of your tokens. Designers QA a specific release in Figma. Developers pin to it in CI. Roll back fearlessly — every release is immutable.

The workflow

From concept to shipped — in three steps

Build your token set in minutes

Open the Studio, choose a type — colour, spacing, typography — and set a value. Primitives hold raw values. Semantic tokens alias other tokens. Everything updates live, so you see the impact instantly.

# Primitive — raw value
color/neutral-900  →  oklch(0.09 0 0)

# Semantic — references a primitive
color/background   →  {color.neutral-900}

# Composition — bundles properties
typography/heading-1
  fontFamily  →  {font.sans}
  fontSize    →  48px
  fontWeight  →  700
  lineHeight  →  56px

Branch, review, and ship together

Create a branch and experiment freely. When it's ready, open a token request — your team sees a pixel-perfect diff with live colour swatches. Approve, reject, or comment. Merge when it's right.

Branch: rebrand-violet  →  main

  + color/primary    oklch(0.55 0.21 290)
  ~ color/background oklch(0.12 0 0)
  ~ color/foreground  oklch(0.95 0 0)

  3 tokens changed
  ✓ Approved by @sarah
  ✓ Merged into main

Publish once. Sync everywhere.

Publish a semver release. Designers pull it into Figma as native variables. Developers sync it via CLI. Themes override only what differs — dark mode, sub-brands, white-label, all from one source.

Release v1.2.0 published
  47 tokens  ·  3 themes  ·  2 branches

  Figma plugin  →  ✓ Pulled v1.2.0
                   ✓ 12 TextStyles created
  CLI sync      →  ✓ tokens.css written
  Theme "Dark"  →  ✓ 15 overrides applied

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

Pricing

Simple, transparent pricing

Start free. Paid plans include a 14-day trial with no credit card. Upgrade when your team is ready.

Free

$0forever

For solo designers exploring token-based design systems.

Get started free

✓1 project · 1 editor · 3 free viewers
✓Unlimited tokens
✓Three-tier model (16 built-in types)
✓Main branch only
✓1 theme per project
✓JSON export & dry-run import
✓Figma pull, inspect & themes
✓Role-based access (Admin / Designer / Developer)
✓Open-source CLI (JSON export)

Pro

$19/ month

For individuals shipping multi-brand design systems with full export and Figma sync.

Start free trial

✓5 projects · 1 editor · unlimited free viewers
✓5 branches per project
✓Custom types, sub-groups & tags
✓Unlimited themes & Figma variable modes
✓Token graph / DAG explorer
✓Commit history, semver releases & revert
✓All export formats (Tailwind v4, CSS, SCSS…)
✓Figma push + full in-plugin CRUD
✓14-day free trial
✓72-hour email support SLA

Your design system deserves better than a spreadsheet.

Ship faster, fight less, and keep every surface in sync — from Figma to production. Start free, no credit card needed.

Create free account See Studio docs →

Design systems thatship at startup speed.