Without a standard, every tool defines its own format: Figma stores styles in a proprietary format, Tokens Studio uses a JSON format not fully compatible with Style Dictionary, and every organization invents its own naming convention. The W3C standard creates a common foundation for the first time.

Structure of the DTCG Format

The Design Tokens Format Module defines a JSON-based format. Each token has a name (implicit through JSON structure), a value ($value), a type ($type), and optionally a description ($description). The dollar prefix ($) marks reserved keys and distinguishes metadata from token groups.

{
  "color": {
    "brand": {
      "primary": {
        "$value": "#1D1F14",
        "$type": "color",
        "$description": "Primary brand color"
      }
    }
  }
}

Groups are represented by nested objects without $value. The $type can be set at group level and is inherited by all child tokens.

Token Types

The standard defines the following types:

Token Type
Description
Example Value
color
Colors in sRGB
#1D1F14
dimension
Spacing, sizes with unit
16px, 1.5rem
fontFamily
Font families
["Inter", "sans-serif"]
fontWeight
Font weights
400, 700
duration
Animation duration
200ms
cubicBezier
Easing functions
[0.4, 0, 0.2, 1]
number
Dimensionless numbers
1.5, 0.8
shadow
Shadows
{offsetX, offsetY, blur, spread, color}
typography
Composite typography
{fontFamily, fontSize, fontWeight, lineHeight}

Composite types like border, shadow, typography, and gradient combine multiple values in one token – particularly relevant for documentation where related values should be treated as a unit.

Reference Mechanism (Aliasing)

Aliasing uses curly braces with dot notation: {color.brand.primary}. The path references the token in the JSON hierarchy. Circular references are forbidden.

Current Status and Tool Support

The standard is in active development as a Community Group Draft. Tool support is growing: Style Dictionary 4 supports DTCG natively as input. Tokens Studio exports in DTCG format. Cobalt UI was developed DTCG-first. Specify and Supernova offer partial support.

Key Takeaways

  • The W3C DTCG Format is a JSON-based standard with $value, $type, and $description as reserved keys.
  • Ten token types plus composite types cover all design decisions.
  • Aliasing via {path.to.token} enables hierarchical reference chains.
  • Style Dictionary 4 and Cobalt UI support DTCG natively.
  • DTCG is a source format, not an output format – CSS Custom Properties are one possible output.
  • Those documenting in DTCG format can switch tools without redefining tokens.