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.

View cookies

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

Prototyping ONS Prototype Kit

Overview

To build high-fidelity prototypes using the latest styles and components from our design system, you can use the ONS Prototype Kit on GitHub (opens in a new tab) .

Installing the prototype kit

Before you start, you will need to download and install:

You will also need a terminal application and code editor, such as Visual Studio Code (opens in a new tab) 

For full installation instructions, follow the prototype kit setup guide on GitHub (opens in a new tab) 

Creating a new prototype

When you use the template to create a GitHub repository for your prototypes, it will contain a readme.md file in the root directory, with guidance on how to start creating a new prototype and run it locally on your device.

Publishing your prototype online

You will need to publish your prototype online if you want to:

  • share it with colleagues or stakeholders
  • test it with users on their own devices

The prototype kit outputs a folder of static files and assets that need to be deployed to the host server.

To publish your prototype online, you will need a web hosting service that can deploy a static website, such as:

You can also use Heroku (opens in a new tab) , but this is a paid service.

Hosting settings

When setting up your hosting service you will need to create a static site project, which you can choose to connect directly to your prototype repository on GitHub.

Give your project a name, and check the following settings:

  • build command: yarn build
  • publish root directory: build
Important information:

If you need any help installing the prototype kit, or creating or publishing your prototype, email the design system team at ons.design.system@ons.gov.uk (opens in a new tab) 

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss this page on GitHub (opens in a new tab)