Design Tokens

Using Design Tokens

Design tokens are a set of css variables provided by the DLS stylesheet for use in your project. They are used to ensure consistency in design across all digital services, as well as to enable features like surfaces and dark mode.

Design tokens that are intended to be used directly have equivalent css utility classes in the DLS stylesheet to make them easy to drop into your project. For example, to apply the example-design-token design token to an element, you can use the example-design-token utility class like so:

1<div className="example-design-token">
2  This element has the example design token applied.
3</div>

Additional methods for consuming design tokens directly, rather than via utility classes, will be provided in the near future.

Available Design Tokens

The DLS stylesheet provides a large number of css variables to power DLS v7. However, only a subset of these are intended to be used directly in your project. The table below lists the design tokens that are currently available for use in your project, along with their default values in the foreground surface.