Design tokens: invest 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 the primary color code or a single spacing step, recorded in a machine-readable form so web, iOS and Android can all pull from one source. A token pipeline is worth the investment when your digital product runs on several platforms and you need to change the brand in one place and have it apply everywhere. For a single website, or a brand that does not yet have a digital product, listing the full HEX, RGB and CMYK codes in the guidelines is enough.
- 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 complicated concept, but they are often misunderstood in two opposite ways: either people assume every brand needs them, or they think tokens are purely a developer matter with no bearing on the brand. Sinh Vũ explains it plainly so you can decide the right 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 color: spacing steps, font sizes, shadows and corner radii can all be tokenized. In October 2025, the W3C Community Group (the international web standards body) released the first stable version of the Design Tokens format, supported by Figma, Style Dictionary, Tokens Studio and many other major tools. It is a sign that the ecosystem is mature enough to invest in.
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 multi-platform digital product and a technical team capable of running it. At the standard guidelines level, Sinh Vũ locks the color system with full HEX, RGB and CMYK codes, the one source format that both design and print teams can read without any special software.
Sinh Vũ does not build a token pipeline for clients who do not yet have a technical team to run it. A pipeline without someone to maintain it drifts out of sync over time and creates bigger problems than the one it solves. If you are at the stage of evaluating this, the most practical question is: who on your team will update these tokens when the brand changes next year?
Decision checklist
Topic: What design tokens (a variable set for color, type and spacing) are and when they are worth doing. Sinh Vũ handbook, sinhvu.com
Tick each item that applies or that you can already answer, 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.
This article is for reference. The scope, pricing, and specific commitments of Sinh Vũ are detailed in the proposal and signed contract.