About Luna

Find out more about Luna and how to get started using it.

What is Luna?

Luna is the design system for Sainsbury’s. It also supports Argos, Habitat, Tu, Nectar, and Sainsbury's Bank.

It’s made up of 3 elements:

Guidelines website

A single source of truth for designers, developers and external agencies working with Sainsbury’s.

Codebase

A growing resource of foundation code and reusable components.

Design assets

A Figma UI library, icon set and other assets that reflect what’s in the code.

Why use Luna?

By using Luna, teams don’t have to design and build things that have been designed and built already.

Luna provides things that can be re-used, whether that's a component like a button or a guideline that governs how that button should be used. We make sure that the things we provide are built to a high standard and accessible for all users.

That means teams can go faster, and users get a better, more consistent experience.

Luna's purpose is:

To provide

Guidelines, resources and documentation

so that

teams can create high quality, consistent and accessible user experiences

for

customers, colleagues and suppliers, across all our brands.

Accessibility principles

Accessibility is one the foundations of Luna, but using Luna doesn’t guarantee complete accessibility all the time.

Our accessibility principles are to help designers and developers understand the main considerations when building accessible products.

Read our accessibility principles


Where to go next

Getting started for designers

Find out how to start designing using Luna.

Getting started for developers

What to do to start building using Luna.

Getting started for third party partners

How to start using Luna if you're a third party partner.

Get in touch

We can help get started on your next project.