Design tokens

Design tokens are named entities that store design values and attributes which can be used on any platform. Tokens represent design decisions that we can reuse again and again, in place of hard-coded values. They make us scalable and versatile.

A token can be a colour, text style, unit of space, elevation and more.

Naming convention

A design token’s name describes how it should be used, and each level communicates a piece of detail. There is no one correct way for token naming and structure and inspiration has been taken to guide our taxonomy of variables. General naming pattern as follows:

{system}-{category}-{concept}-{property}-{variant}-{emphasis}-{state}
Namespace

There is a chance that design tokens can cross over with different scopes and platforms under the Hub24 Group. Therefore, prepending namespace levels to design tokens sets a unique identifier and allows for easier distinction between systems, and even white label themes.

  • System
  • Domain

    The standard namespace for Hub24 design system is ‘hds’.
Base

These levels communicate the minimum amount of information required for a design token but not all are compulsory. Concept and sub-concept are available if more context grouping is required.

  • Category
  • Concept
  • Sub-concept
  • Property
Object

This level is to be used when a design token is scoped specific to a component or element.

Modifier

These are optional so not every design token will have all modifier levels but are useful when more specificity is needed.

  • Variant and/or role
  • Scale/Emphasis
  • State
  • Mode

Categories

Design tokens are structured into a hierarchy ranging from very loose in meaning to tightly scoped in meaning. Semantic tokens are the main tokens that are commonly applied to components.

Primitive

Primitive tokens are the lowest level tokens and map directly to a raw value.

Alias

Alias tokens reference primitive tokens and act as intermediary semantic layer to distinguish each brand.

Semantic

Semantic tokens represent global UI patterns across the group and infer how they should be used. These are the main tokens that are applied to components.

Component

Component tokens are an extension of semantic and are used when more specificity is required for a component or pattern.

Applying tokens

Components, elements and text styles in {design system name} will usually have tokens applied and set by the designer so it’s just a matter to grab-and-go. This also includes modes in Figma so that switching themes for brands is seamless.

As a general guideline for applying design tokens, if there is no semantic token that is suitable, use a primitive token rather than using the closest semantic token. This allows for designs to be visually accurate at the time it is needed and can be updated later on when appropriate semantic tokens have been created.

This approach supports a self-service model for the design system so that agile squads can construct and design pages faster and more consistently.