Resources

These downloads, brand guidelines and third-party tools are here to help you when creating experiences with Luna.

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 and they just need to be enabled in Figma. If you want, you can also duplicate the UI design kits from our community page.

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

Luna React

Luna React is a component library covering common UI needs. More in-depth information can be found on our Codebase site.

Installation

$ npm i -S @jsluna/react @jsluna/style
Private registry

Please note, the latest Luna 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 dedicated hosting page or you can run through our getting started guide for a step by step walkthrough.

Styling

Luna Style is a peer dependency of this library and is needed for the relevant styles to be applied to components.

Starter kits

To jump-start development using Luna we have the following apps available that are ready-made to make use of Luna.

Luna React Boilerplate

A custom React app set up that makes use of Luna Config to use sensible defaults for common front end tooling such as Jest, ESLint and webpack.

React Create App

If you're starting with Facebook's Create React App as a base you can use the Luna React App repository as a guide on how to add Luna React and Sass functionality. The necessary file changes are detailed in the commit history.

Luna Styles

Luna Style is a Sass CSS framework with a foundational layout and bespoke component styles for Luna projects. Additional information on getting started with the library can be found on our Codebase site.

Installation

$ npm install -S @jsluna/style
Private registry

Please note, the latest Luna 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 dedicated hosting page or you can run through our getting started guide for a step by step walkthrough.

GitHub

See code documentation, raise issues or make suggestions at our GitHub page.

Visit Luna GitHub

Browser support

Luna components and styles are supported in the following browsers:

  • Google Chrome (latest)
  • Microsoft Edge (latest)
  • Mozilla Firefox (latest)
  • Safari (latest)

Some products currently using Luna 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 Luna 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.1 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 the Luna team 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