Getting started for third party partners
How to start using Fable if you’re a third party partner designing or building a product for one of the Sainsbury’s brands.
Designing with Fable
Fable 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.
Design foundations
Start designing by learning about the foundational elements, like colour and typography, within the Fable 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 Fable
To start building with Fable, your Sainsbury's contact will need to request access credentials to GitHub on your behalf.
Once your Sainsbury's contact has requested access credentials, there are three approaches available for you to start building with Fable.
Build a React application with the React components
Fable React is a component library covering common UI needs. It makes use of Fable Style classes and manages stateful behaviour.
Build using HTML/CSS with Fable Styles
Fable utilitses Tailwind and we have a custom configuration available via the @sainsburys-tech/style package.
Style a native application with Design Tokens
Fable uses Design Tokens to 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. The design tokens package is available via the @sainsburys-tech/design-tokens package.