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.
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
Aligned
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.Non-specific
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.Multi-brand
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.
Brands
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.
Category
A broad style property, such as colour, spaces or typography.
Types
More sub-divisions within a category, such as ‘monochrome’ within ‘colour’.
Items
A specific codified token value.
For example, Nectar’s purple (#8223FA) is categorised as:
Categories of tokens
Colour
The Luna system groups colours for all brands into different types.Space
Space tokens refer to the spacing rhythm used throughout a design.Modifiers
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.