Tools that support the DTCG format

[c1rrus]

Do you maintain a tool (or anything else - e.g. a software library) that supports reading and/or writing DTCG files? Then please add a link and some details as a comment here in the following format:

### [Name of your tool](https://website.of/your/tool)

![Logo or screenshot of your tool](https://link.to/the/image)

Brief description of your tool (1-2 paragraphs). E.g. What does it do? Who's it for?

#### Supported spec version(s)

<!-- Add or delete as appropriate -->
* [Live draft](https://tr.designtokens.org/format/)
* [2nd editor's draft](https://second-editors-draft.tr.designtokens.org/format/)
* [1st editor's draft](https://first-editors-draft.tr.designtokens.org/format/)

🙏 Please only add things here that have already shipped support for the DTCG file format. If you are planning to support the format but haven't released it yet, that's awesome. However, please wait until you actually ship support before promoting your tool here.

♻️ If details change (e.g. you add more features to your tool), please edit your existing comment rather than adding a new one.

⚠️ The DTCG maintainers reserve the right to remove spammy or inappropriate comments.

Motivation

This list will hopefully be useful for:

• Letting tool makers promote their good work and get some well-deserved kudos 😄
• Providing the community with a list of tools they can use to play with DTCG files right now
• Giving the DTCG format editors visibility of how folks are using the format

[andrico1234]

Design Token Validator

Check that your design tokens adhere to the DTCG spec with this free open source Design Tokens Validator

To get started, paste the JSON for your design tokens, or upload a file directly. The site will then validate your tokens and present a list of helpful messages, which link to relevant parts of the spec, to help fix any problems.

Supported spec version(s)

• Live draft

[drwpow]

Cobalt CLI

Cobalt is an open-source, MIT-licensed frontend toolchain that:

• can validate any DTCG tokens schema and give detailed errors
• has existing integrations for JavaScript, TypeScript, CSS/Sass, JSON and Tailwind CSS
• Used in production for several sites (Snyk and Tidepool)
• has a plugin system that can support any build target
• can bundle multiple tokens schemas together
• supports the modes extension for light & dark mode

Supported spec version(s)

• Live draft

[PavelLaptev]

TokensBrücke — Figma plugin

TokensBrücke is a Figma plugin that simplifies the process of converting Figma variables into design-tokens JSON. The plugin generates JSON files compatible with the latest DTCG specification.

• Github repo
• Style Dictionary utils

Supported spec version(s)

• Live draft

[kaelig]

@universse 👋🏻 It'd be great to see https://github.com/universse/theminglayer showcased here!

[tmdvs]

Sketch

Sketch is Mac app for designers to create, team up, prototype, as well as a web app for everyone else to browse, give feedback, inspect, and handoff — in any browser. A complete design platform, made by a sustainable indie company since 2010.

You can export your Color Variables, Layer Styles, and Text Styles as Design Tokens from the web app. You can download your design tokens or create an always-up-to-date public link for them. (Read the docs)

Supported spec version(s)

• Live draft

[nclsndr]

Design Tokens Format Module definitions

A npm package providing implementation agnostic JavaScript/TypeScript definitions from the Design Tokens Format Module specification, for library developers and tooling creators.

In short, it exposes constants (fontWeights, strokeStyleLineButt...) and TS types to avoid repeating them in every projects.

Supported spec version(s)

• Live draft

[bartveneman]

Project Wallace

Generate design tokens from CSS. Because Project Wallace analyzes your CSS in depth already, we can convert the analysis into design tokens.

Supported spec version(s)

• Live draft

[bartveneman]

The logic that converts CSS into Design Tokens is now a separate library: https://github.com/projectwallace/css-design-tokens/

[universse]

W3C Design Token Standard Schema

Provides runtime validation and type inference for W3C design tokens with Standard Schema.

Supported spec version(s)

• Live draft

[artursopelnik]

Design Token Validator

Validate your design tokens against the W3C DTCG spec to ensure compatibility.
Paste JSON/JSON5 or upload a file. The tool checks your tokens and gives clear, actionable feedback. A CLI version for workflow integration is coming soon.

Supported spec version(s)

• Live draft

[bennypowers]

Design Tokens Language Server

Editor tooling for DTCG design tokens. It's got Hover, Go to Definition, Find References, Autocomplete, and more for your favourite editors like neovim, vscode, or zed. Supports tokens defined in DTCG format JSON or YAML files, and CSS files.

Supported spec version(s)

• Live draft

[cmjio]

Design Tokens Language

DTL (Design Token Language) is a soon to be open-source specification and syntax designed to bring type safety, logic, and structure to design system management. It serves as a unified, platform-agnostic source of truth that allows teams to define styles once and automatically compile them into usable code for CSS, iOS, Android, and Flutter. By replacing scattered JSON files with a robust language ecosystem, DTL helps developers and designers automate their workflows and maintain consistency at scale.

Supported spec version(s)

• Live draft