paletta

INTEGRATION

Design tokens DTCG export

The Design Tokens Community Group (DTCG) format is the W3C community group standard for design tokens as JSON (stable since the 2025.10 release), using $type and $value fields so any tool that has adopted the spec can read the same file without a custom parser. Paletta exports generated palettes directly in this format.

Updated 2026-07-15

How it works

  1. Generate a palette or shade scale

    Start from a seed color, or bring in an existing multi-color system.

  2. Choose DTCG export

    Colors convert to $type: "color" tokens whose $value is the sRGB color object (colorSpace, components, hex) the 2025.10 spec defines.

  3. Validate references

    Token aliases and groups follow the DTCG spec, so downstream tools like Style Dictionary or Tokens Studio can consume the file without a custom adapter.

  4. Export the JSON file

    Export a spec-compliant tokens.json ready for a build pipeline.

Export

DTCG token format

Copy and paste directly into your project.

tokens.json

{
  "color": {
    "primary": {
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.1451, 0.3882, 0.9216],
          "hex": "#2563eb"
        },
        "$description": "Primary brand color"
      }
    }
  }
}

Frequently asked questions

The Design Tokens Community Group (DTCG) format is the W3C community group standard for design tokens as JSON (stable since the 2025.10 release), using $type and $value fields so any tool that reads the spec, Style Dictionary, Tokens Studio, or a custom build pipeline, can consume the same file without a tool-specific parser.

Without a shared format, each design tool exports its own JSON shape, and every consuming pipeline needs a custom adapter. A DTCG-compliant export works with any tool that has adopted the spec, which covers most major token pipelines as of 2026.

A single shade scale exports in DTCG format on the free tier. Exporting a full multi-color system in DTCG format is a Pro feature.

No, it's a third option alongside them. DTCG JSON is the right format when tokens feed a build pipeline like Style Dictionary; the Tailwind and shadcn exports are the right format when tokens go straight into a CSS file.

Yes. The default DTCG export writes 2025.10 color objects, which Style Dictionary 5.3 and later read. For Style Dictionary v4 or Tokens Studio, pick the DTCG (hex) export, which writes the same tokens with hex string values.

Try it on your own colors

Generate a validated palette, then export it in the format above.