Tokens 1.0

Brienne Wong
Brienne Wong
  • Updated

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.


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.


Diagram showing how a design token is made


Design tokens in zeroheight

Every styleguide comes with a default Design tokens page

Red rectangle around Design tokens page in the sidebar navigation

Add tokens to your styleguide

That page includes a tokens section, but these sections can be added anywhere in your styleguide using the toolbar:

Design tokens function hovered over in the zeroheight 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:

Red rectangle around download URL for your design tokens

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.

Was this article helpful?