Design Tokens

Tokens evolve from static values (colors, spacing) to behavioral ones: motion curves, layout logic, and adaptive personalization rules. Enables AI agents to generate UI within system constraints — the infrastructure layer that keeps generative design on-brand.

Semantic design variables replacing hardcoded values across design systems. Enables multi-brand scalability and bridges the gap between design intent and implementation.

Open-source CLI that reads a live site's rendered design system and exports linked DTCG tokens, CSS, Tailwind, Figma variables, native themes, accessibility checks, and an MCP resource.

Figma's guide to 2026 web design trends — framework-specific design system kits now mandate Variables for AI-driven theme switching and executable design tokens. Shows where design-to-code infrastructure is heading.

Step-by-step guide to structuring design systems for coding agents with semantic tokens, W3C token files, readable component docs, MCP access, and CI rules that prevent drift.

Public state design system with Figma components, accessible style guidance, design tokens, and icon packages. A practical reference for teams building clear, consistent government services.

Open-source Figma plugin and CLI that exports variables and styles as DTCG design-token JSON, then imports tokens back into Figma. It can also push files to GitHub, GitLab, JSONBin, or custom servers.