DTCG Specification
How Token UI aligns with W3C Design Tokens standards
DTCG Specification 2025.10
Token UI is inspired by and strives to align with the W3C Design Tokens Community Group specification (Final Community Group Report, October 2025). Following industry standards helps ensure better interoperability and establishes credibility within the design systems community.
What This Means
- Standardized Types: Our components map to official token types where applicable
- Interoperability: Better compatibility with industry-standard tools
- Future-Proof: Aligned with emerging W3C standards
- Semantic Clarity: Types have defined meanings and purposes
Token Type Coverage
Our component library implements the core token types defined in the Design Tokens Format Module:
Core Types (§8)
| Spec Type | Component | Status | Spec Section |
|---|---|---|---|
color | ColorToken | ✅ Implemented | §8.1 |
dimension | SpacingToken, RadiusToken | ✅ Implemented | §8.2 |
fontFamily | FontFamilyToken | ✅ Implemented | §8.3 |
fontWeight | FontWeightToken | ✅ Implemented | §8.4 |
duration | DurationToken | ✅ Implemented | §8.5 |
cubicBezier | — | 🔜 Planned | §8.6 |
number | NumberToken | ✅ Implemented | §8.7 |
Composite Types (§9)
| Spec Type | Component | Status | Spec Section |
|---|---|---|---|
strokeStyle | — | 🔜 Planned | §9.3 |
border | — | 🔜 Planned | §9.4 |
transition | — | 🔜 Planned | §9.5 |
shadow | ElevationToken | ✅ Implemented | §9.6 |
gradient | — | 🔜 Planned | §9.7 |
typography | TypographyToken | ✅ Implemented | §9.8 |
Resources
Why Standards Matter
Following the W3C Design Tokens specification ensures:
- Consistency — Shared vocabulary across design and development
- Portability — Tokens work across different tools and platforms
- Longevity — Investment in a standard that's built to last
- Ecosystem — Access to a growing ecosystem of compliant tools
Token UI helps you create beautiful, interactive documentation for your design tokens, making them easy to discover and understand for both designers and developers.