Design tokens overview

Luna design tokens store fundamental design values like colour, spacing and typography in a way that can be used by different platforms. This makes it easier to build and maintain consistent user interfaces.

Why have design tokens?

Design tokens can contain any of the individual design elements that make up the Luna design system, whether that’s a colour saved as a hex code or a padding value saved in pixels.

A button annotated with the token names corner-radius, background-color, label-text-color, label-font-size and padding.

Instead of hard coding values into an experience, you can import a design token instead. This means that no matter what platform or environment you’re building with, you know that you’re aligned with Luna.

And if something changes in the Luna system, the change can be made once to the token itself and then automatically applied everwhere that token’s used.

Luna's tokens principles


Luna tokens bridge the gap between design and code. What appears in design resources like our Figma UI Design Kits is reflected in design tokens.


Luna tokens are given broad names that do not relate to a specific use case. This is to streamline and simplify how tokens are used.


Luna tokens are categorised in the same way for each Sainsbury’s brand, making it work across different brands.

How Luna tokens are grouped

Luna tokens are grouped according the same structure for each brand. The further into the structure you go, the more specific the groupings become.

Brand > Category > Types > Item


Sainsbury’s, Argos, Tu, Habitat or Nectar. There’s also a Global section which supplies sensible defaults for anything not defined by a brand token.


A broad style property, such as colour, spaces or typography.


More sub-divisions within a category, such as ‘monochrome’ within ‘colour’.


A specific codified token value.

For example, Nectar’s purple (#8223FA) is categorised as:

Nectar > Colour > Brand-1 > brand-1
A diagram showing how the colour #8223FA becomes the token nectar-brand1, and the
colour in use in a header component.

Categories of tokens


The Luna system groups colours for all brands into different types.


Space tokens refer to the spacing rhythm used throughout a design.


Modifiers are places where brands diverge from global defaults.

Developer documentation

The Luna codebase site has more detail on implementing Luna design tokens into your project.

Was this page helpful?

Get in touch

We can help you answer any questions around design tokens or help with your next project.