W3C Design Tokens with Style Dictionary

Building your w3c standard design tokens with style dictionary

Who is the w3c and who is working on design tokens?

The World Wide Web Consortium (W3C) is an international community¹. It’s led by Tim Berners-Lee² and Jeffrey Jaffe. Together with organizations, a full-time staff, and individual developers they develop web standards³. Founded in 1994, as of march 2022, the W3C had 459 members¹. This includes businesses, nonprofit organizations, universities, governmental entities, and individuals like³:

• Wikimedia Foundation
• Mozilla Foundation
• Google
• Microsoft
• Meta
• Amazon
• Adobe
• Stanford University
• University of Edinburgh
• Vienna University of Economics and Business

Why should you use the w3c standard?

The current draft of the w3c design token standard is all we have. It’s as closes as we can get to an industry agreed interchange format for design tokens.

NOTE: At the moment the standard is still a draft and subject to change. While I believe this to be the future there is no guarantee for that. I heard from members of the working group that they believe the first version of the draft will be published without major changes. But this is also not guaranteed.

You may not share your design tokens outside your org, so why should you care? Because tools you use like Figma, sketch or style dictionary, will at some point consume and/or export design tokens. While there is currently a plethora of formats, it is likely that tool makers will move towards a standard if there is one.

So by using the w3c design token standard draft you are making your tokens as future-proof as possible.

The w3c design token format and extension

When storing design tokens in a file, you MUST use json notation (syntax). The file extension must be either .tokens or .tokens.json