designtoken.md vs W3C DTCG

Spec standard vs the superset

The W3C Design Tokens Community Group is defining a JSON standard for design token interoperability — how tokens move between tools like Figma, Style Dictionary, and code. designtoken.md is the superset: a machine-readable markdown standard that gives agents rich design context, and its generator outputs DTCG-compliant JSON as one of its formats. It doesn't compete with DTCG — it includes it.

The tooling standard

What is the W3C DTCG format?

The W3C Design Tokens Community Group format is a JSON specification for design tokens. It defines how tokens should be structured so tools can interoperate: Figma exports in DTCG format, Style Dictionary reads it, your build pipeline transforms it. The spec covers types (color, dimension, font family, etc.), groups, aliases, and metadata. It's the emerging standard for design token exchange between tools.

JSON spec
The superset

What is designtoken.md?

A designtoken.md is the machine-readable standard for design context. The markdown gives agents full color scales, typography hierarchies, component states, and spacing systems in a format they read natively. But the generator also outputs DTCG-compliant JSON, CSS variables, and Tailwind config — so you get the DTCG format as one of many outputs, plus the richer markdown layer that DTCG can't express.

Markdown + DTCG JSON outputs

See the difference

DTCG standardizes token exchange for tools. designtoken.md provides the design context agents need at generation time.

W3C DTCG (JSON)

Tool-to-tool
{ "color": { "primary": { "$type": "color", "$value": "#3B82F6" }, "secondary": { "$type": "color", "$value": "#8B5CF6" } }, "fontSize": { "base": { "$type": "dimension", "$value": "16px" } } }

designtoken.md (Markdown)

Agent-to-code
# Design Tokens ## Color — Primary | Step | Hex | Usage | |------|-----|-------| | 50 | #EFF6FF | Backgrounds | | 100 | #DBEAFE | Hover states | | 200 | #BFDBFE | Borders | | 500 | #3B82F6 | Primary actions | | 700 | #1D4ED8 | Pressed states | | 900 | #1E3A8A | High contrast | ## Typography Scale | Level | Size | Weight | LH | LS | |-------|------|--------|-----|-------| | display | 48px | 700 | 1.1 | -0.02em | | h1 | 36px | 700 | 1.2 | -0.02em | | body | 16px | 400 | 1.6 | 0 |

Token by token

A detailed comparison of what each standard covers.

Feature W3C DTCG designtoken.md
Format JSON Structured Markdown + DTCG JSON, CSS, Tailwind outputs
Purpose Tool interoperability Agent context at generation time
Audience Design tool makers, build pipelines Developers using coding agents
Token structure Flat/nested key-value with $type Scales, hierarchies, semantic groups
Color representation Single values Full 50–900 scales with semantic roles
Typography Individual properties Complete hierarchies (9+ levels)
Component tokens Not in scope Button, card, input states
Relationships Aliases ($value references) Implicit via structure and naming
Requires tooling JSON parser, build pipeline Nothing — agent reads markdown
Spec status Editor's Draft (ongoing) Shipped, free, used in production

When to use each

Both standards serve different purposes. Here's how they fit together.

Use DTCG when

  • Building design tooling that needs to exchange tokens with other tools in the ecosystem
  • You want tool interoperability between Figma, Style Dictionary, build pipelines, and code generators
  • Your tokens need to move between systems or be shared with third-party tools
  • You're standardizing a token format across your organization's design infrastructure

Use designtoken.md when

  • Using coding agents and needing rich design context in a format they read directly
  • You need full color scales, typography hierarchies, and component relationships
  • Agents need to understand design intent without parsing JSON or running build tools
  • You want agents to generate consistent, semantically-aware UI code from context files

Or just use designtoken.md

The generator already outputs DTCG-compliant JSON alongside the markdown. You get the interoperability format tools expect, plus the richer machine-readable layer agents need — full scales, hierarchies, and component relationships that DTCG's flat structure can't express. One generator, every format.

Common questions

Can I convert DTCG tokens to a designtoken.md?
Yes. DTCG JSON provides the raw values. The designtoken.md generator can create a richer representation that adds full scales, semantic grouping, and component relationships on top of those values.
Is designtoken.md a competing standard to DTCG?
No — it's a superset. designtoken.md includes DTCG-compliant JSON as one of its generator outputs. It standardizes the machine-readable markdown layer that agents need, and gives you the DTCG format for tool interoperability at the same time. One standard, both audiences.
Do coding agents read DTCG JSON?
Agents can parse JSON, but DTCG's flat key-value structure doesn't convey the relationships, scales, and intent that agents need for consistent output. A designtoken.md provides that richer context in a format agents read natively.

Try the generator

Generate your own designtoken.md file, free, no signup.

Start generating →