paletta
INTEGRATION

Design tokens DTCG export

The Design Tokens Community Group (DTCG) format is a W3C draft specification for design tokens as JSON, 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. 1

    Generate a palette or shade scale

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

  2. 2

    Choose DTCG export

    Colors convert to the $type: "color" and $value token structure the spec defines.

  3. 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. 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.

{
  "color": {
    "primary": {
      "500": {
        "$type": "color",
        "$value": "#2563EB",
        "$description": "Primary brand color"
      }
    }
  }
}

Frequently asked questions

Related integrations

generate a Tailwind v4 theme

Generate a full Tailwind v4 color palette from one seed color, validated for WCAG contrast, and export a ready-to-paste @theme CSS block.

sync palettes to Figma Variables

Sync generated color tokens into Figma Variables and pull edits back, so a Figma file and a codebase never drift out of sync on colors.

Try it on your own colors

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

Export DTCG tokens