Resources
These downloads, brand guidelines and third-party tools are here to help you when creating experiences with our design system.
Design resources
Figma UI design kits
We have UI design kits for use in Figma for Sainsbury’s, Argos, Nectar, Habitat and Tu. Our UI design kits contain colour styles, text styles, grid styles, components and icons.
If you’re a Sainsbury’s colleague, the UI design libraries will already be available to you in your Figma file. Visit ‘libraries’ and ensure the branded Figma libraries are enabled.
If you’re a third party or designing outside the Sainsbury’s organisation, you’ll need to duplicate the UI design kits from our community page.
Developer resources
Fable
Fable is a component library covering common UI needs. More in-depth information can be found on our Storybook site.
Private registry
Please note, the latest Fable packages are privately hosted and requires you to have a token to be able to download and install them. Without this, you will receive an error from running the above command. More information on this can be found at our getting started guide for a step by step walkthrough.
Styling
Fable Style is a peer dependency of this library and is needed for the relevant styles to be applied to components.
GitHub
See code documentation, raise issues or make suggestions at our GitHub page.
Browser support
Fable components and styles are supported in the following browsers:
- Google Chrome (latest)
- Microsoft Edge (latest)
- Mozilla Firefox (latest)
- Safari (latest)
Some products currently using Fable may be using browsers not in this list. If you have any questions about our supported browsers, you can contact us on our Microsoft Teams channel.
Brand resources
To help your experiences look, sound and feel like the brand you’re designing for, each brand using our design system follows a set of brand guidelines.
If you are a Sainsbury’s colleague, you can read each of the guidelines below. Otherwise, get in touch with our brand team and they’ll supply you with a copy.
Sainsbury’s internal brand guidelines PDF
Argos internal brand guidelines PDF
Nectar internal brand guidelines PDF
Habitat internal brand guidelines PDF
Tu internal brand guidelines PDF
Accessibility resources
Web accessibility guidance
For comprehensive guidance on writing, designing, and developing for accessibility, we recommend the W3C Web Accessibility Initiative tips and tutorials.
We also recommend the Web Content Accessibility Guidelines (WCAG) 2.2 for learning how to make web content more accessible.
Web accessibility testing
To test and detect accessibility problems as you build experiences, you can add the Axe Chrome extension to your computer.
For end-to-end and continuous integration accessibility testing, you can use axe-testcafe or cypress-axe.
If you need any help getting set up with these accessibility resources, you can contact us with any questions.
Copy resources
Hemingway
Checks your writing and highlights any complicated sentences. It also tells you if you’ve written in the passive voice, which we recommend you avoid in your writing.
Grammarly
Checks your spelling and grammar to make sure there’s no mistakes in your writing.
GOV.UK style guide
A style guide that’s a good fallback for any words or phrases not covered in our style guide.