Define rules. Get the system.
Systematically is a rule-based design token IDE and authoring tool. Write token logic once, preview it as you work, then sync to Figma Variables and export CSS variables or W3C Design Tokens. No prior coding skills required.
Author the system behind your design tokens.
Every token in a real system is connected to something else. A spacing value depends on a base. A semantic color references a primitive. A component token inherits from a surface. Manage those connections by hand and they break. TokenScript captures the logic and intent so the connections hold — at any scale, across every output.
Parametric scales
Your spacing, type, and color — generated from a ratio, not typed by hand. /numberScale and /colorScale take a base value, a ratio, and a step count. Change one number and the whole scale rebuilds.
Color operations
Generate perceptual OKLCH ramps with /colorScale, build harmonious palettes with /colorHarmony, and blend any two colors into tints, shades, or midpoints with /colorMix. Contrast-safe foregrounds are derived from the logic — not chosen manually.
Modes
/modes expresses light, dark, brand, density, and breakpoint dimensions as first-class dimensions of your system. Every token adapts. No duplicate files, no manual overrides.
References & inheritance
$references let any token point to another — change the source, everything downstream follows. /inherit extends an entire section with selective overrides, so brand remixes and surface variants stay connected to the original.
Iteration
/forEach and /matrix expand a single rule across all sizes, states, components, and variants simultaneously. What would take hours to maintain by hand is generated in a single block.
Logic
/if and /else let your system generate different values based on mode, context, or any condition you define. The logic lives in the source — not scattered across exports and overrides.
Transforms & pipeline
/transform applies math to every generated value. /roundTo snaps to your grid. /override corrects specific steps. Chain them together and the output lands exactly where your system needs it.
Type-scoped tokens
Annotate a token with : fontSize, : color, : gap, or any scope — and Systematically knows exactly where it belongs. The same declaration drives Figma variable scopes, W3C $type, and CSS property mapping. No manual wiring per export format.
Systematically brings you all the leverage of code. None of the overhead.
Design token work is iterative and detailed. The workspace is built to match — it guides you as you write, reflects every change instantly, and keeps everything organised and saved. You don't have to remember everything. The workspace meets you where you are.
Live editor
The editor knows what you're writing. Slash commands, color pickers, variable selectors, and inline feedback — everything you need is one keystroke away. No context-switching, no external tools.
Three-way preview
Three views of the same token set — rendered preview, structured table, and generated code output. Switch between them as you work, or keep them all open at once.
AI assistance
Describe what you need in plain language. The AI writes the token rules, generates scales, and explains anything that isn't clear.
Cloud workspace
Your token files are always saved and accessible. No local setup, no lost work.
File organisation
Projects, files, and token sets — structured the way design systems actually work. Keep everything in one place, find anything instantly.
One-click export
Export to CSS, W3C Design Tokens, or sync to Figma directly from where you're working. No pipeline to configure, no build step to trigger.
One source for Figma and code.
Design and code drift apart because they live in separate files, updated separately. TokenScript is the source both sides compile from — one change propagates to CSS, W3C Design Tokens, and Figma Variables simultaneously. The gap closes because it was never there to begin with. No config files, no build pipeline — just your source and the outputs.
CSS variables
Browser-ready custom properties. Modes translate automatically to the right CSS mechanism — dark mode compiles to @media (prefers-color-scheme), fluid spacing to clamp(), container-responsive tokens to @container. You declare the intent; the compiler picks the strategy.
W3C Design Tokens
Standards-compliant W3C Design Tokens Format (2025.10). References become aliases, types are inferred from scopes — no manual $type needed. Multi-mode output follows the W3C Resolver spec with a tokens.resolver.json for downstream tooling.
Figma Variables
Syncs to Figma via the Systematically Bridge plugin. Token sets become collections, modes become variable modes, typography composites become Text Styles. Scope annotations control exactly where variables appear in Figma.
A plan for every stage of the work.
Free gives you the full authoring experience for one public design system. Plus is for private files, unlimited room in one project, and higher usage limits.
Free
Try the tool with one public design system.
$0 / mo
1 project
3 files
10 token sets per file
2 modes per set
Export to CSS, W3C JSON, Figma
10 exports per week
50 AI credits / month
Plus
Private room for one serious design system.
$13.33 / mo
$160 billed annually
Coming soon
2 projects
25 files
100 token sets per file
10 modes per set
Export to CSS, W3C JSON, Figma
50 exports per week
300 AI credits / month
Pro
Coming soon for multi-brand composition.
$26.67 / mo
$320 billed annually
Coming soon
10 projects
100 files
Unlimited token sets
Unlimited modes
Export to CSS, W3C JSON, JS, Tailwind
Unlimited exports
600 AI credits / month
Team
Coming later for shared projects and permissions.
TBD
Coming soon
Unlimited projects
Unlimited files
Unlimited token sets
Unlimited modes
Export to CSS, W3C JSON, JS, Tailwind, CLI
Unlimited exports
900 AI credits / month
Start authoring token systems, not token lists.
Create a free account, open the editor, and build your first rule-based token system.
Follow along
New features ship regularly. Subscribe for language updates, release notes, and early access to what's next.