Design Systems & Token Tooling

The designer-facing half of design systems — token authoring, sync, and documentation. The developer-facing color / theming side is in Color & Theming (Style Dictionary, culori, Tokenami, W3C tokens). For component primitives, see UI Components.

Token authoring in design tools

★ Penpot's native design tokens — Penpot ships W3C-spec design tokens natively (no plugin) with import/export and Style Dictionary–compatible JSON. The cleanest pure-OSS token authoring path in 2026.
★ Tokens Studio (Figma plugin, formerly Figma Tokens) — the dominant Figma-side token authoring tool. Free tier covers most teams; paid Pro for sync features. Closed source.
Variables in Figma — built into Figma; works fine for color / number / boolean tokens; weaker for typography composites. Free tier sufficient.
Specify (Variabl) — closed source, paid; design-tool-to-codebase token pipeline.
Knapsack — closed source, paid; full design-system platform.

Sync / pipeline (design ↔ code)

★ Style Dictionary (Amazon) — the de facto JSON-tokens-to-code transformer. See Color & Theming.
Terrazzo (formerly Cobalt) — modern Style Dictionary alternative with W3C-spec tokens, plugin ecosystem, and a watcher dev mode.
Tokenami — atomic CSS via tokens. See Color & Theming.
Supernova (free tier) — closed source; design-system platform with Figma sync and code export. Free tier covers a single design system.

Documentation sites for systems

★ Storybook — see UI Components. The default for documenting components.
Zeroheight (free tier) — closed source; pretty design-system docs that pull from Figma. Free tier limits pages.
Backlight — closed source, paid; full design-system workspace.
Custom Fumadocs / Nextra / Astro Starlight site — see Documentation. Often the right answer for engineer-led systems.

Component / pattern libraries (designer-side)

See UI Kits.

Token formats / standards

★ W3C Design Tokens Community Group format — JSON spec; stable enough to build on in 2026. Penpot, Tokens Studio, Style Dictionary, and Terrazzo all speak it.
DTCG $type / $value — the canonical shape; pick this over older token formats.

Pick this if…

Pure OSS, single source of truth: Penpot tokens + Style Dictionary or Terrazzo.
Already on Figma: Tokens Studio + Style Dictionary.
Pretty docs site without engineering effort: Zeroheight free tier.
Engineer-led system: Storybook + Style Dictionary, skip the design-tool plugins.
Modern Style-Dictionary alternative: Terrazzo.