Design tokens: investing at the right time
Tokens are not something every digital brand needs, but if they are needed and absent, the cost will gradually become apparent.
A design token is the smallest unit of a design decision, such as a primary color code or a spacing step, recorded in a machine-readable format so that web, iOS, and Android can pull from a single source. Investing in pipeline tokens is worthwhile when your digital products run on multiple platforms and need to rebrand in one place and apply everywhere. For a single website or a brand without digital products, recording enough HEX, RGB, CMYK codes in the guidelines is sufficient.
- Digital products running on multiple platforms need to change color in one place and apply everywhere.
- has a technical team maintaining the token pipeline
- a single website or a brand without digital products yet
- The interface is not stable; the token pipeline becomes a burden.
Design tokens are not a complex concept, but they are often misunderstood in two opposing ways: either thinking that every brand needs them, or believing they are only for developers and not related to branding. Sinh Vũ explains clearly so you can make the right decision about the scope.
What is a design token?
A token is the smallest atomic unit of a design decision (the smallest unit that cannot be divided further). Instead of hardcoding the primary blue as #0057B8 In hundreds of places in the source code, you define a token named color-brand-primary has value. #0057B8. The entire web, iOS, and Android read that token. When the brand adjusts the color, you only need to change one place, and all platforms will recognize it immediately.
Tokens can store more than just colors: spacing steps, font sizes, shadows, and border radius can all be tokenized. In October 2025, the W3C community group (the organization that sets international web standards) released the first stable version of the Design Tokens format, supported by Figma, Style Dictionary, Tokens Studio, and many major tools. This is a sign that the ecosystem is mature enough for investment.
Tokens define variables, while the design system defines the relationships and rules for how those variables interact. Having a token library does not mean a complete design system is in place.
Design Tokens Format Module, W3C Community Group
Factors that need consideration
- Number of platforms that need synchronization: Tokens are effective when the same color must match across web, iOS, and Android simultaneously. A single platform offers fewer benefits than the setup costs.
- Brand or theme change frequency: Brands need to change colors by season, market, or have multiple sub-brands, which saves time significantly.
- Can the technical team operate the pipeline? The pipeline (automated processing chain) translates tokens into CSS, Swift, Kotlin code and requires someone who understands the tools and maintains them regularly. Tokens without maintenance will quickly diverge from the actual version.
- Product maturity level. If the interface is continuously changing, the token pipeline can become more of a burden than a savings.
- Does the current tool support token standards: Figma, Style Dictionary, Tokens Studio have supported this. If your team is using older tools, check before committing.
When to choose which direction
Investing in a complete token pipeline is worthwhile when the digital product runs on at least two platforms (web and mobile), has a technical team for maintenance, and the interface is relatively stable. The biggest benefit is rebranding in one place and applying it everywhere, without missing any platforms.
No need for a pipeline when there is only a single website, or the brand has no digital products. At this point, the standard of recording HEX, RGB, and CMYK codes is the only source that both the design and printing teams can use.
Medium light level is using Variables in Figma to synchronize internal design but has not yet built an automatic code generation pipeline. Suitable when the technical team is not ready but wants to lay the groundwork first.
Common mistakes
- Create a complex pipeline for an unstable product. The interface changes, tokens change accordingly, and the pipeline needs continuous updates, requiring more effort than doing it manually.
- Thinking having a token means having a design system. Tokens are just variables. The relationships between them, such as which color to use for the background and which color for text on that background, still need to be defined as rules.
- Set tokens based on value rather than role. Token name.
do-#C42021only describe colors. Token namemau-nhan(accent color) describing the role. When the brand changes the accent color from red to orange, the token based on the role only needs to change one value, while the token based on value must be found and changed everywhere.
The viewpoint of Sinh Vũ
Sinh Vũ only includes tokens in the scope of work when the client truly has a digital product across multiple platforms and a capable technical team for operation. At standard levels, Sinh Vũ locks the color system with sufficient HEX, RGB, and CMYK codes; this is the only format that both the design team and the printing team can read without needing special software.
Sinh Vũ does not create pipeline tokens for clients when there is no operational technical team. A pipeline without maintenance will drift over time and create bigger problems than it solves. If you are at a stage that requires evaluation, the most practical question is: who on the team will update this token when the brand changes next year?
Decision checklist
Topic: What are design tokens and when is it worth investing in a token pipeline. Sinh Vũ Handbook, 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
W3C Design Tokens Community Group, Design Tokens Format Module (designtokens.org); Contentful, Design token system; practical experience from Sinh Vũ.
Frequently asked questions
Figma already has Variables; can we use that instead of tokens?
Figma Variables are a way to store tokens within the Figma file, but to synchronize them to actual code for iOS or Android, an additional translation step is still needed, often through Style Dictionary or Tokens Studio. If the team only works on the web and Figma is the endpoint, Variables are sufficient. If automatic cross-platform code generation is needed, a more complete pipeline must be built.
Can the token replace the design system?
No. Tokens define individual variables, while the design system defines the relationships and rules for how those variables interact. Having a token library without relationship rules means the technical team must deduce how to combine them, often resulting in inconsistent outcomes.
When to start thinking about tokens, not right from the beginning?
You should start thinking about tokens when the product interface is relatively stable and the technical team begins to complain about missed updates for colors or text on the platform. Building a token pipeline on a constantly changing interface will require more maintenance effort than the value it provides.