Vocabulary stack

A design token is a design decision stored as data instead of a hardcoded value. One named entry, like color.brand, holds the value once, so web, iOS, and Android all read the same source instead of three copies that drift apart.

Change color.brand in one file and the new value propagates everywhere it is used. Design tokens started with the Salesforce design system team and are now standardized by the W3C Design Tokens Community Group.

The DTCG format is the open, vendor-neutral file format for design tokens, set by the W3C Design Tokens Community Group. It stores each token in a .tokens.json file with three keys: $value, $type, and $description.

The group shipped its first stable version, Format Module 2025.10, on October 28, 2025. Before that, every tool spoke its own proprietary dialect, which is the exact fragmentation the standard ends.

Style Dictionary is an open-source build tool that turns one set of design tokens into platform-specific code: CSS variables, iOS Swift, Android XML, and more. Define a token once, compile it everywhere.

Built originally at Amazon, it added first-class support for the DTCG format in version 4. This site's own tokens compile through it, so the reference page is the tool's real output.

Design to code is the handoff that turns a design into working front-end code. The old way: a human reads the design and writes the code by hand. The shift now: an agent reads structured design data and generates the code itself.

The gap shows at the component level. A tokenized style guide without an enforced JSON contract gets an agent 80 to 90 percent of the way there, with the misses landing in the granular component details.

Machine-readable design means encoding design decisions so an agent can query them like an API, instead of guessing from a screenshot or prose docs. Ask for a button, get the exact prop, variant, and token back. Deterministically.

The lesson is structure, not size. Diana Wolosin and Tony Rucker, at the Into Design Systems AI Conference, found structured JSON beat prose-heavy docs for feeding components to an agent. Their rule: JSON for MCP contracts, Markdown for natural-language rules. The meaning layer often runs over an MCP server, the protocol Anthropic introduced in November 2024.

Spec-driven development makes a written, version-controlled spec the source of truth, and treats the generated code as a regenerable artifact you can rebuild on demand. You protect the intent, not the code.

Birgitta Böckeler, a Distinguished Engineer at Thoughtworks, maps three levels in Martin Fowler's Exploring Gen AI series: spec-first, spec-anchored, and spec-as-source. Most teams sit at spec-first. Match the level to your cost of drift, not to how rigorous you want to look.

Runtime context standards are the open files that carry intent to an agent at the moment it works. They are written in Markdown because that is the format these models read with the highest fidelity. AGENTS.md is the most established one.

AGENTS.md carries architectural intent and is now stewarded by the Agentic AI Foundation. SKILL.md, pioneered by Anthropic, packages portable agent capabilities. DESIGN.md pairs machine-readable tokens with the prose that explains the visual identity.

Tokens to agents is the argument that a design system is no longer documentation a human reads, it is infrastructure an agent executes against. Formalize design decisions into structured data and design becomes executable intent, not static assets.

It rests on four layers that hand context down the chain: the values, the meaning, the intent, and the delivery. The author runs it in production. Ryan Payne built an agentic platform used by about 8,000 people at a Fortune 250 utility with exactly this tooling.

The foundation layer. The boring, standard substrate every layer above stands on: the raw values, held as data, that keep the visual language consistent across platforms.

The meaning layer. It tells an agent not just that a color exists, but that this red means danger and that one means brand, so it stops guessing from the average of the internet.

The intent layer. The spec becomes the source of truth and the code becomes its current output. You can write specs an agent cannot misread: Alistair Mavin's EARS notation, built at Rolls-Royce in 2009, turns fuzzy requirements into testable patterns.

The delivery layer. How the values, meaning, and intent reach the agent at runtime, through open Markdown files like AGENTS.md that travel across tools and vendors.