Use zeroheight design tokens directly in your codebase

The Tokens Manager within zeroheight provides options to link your design system tokens directly to your development projects, whether that be for Web, iOS, Swift, Android, JavaScript, or any major application framework. Here’s how you might use it in a web project by utilizing CSS Custom Properties.

CSS Custom Properties

Custom Properties, or CSS variables, are a highly supported and very portable method of distributing design tokens across web projects. They’re not only portable but they also work directly in the browser. This means they can be updated live without the need for developer involvement.

To demonstrate, try clicking on and changing the word red in the demo below to something like orange or blue or even a hex code like #f63e7c:

See the Pen CSS Custom Properties demo by David Darnes (@daviddarnes) on CodePen.

Notice how the text color, button background color, and quote border all change simultaneously from a single value change. This works for fonts, sizing values, gradients, and indeed, anything you may have entered into your design tokens.

Tokens Manager export options

So how do we get our design tokens out of zeroheight and into our web project? Head on over to the Tokens Manager interface and select the tokens set you want to use. Above the top right corner of the tokens set, you’ll see options for importing and publishing your tokens.

Use the dropdown arrow next to “Publish changes” and select “Style Dictionary export.” You’ll see a dialog where you can select not only a Style Dictionary export but also all the most common application frameworks such as iOS, Swift, Android, JavaScript, SCSS and more.

For our use case, we need to select CSS. Once selected, you’ll be provided a URL to copy, which you can use directly in your web project. If you load the URL in your web browser, you’ll be presented with something like this:

:root {
  --accent: #613FE8;
  --background: #FCFAF2;
  --background-secondary: #FFFFFF;
  --font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
  --font-size: 1.33rem;
  --font-size-l: 1.77rem;
  --font-size-xl: 2.36rem;
  --font-size-xxl: 3.15rem;
  --font-size-xxxl: 4.2rem;
  --foreground: #3D3D3D;
  --line-height: 1.6;
}

Note that these custom properties have been defined in the same way as the example accent color in the previous demo above; there are just more of them.

Implementation

The final step is to add this URL as a linked stylesheet into your web project’s markup like so:

<link rel="stylesheet" href="https://org.zeroheight.com/api/token_management/token_set/4567/export?format=css">

Once added, you can immediately start using those CSS Custom Properties to style elements on the page in CSS, for example, to style paragraphs:

p {
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--foreground);
}

Live demo

Here’s a live demo of using zeroheight design tokens as CSS Custom Properties:

See the Pen Use zeroheight design tokens directly in CSS with Custom Properties by David Darnes (@daviddarnes) on CodePen.

Viewing the HTML source will reveal a <link>, which links directly to the custom properties generated by zeroheight. This means that any changes to your tokens within zeroheight will be automatically applied to web projects using this trick ✨

Other application integrations

This method of importing design tokens directly from zeroheight isn’t limited to the web; it can be done in many other application frameworks as well:

• Android: Provided as an XML ‘resources’ list
• Compose: Provided as an object of values
• Flutter: Provided as a class containing static constants
• iOS: Provided as a list of constants as well as a class
• iOS Swift: Provided as a class containing static variables
• JS: Provided as an exported object
• JSON: Provided as a simple key: value object
• LESS: Provided as variables
• SCSS: Provided as variables

In addition, your applications can use these in conjunction with each other. You may be intending to use your design system across multiple projects that use different frameworks, consuming your design tokens from a single source will help eliminate inconsistencies and provide a single source of truth.

Further reading

Want to know more about zeroheight’s Design Tokens Manager? Check out our Help Center, where we go into further detail about how you collate, manage and publish your design tokens.