What is the DTCG JSON token standard and why should it be followed?
A neutral token format that allows design, code, and building tools to read the same file without being locked into any specific vendor.
DTCG JSON is a standardized token format issued by the W3C community group, using JSON with properties marked with a dollar sign like $value and $type so that all design and development tools can read it. It is recommended to follow this as it is the common language converging in the industry, allowing tokens to pass through multiple platforms without being locked into a single vendor. The first stable version will be released in 2025.10, and many major tools like Style Dictionary, Tokens Studio, and Figma have supported it at various levels.
- token needs to go through multiple tools or platforms
- want to retain the option to change tools later
- following the standard from the beginning is cheaper than converting formats later
- only a small web product, one stack, one tool (should still follow)
DTCG JSON is a neutral token format issued by the Design Tokens Community Group, a community group under W3C (the global web standards organization). The simple goal is to create a common language so that design tools, development tools, and source code can all read the same token file without needing to translate back and forth. The first stable version is named 2025.10, and many popular tools have supported it at different levels.
What does DTCG JSON look like?
Technically, a DTCG JSON file is a plain JSON file, nothing special except for the naming conventions of the properties. Each token requires two mandatory properties: $value (real value) and $type (style, for example color, dimension, fontFamily). Additionally, you can add $description to note the purpose, $extensions to expand according to individual needs, and $deprecated to mark tokens that are no longer in use.
It is important to understand clearly: DTCG only standardizes file formats, it does not dictate how you organize or name tokens. The strategy of categorizing tokens into primitive, semantic, and component is something the design and technical teams must develop themselves.
Why this is a worthy choice
The core reason is neutrality. When tokens are stored in DTCG format, you are not dependent on a single tool. If you use Tokens Studio today and want to switch to another tool tomorrow, the token file remains readable. If you only have a website today but later add an iOS or Android app, the file is still a valid starting point.
The second reason is the convergence of the industry. Style Dictionary, Tokens Studio, Figma, and many other tools are gradually standardizing in DTCG. Keeping pace with the industry today will save conversion efforts later, and new technical teams joining the project will read tokens faster because the conventions are familiar.
When necessary, when less urgent
Should follow DTCG immediately: Tokens need to pass through multiple tools (from design to code), across various platforms (web, iOS, Android), or the team plans to change tools in the near future. This is also a good choice when starting a new project because compliance costs from the beginning are almost zero.
Less critical: A small product, just a website, only one stack, a single tool from start to finish. However, even in this case, Sinh Vũ still recommends following the standard, as this is the converging norm and the initial costs are much lower than converting formats after having hundreds of tokens.
Common errors when applying
- Confusing DTCG as a construction tool: DTCG is merely a file input format. To output CSS variables, UIColor, or dp and sp for Android, you still need a separate construction tool like Style Dictionary to mediate.
- Mix old formats and DTCG formats within the same project: This creates two sources of truth, making maintenance difficult and easily causing conflicts when reading tools.
- Expecting that following standards means having a good system: DTCG addresses formatting issues, not strategic issues. Organizing tokens by layer, naming consistently, and deciding the scope of each token remains the responsibility of the design and technical teams.
The viewpoint of Sinh Vũ
In projects executed by Sinh Vũ, the token set is delivered according to the three-layer DTCG JSON standard from the very beginning. The reason is not that this is a mandatory technical requirement, but because it is a way to protect the client's investment. Tokens are long-term assets, so they must endure multiple tool changes and platform expansions without needing to be rebuilt from scratch.
Choose a neutral, tool-independent token format to avoid being locked into one vendor when you want to switch later.
Design Tokens Community Group, W3C
According to the neutral standard from the beginning, the least costly technical decision that offers the most long-term protection is preferred. You do not need to understand the entire technical specification of DTCG, but you should know that this is where the industry is heading, and getting involved early is always cheaper than getting involved late.
Decision checklist
Topic: What is a neutral DTCG JSON token and why should you follow it. Sinh Vũ guide, sinhvu.com
Select each item you find appropriate, then print or save as PDF to take with you.
If you have marked most of the signs above, this is the time to discuss in more detail. Sinh Vũ can help you review and propose a direction.
References
Design Tokens Community Group, W3C (high). First stable release DTCG 2025.10 (high). designtokens.org FAQ (high). Style Dictionary, supporting DTCG (high). Practical experience from Sinh Vũ Studio.
Frequently asked questions
How does DTCG JSON differ from the current way Figma saves tokens?
Figma has its own token format in Variables and in plugins. DTCG JSON is a neutral format, not belonging to Figma or any other company. If you only use Figma from start to finish, the two formats may look similar on the surface, but when tokens need to go outside of Figma, such as into code or iOS, the DTCG format is what tools like Style Dictionary can reliably read.
According to the DTCG standard, can the token automatically generate CSS and Swift?
No. DTCG only standardizes the token file format, not the export tool. You still need a building tool like Style Dictionary to read the DTCG file and export CSS variables for the web, UIColor for iOS, or sp and dp values for Android. DTCG is a common language at the input stage, while the output still needs to be configured for each platform.