Getting started for third party partners
How to start using Luna if you’re a third party partner designing or building a product for one of the Sainsbury’s brands.
Designing with Luna
Luna is a multi-brand design system. We want each brand to remain unique, but also to share things where consistent standards and approaches will create better experiences for users. This idea applies to everything that we do.
Luna design foundations
Start designing with Luna by learning about the foundational elements, like colour and typography, within the Luna design system.Designing for accessibility
Learn the cornerstones of accessibility, with links to detailed guidance.Accessing and using our UI design kits
We have UI design kits for use in Figma for Sainsbury’s, Argos, Nectar, Habitat, Tu and Sainsbury's Bank.
If you’re a third party or agency
If you’re designing from outside Sainsbury’s organisation, you’ll need to duplicate the UI design kit from our community page.Our UI design libraries contain:
Colour styles
Global monochrome and semantic palettes as well as brand colours.Text styles
Brand and global typefaces at different display sizes.Grid styles
Grids for mobile, tablet and desktop, with Android and iOS variants available.Components
A core set of components for each brand within the assets tab.Icons
Each brand’s icon suite within the assets tab.Building with Luna
To start building with Luna, your Sainsbury's contact will need to request access credentials on your behalf.
Once your Sainsbury's contact has requested access credentials, there are three approaches available for you to start building with Luna.
Build a React application with Luna React
Luna React is a component library covering common UI needs. It makes use of Luna Style classes and manages stateful behaviour.
Build using HTML/CSS with Luna Styles
Luna Styles is a Sass CSS framework with a foundational layout and bespoke component styles.
Style a native application with Design Tokens
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.