Composite Token

A token that holds more than one value as sub-values, representing a multi-property presentational concept as a single unit. The DTCG specification defines composite types for common interface patterns that require several values together to be fully expressed.

A shadow token might express several values at once:

{
  "shadow.md": {
    "$type": "shadow",
    "$value": {
      "offsetX": "0px",
      "offsetY": "2px",
      "blur": "4px",
      "spread": "0px",
      "color": "#00000033"
    }
  }
}

A typography token might express several values at once:

{
  "text.body": {
    "$type": "typography",
    "$value": {
      "fontFamily": "Inter",
      "fontSize": "16px",
      "fontWeight": "400",
      "lineHeight": "1.5"
    }
  }
}