Studio

The Particles Studio is the web app where designers create, edit, and manage design tokens — your single source of truth for every visual decision in your design system.

What the Studio does

The Studio brings your entire design token workflow into one place: author tokens, organise them by type and tier, create themes, review branch changes, and publish releases. Everything you do here automatically syncs to the Figma plugin and the CLI.

Projects

A project is your design system — a collection of tokens, themes, and branches. When you create a project, Particles seeds sixteen built-in token types (Colour, Typography, Spacing, Radii, Shadow, Opacity, Border, Duration, Z-index, Elevation, Grid, Motion, Line Height, Letter Spacing, Font Weight, Breakpoint) and a main branch.

If you already have tokens in another tool, upload a file at creation time — Tokens Studio JSON, W3C Design Tokens, Particles JSON, or CSV — and your project is seeded with them immediately. Default example tokens are skipped so you start with a clean slate.

Projects belong to an organisation. Invite team members with roles (Admin, Designer, Developer) to control who can edit tokens and who has read-only access.

Token editor

The token editor is the main workspace. The left panel shows your token tree organised by type and sub-group, with a three-way segmented control at the top to filter by tier (Primitive / Semantic / Composition). Click any token to open the detail form on the right.

PanelWhat you see
Token treeAll tokens grouped by type and sub-group. Click to expand, search to filter, drag to reorder.
Tier toggleSwitch between Primitive, Semantic, and Composition views.
Detail formEdit name, value, group, description, and tags. Semantic tokens show a reference picker filtered to the same type.

When creating a semantic token, the reference picker only shows tokens of the same type. A colour token can only reference other colour tokens — this prevents nonsensical aliases.

Releases

A release is an immutable, versioned snapshot of all tokens on a branch — tagged with a semver number (e.g. 1.2.0). Think of it as a published edition of your design system.

Creating a release freezes every token value at that point in time. Team members can pull a specific release in the Figma plugin to QA past versions, and developers can reference a release version in the CLI:

Only Admins and Designers can publish releases. Developers can list and pull releases but cannot create them.

Import & export

Bring tokens in from other tools or export them for your build pipeline:

FormatDirectionDescription
Tokens Studio JSONImportMigrate from Tokens Studio without losing work.
W3C Design TokensImportOnboard from the W3C Community Group format.
Particles JSONImportRe-import a previous export — tier, aliases, and tags are preserved per token.
CSVImportBulk-import from a flat key–value sheet.
Tailwind v4 CSSExportReady-to-use @theme CSS variables.
CSS custom propertiesExportFlat custom property declarations.
SCSSExportSass variables and maps.
Style DictionaryExportNested JSON for Style Dictionary pipelines.
W3C JSONExportStandard W3C Design Tokens format.

Import shows a dry-run diff before committing — see exactly which tokens would be added, overwritten, or skipped, then confirm with Apply. For non-Particles formats, a tier selector lets you assign all incoming tokens to Primitive, Semantic, or Composition in one step. Particles JSON imports skip this step because tier is embedded in the file.

You can also import a file when creating a project. Upload your token file in the Create Project dialog and Particles seeds your first branch immediately — no need to create the project first and import separately.

Contrast checking

Tag any two colour tokens as a foreground/background pair in the token detail form. Particles automatically computes the WCAG contrast ratio and displays AA/AAA pass/fail badges. Failing pairs show the nearest compliant alternatives.

The organisation-wide Accessibility Dashboard aggregates all failing pairs across every project so you can track compliance at a glance.

Docs tab

Every token supports an optional description (markdown) and tags. The Docs tab renders all tokens with their descriptions as a living style guide, auto-grouped by type. Org admins can pin important tokens to surface them at the top of the tree.

Tags and descriptions are included in all export formats and CLI sync output, so developers see usage guidance directly in their codebase.

Permissions

RoleWhat you can do in the Studio
AdminManage members and billing. Approve, reject, and merge token requests. Publish releases.
DesignerCreate, edit, and delete tokens, branches, and themes. Open and comment on token requests. Publish releases.
DeveloperView tokens, branches, and releases. Pull via CLI. Cannot edit tokens or approve requests.