Tokens 1.0 was our first iteration of design tokens. You can still use this version if you prefer. It does not use Style Dictionary and can be exported in Sass, CSS, iOS and Android in addition to JSON.
Introduction
Let's say a brand has a Primary Pink color. Designers and developers should refer to this color by the same name and identity, regardless of platform (design, web, mobile etc). If the color changes in design, it should also change on all development platforms automatically (and vice versa).
Design tokens enable this behavior by creating an abstract identity and centralizing the source of truth for this color. Because they help to establish a source of truth, they are often found in design systems. They can be used for colors, text styles, spacings, animation values etc.
Design tokens in zeroheight
Every styleguide comes with a default Design tokens page
Add tokens to your styleguide
That page includes a tokens section, but these sections can be added anywhere in your styleguide using the toolbar:
Syncing design tokens
zeroheight creates and updates design tokens based on the typography and color style values in your team's design tools, and makes them available to download using an API endpoint:
Supported formats
The API supports the following export formats:
- Sass
- CSS
- JSON
- iOS / Swift
- Android (XML)
By using this API, you can keep your codebase in sync with the latest design values automatically!
👉 Note: The only tokens synced are currently typography and color styles, but we plan to add support for many more token types, as well as custom tokens.
