Guidance
Overview
Step by step help on how to install the design system, how to use the coding languages and how to install the ONS Prototype Kit.
Install the design system
How to get set up on the design system, and guidance on how to use it.
Install with npm
How to install the ONS Design System as an npm package.
Using the CSS, JS and assets
How to use the ONS design system CSS, JS and assets from the npm package or CDN.
Development
How to set up and use the Nunjucks, HTML and custom themes.
Templating in Nunjucks
How to set up and use Nunjucks with the ONS Design System.
Using compiled HTML
How to follow the alternative method of using the ONS design system by copying the compiled HTML.
Custom themes
How to create a custom theme for the ONS design system and include your own brand assets
Prototyping
The ONS Prototype Kit can be installed on a PC, Mac or ONS networked PC. See the guidance on how to install.
If you would like to prototype and test using the ONS Design system components and patterns you can use our high fidelity or low fidelity Figma Library.
ONS Prototype Kit
How to install the ONS Prototype Kit on a PC, Mac or ONS networked PC.
Figma UI library
How to prototype in Figma using the ONS design system library of components and styles.
Testing
Design system components and patterns must work on every browser and device that users access our services on.
Browser testing
How to test your service works on every browser and device that users access it on.
Google analytics
You might want to customise your analytics tracking if your service holds personal information or you would like to collect more specific information.
Customising your Google Analytics tracking
How to customise tracking if your service holds personal information or you would like to collect more specific information.
Further help
If you need further help, or have any questions, you can email the Design System working group at ons.design.system@ons.gov.uk (opens in a new tab)