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.
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.
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.