FISYCO

Public beta
The gapImpactHow it worksProductSecurity
Sign in

DTCG

DTCG (Design Tokens Community Group) is the W3C community group behind the Design Tokens Format Module, and the usual short name for that format: JSON with typed tokens and references.

All terms

The first stable version of the format, the Design Tokens Format Module 2025.10, was published on 28 October 2025 as a Final Community Group Report (designtokens.org). It is not a W3C Standard and is not on the Standards Track. Figma and Style Dictionary both read it.

What the format defines

A DTCG file is JSON. Each token has a $value and usually a $type; groups nest tokens by name; a value in braces is a reference to another token:

{
  "color": {
    "blue": {
      "500": {
        "$type": "color",
        "$value": { "colorSpace": "srgb", "components": [0.1451, 0.3882, 0.9216], "hex": "#2563eb" }
      }
    }
  },
  "bg": { "accent": { "$type": "color", "$value": "{color.blue.500}" } }
}

Tools must preserve $extensions they don't understand, so a file can carry tool-specific data, such as a stable ID, without breaking other readers.

Modes and themes

The Format Module itself doesn't define modes or themes. A companion Resolver Module 2025.10, published the same day, describes how to work with tokens "in multiple contexts (such as 'light mode' and 'dark mode' color themes)". Style Dictionary 5.5.5, for one, doesn't read it yet, so many setups keep one token file per mode, the way Figma's Export mode writes them.

Who reads it

Figma can import and export variables as DTCG JSON from the Variables panel (Modes for variables). Style Dictionary v5 builds DTCG files into CSS, SCSS and JavaScript, with 2025.10 support still in progress (Style Dictionary and DTCG). We build FISYCO, and it exports tokens as DTCG by default for new libraries, one file per mode.