Use when authoring, structuring, or consuming design tokens in the W3C Design Tokens Community Group (DTCG) format. Covers token types, groups, aliases, composite tokens, and file conventions.
USE FOR: W3C DTCG token files, token types (color, dimension, typography), token aliases and references, token groups, composite tokens, .tokens.json files
DO NOT USE FOR: transforming tokens into platform code (use style-dictionary), Figma variable management (use figma), component styling (use the relevant framework skill)
Use when authoring, structuring, or consuming design tokens in the W3C Design Tokens Community Group (DTCG) format. Covers token types, groups, aliases, composite tokens, and file conventions.
USE FOR: W3C DTCG token files, token types (color, dimension, typography), token aliases and references, token groups, composite tokens, .tokens.json files
DO NOT USE FOR: transforming tokens into platform code (use style-dictionary), Figma variable management (use figma), component styling (use the relevant framework skill)
[{"title":"W3C Design Tokens Community Group","url":"https://www.w3.org/community/design-tokens/"},{"title":"Design Tokens Specification","url":"https://www.designtokens.org/"},{"title":"Design Tokens Community Group — GitHub","url":"https://github.com/design-tokens/community-group"}]
Design Tokens — W3C DTCG Format
Overview
The W3C Design Tokens Community Group (DTCG) specification defines a vendor-neutral JSON format for exchanging design tokens across tools and platforms. The first stable version (2025.10) provides a production-ready standard adopted by Style Dictionary, Tokens Studio, Figma, and others.
Groups organize tokens hierarchically. A group is any object without a $value. Groups can set $type for all children:
{"color":{"$type":"color","$description":"All color tokens","brand":{"primary":{"$value":"#3b82f6"},"secondary":{"$value":"#8b5cf6"}},"neutral":{"100":{"$value":"#f3f4f6"},"900":{"$value":"#111827"}}}}
Children inherit $type from their nearest ancestor group, so individual tokens in the color group above don't need to redeclare "$type": "color".
Aliases / References
Tokens can reference other tokens using curly brace syntax — the core mechanism for semantic tokens:
