Create and maintain design tokens at a scale and speed like never before.
Systematically brings the full power of code with the ease of note taking while getting instant visual feedback all while Syncing to Figma and your Codebase.
TokenScript
Define rules, not values. Let generators create your scales, ramps, and variants.
Change one parameter — watch hundreds of tokens update.
Parametric scales
Define the rules, not the entries. Numbers and colors generated from parameters. Change one value, update the whole system.
Inheritance
Derive values from other values. Line height inherits from font size. Change the source, downstream follows.
Pipelines
Chain operations: generate → transform → round. Each step is visible. Nothing hidden. Logic you can read.
Iteration
Generate combinations with /forEach and /matrix. 3 sizes × 2 weights = 6 variants. One block, not six.
Strong typing
Scopes declare intent. A :fontSize can't accidentally become a :color. The system validates as you type.
Systematcically
Write, preview, and sync—all in one place. No local setup, no context switching.
Smart autocomplete
The editor knows TokenScript. Type a trigger, get contextual suggestions.
- Type
/— see available generators - Type
$— reference existing tokens - Type
:— set scopes and types
Live compilation
Compiles as you type. Errors inline. No build step, no waiting. See your tokens update in realtime.
Visual preview
See your system, not just data. Colors as swatches. Typography as rendered text. Spacing as scale bars.
- Table view — all tokens at a glance
- Visual view — scoped previews
- Code view — raw W3C output
What you'd expect. Done right
References, modes, and export. The fundamentals every token system needs, built into the language.
Smart references
$button.padding points to a real value. Change the source, everything downstream updates. Plus: $... syntax for relative references that traverse up the tree.
Modes as parameters
Desktop and mobile in one line. Not separate files. Not duplicated tokens. Just parameters: @[desktop, mobile].
Export everywhere
Sync to Figma Variables via plugin. Export to W3C design tokens for Style Dictionary, Tailwind, or any pipeline.
- Figma sync — push variables in one click or realtime. See what changed with visual diff.
- W3C tokens — standard JSON, works anywhere
- CSS variables — ready for the browser
- Swift — coming soon
- MCP — coming soon
Why a Tokens Specific language?
Code is explicit. Code is traceable. Code scales. A language lets you define intent, not just data.
Explicit intent
Scopes declare what a value means. :fontSize, :color, :spacing. The system knows how to preview it, export it, validate it.
Readable at scale
40 lines of expressive TokenScript, not 1000 lines of JSON. Structure is visible. Intent is clear.
Logic is traceable
No magic. Every transformation is a step you can read. Pipelines show the flow. References show the connections.
Intelligent docs
Auto-generated documentation from your spec and output. Coming soon.
Get started
Sign up and start building design tokens with a language-first approach — no invite needed.
Stay in the loop
Sign up for our newsletter to get development news, language updates, and new feature announcements.