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.

Visit Design Systems GitHub

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.

Try Hemingway

Grammarly

Checks your spelling and grammar to make sure there’s no mistakes in your writing.

Try Grammarly

GOV.UK style guide

A style guide that’s a good fallback for any words or phrases not covered in our style guide.

Read GOV.UK style guide