DTCG (Design Tokens Community Group) is a design token specification divided into three modules: Format, Color, and Resolver. Format provides the general syntax, Color provides additional details around the definition of color tokens, and Resolver talks about ways to define multiple contexts under which the tokens can be “resolved”.

Overview of the specification:

• There are essentially two types of entities: groups and tokens. Groups do not have a $value property, while tokens do.
• A token requires an unambiguous $type but can inherit it from its parent group.
• There are currently 7 core types: Color, Cubic Bezier, Dimension, Duration, FontFamily, FontWeight, and Number. All core types can only have a singular $value.
• Composite types are distinguished by having objects or arrays as their $value. Currently supported composite types are Border, Gradient, Shadow, Stroke style, Transition, and Typography.

Example: Base colors

This example define three color tokens. Here, color, palette, and gray are all groups, while 1000, 900, and 0 are the actual color tokens. The numbering utilized is defined as an ordered scale. Each color token’s $value is defined in the OKLCH color space along with an optional alpha value and hex representation. As can be seen, DTCG allows us to define the $type at the group level, which is then inherited by all child tokens.

{
  "color": {
    "$type": "color",
    "palette": {
      "gray": {
        "1000": {
          "$value": {
            "colorSpace": "oklch",
            "components": [1, 0, 0],
            "alpha": 1,
            "hex": "#ffffff"
          }
        },
        "900": {
          "$value": {
            "colorSpace": "oklch",
            "components": [0.9911, 0, 0],
            "alpha": 1,
            "hex": "#fcfcfc"
          }
        },
        "0": {
          "$value": {
            "colorSpace": "oklch",
            "components": [0, 0, 0],
            "alpha": 1,
            "hex": "#000000"
          }
        }
      } 
    }
  }
}

Their equivalent CSS variables would end up as:

:root {
  --color-palette-gray-1000: oklch(1 0 0);
  --color-palette-gray-900: oklch(0.9911 0 0);
  --color-palette-gray-0: oklch(0 0 0);
}