Styles

We use design tokens to communicate design decisions across design and development. These design decisions are a limited set of options for spacing, colour, typography, object styles, and more that maintain consistency across the design system.

These design tokens are used in place of hard-coded values in order to ensure flexibility and unity across all digital products. They are shared references used together by design and development, packaged in a format that’s consumable and easily distributed across all platforms.

The tokens are an abstraction, allowing underlying values to change in different scenarios without affecting the designer or developer experience.

Design tokens are created and updated through the design tool and exported as a JSON file. This file is then converted with Style Dictionary into formats like CSS and Sass for use by product teams.

What this means for...

Developers

You can access the design tokens as an NPM package here: npm: @abgov/design-tokens. Incorporate the SCSS or CSS file into your projects, replacing hard-coded values with the token variables from the design system. Your designers can use and reference these design tokens in their tools to hand off their designs to you.

Save time going back and forth with your designer on hex values and adjusting a few pixels at a time. "The colour is: --goa-color-info-default, the spacing is: --goa-spacing-m".

Designers

Many of the design tokens are represented in Figma as styles within the shared GOA Figma Styles Library here: Styles, Guidelines, and Patterns | DDD, and is automatically enabled in your project files. Spacing can be applied in Figma using the spacing component. As a designer, you can communicate design decisions using design tokens, which developers can then use in code.

Save time going back and forth with your developer on hex values and adjusting a few pixels at a time. "The colour is: --goa-color-info-default, the spacing is: --goa-spacing-m".