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.

Multi-level

New

Foundation, brand, product — layered

Split your system into shared modules: a foundation of primitives, brands that layer themes on top, and products that consume both. One foundation powers many brands; override anything downstream without touching the source. Or keep it simple — every project can stay standalone.

Make Scalable

New

From flat values to a real system

Inherited a pile of hard-coded colors with no structure? Make Scalable extracts a clean primitive foundation and re-points your semantic tokens onto it — in place, so names and ids stay put and nothing breaks. It keeps the primitives you already have, so your brand vocabulary stays yours. Review every change, then apply — or undo it in one click.

Tokenize Design

New

A Figma file with no variables? Fix it in one pass.

Got a design where every colour, spacing, and radius is a raw value — or just an image palette to work from? Tokenize Design scans the page (or your selection), names everything into a clean primitive + semantic set, creates the Figma variables, and rebinds every matching node — rendered values untouched. Read a colour scale straight from an image, preview exactly what will change, then apply. The variables land in your project and sync back in a click.

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.

Component Graph

New

See every token your components use

Select any Figma component and analyze it — Particles walks the layer tree, maps each bound variable back to its token, and shows what's tokenized versus hardcoded. Untokenized values surface as gaps; composites trace to the atoms they're built from. A Studio coverage view turns it into a design-system health score you can actually move.

Semantic Search

New

Find a token by intent, not by name

Search "a calm background for cards" and get ranked matches — powered by embeddings over every token's name and description. No more hunting through a list for the right variable. The right token surfaces the moment you describe what you mean.

Living Docs

New

Guidelines that can't go stale

Write standards, branding rules, and usage guidelines as block-based pages. Embed live token chips and tables, colour scales, component anatomy diagrams, binding tables, WCAG contrast checks, do/don't panels, theme previews, and Figma / Storybook / iframe embeds inline — all resolved against your current branch at render time. When a referenced token changes, a freshness engine flags the doc automatically.

Knowledge Graph

New

Explore everything connected

An interactive graph of every doc, token, component, theme, and contrast check — and the relationships between them. Authored links are solid; derived bindings are dashed. Trace why a token exists, which components depend on it, and which guidelines reference it, all from one canvas.

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
✓Semver releases & release notes
✓All export formats (Tailwind v4, CSS, SCSS, TS, JS…)
✓Dry-run import preview
✓Figma pull, inspect & themes
✓Role-based access (Admin / Designer / Developer)
✓CLI (all export formats)

Pro

$19/ month

For individuals shipping multi-brand design systems with custom types, unlimited themes 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 & atomic revert
✓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.