About the design system
Find out more about the Sainsbury’s Design System and how to get started using it.
What is the Sainsbury's Design System?
The Sainsbury’s Design System is the design system for all Sainsbury’s brands. That means it supports Sainsbury’s, Argos, Nectar, Habitat and Tu.
It’s made up of 3 elements:
Guidelines website
We provide best practice guidance and resources for designers, developers and external agencies working with Sainsbury’s.React component libraries
Our design system contains the Fable web component library to cover UI needs across all our brands.Figma UI libraries
Our UI design libraries contain all the core components, styles, icon sets and other assets that reflect what’s in the code.Why use the Sainsbury’s Design System?
By using our design system, teams don’t have to design and build things that have been designed and built already.
Our design system 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.
Our purpose is:
To provide:
Guidelines, resources and documentation.So that:
Teams can create high quality, consistent and accessible user experiencesFor:
Customers, colleagues and suppliers, across all our brands.Accessibility standards
Accessibility is one the foundations of our design system, but using our design system doesn’t guarantee complete accessibility all the time.
Our accessibility standards are to help designers and developers understand the main considerations when building accessible products.
Read our accessibility standards