Getting started for designers
How to get going with designing for your project using our design system.
Our design foundations
The Sainsbury’s design system 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.
Colour
Brands have individual colours, but share a monochrome and semantic palette.Typography
The typography system provides a flexible approach that can be applied to individual brand fonts.Layout
Read about spacing, grids, gutters and margins and how they vary across breakpoints.Design tokens
Learn how to use design tokens to build and maintain consistent user interfaces.Figma design libraries
We maintain our UI design libraries in Figma. When you use our UI design libraries, you’ll automatically receive any updates made to our libraries so your designs will always stay up-to-date with the latest releases.
Branded UI design libraries
Our branded UI design libraries contain the core components and styles for Sainsbury’s, Argos, Nectar, Habitat and Tu experiences, across web platforms.
If you’re a Sainsbury’s colleague
In your Figma file, visit ‘libraries’ and ensure the branded Figma libraries are enabled.If you’re a third party or agency
If you’re designing from outside Sainsbury’s organisation, you’ll need to duplicate the branded UI design library from our community page.Once you have access to the libraries, you can use the assets panel to search for components, icons and logos for your brand. You will also be able able to access colours, text styles in the Styles section.
Be sure to accept any updates that pop up in the bottom right corner to make sure you have the latest,, most up to date version of the library.