Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

This website no longer supports your browser. You can upgrade your browser to the latest version.

BETA

This is a new service. To help us improve it, give feedback

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)