DTCG Tokens
The DTCG format is a W3C Community Group specification started in 2020 and aims to outline a standard, universal design token format that works for all forms of digital design (including web, print, native apps, and beyond).
DTCG tokens are stored in JSON, and look something like the following:
{
"rebeccapurple": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.4, 0.2, 0.6]
}
}
}By storing tokens in a universal format like JSON, you can centrally manage them and generate code for any output target including web and native apps.
Types
Currently, the DTCG format defines the following types:
| Type | Description |
|---|---|
| Color | A flat color. |
| Dimension | A unit for sizing, spacing, etc. |
| Font Family | A font family, with fallbacks. |
| Font Weight | A font weight, such as normal or bold. |
| Duration | A unit for time. |
| Cubic Bézier | A Cubic Bézier for animations. |
| Number | A number without units. |
| Stroke Style | A stroke. |
| Border | An element border style. |
| Transition | A pairing of timing, duration, and a Cubic Bézier to form an animation. |
| Shadow | A drop shadow or inner shadow. |
| Gradient | A gradient of colors. |
| Typography | A complete typographic style, including family, weight, line height, and more. |
In addition, Terrazzo also allows 3 additional custom types: Link, Boolean, and String. But it may require writing your own to take full advantage of these types.
Hierarchy
DTCG token files are infinitely-nestable to create your token structure. For example, if you had a color.base.blue.500 token, you’d express it like so:
{
"color": {
"base": {
"blue": {
"500": { /* … */ }
}
}
}
}By allowing your JSON structure to nest, you avoid errors by avoiding duplication. For example, if you had to express your tokens like so:
{
"color.base.blue.100": { /* … */ },
"color.base.blue.200": { /* … */ },
"color.base.bleu.300": { /* … */ },
"color.base.blue.400": { /* … */ },
}It would be easy to miss the typo of “bleu!” But by declaring every group name once and only once, you make mistakes impossible.
Format
You can find the official format here. But for convenience, we also have a list of token types Terrazzo supports.