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

Prototyping ONS Prototype Kit

Overview

The ONS Prototype Kit is a powerful tool designed to help developers build high fidelity prototypes that mirror the final product in functionality and design using the latest styles and components from the ONS design system.

This allows teams to collaborate effectively, creating innovative, user-centered, and accessible services. Built prototypes can be shared with colleagues, stakeholders, and users for testing and feedback.

Who is it for?

Those who want to build and test new features or services using the latest styles and components from the ONS design system. 

Developers: Developers can test how the design translates into real-world implementation and ensure compliance with ONS accessibility and usability standards.

It is also useful for other professionals who collaborate with developers to build accessible solutions. These include, but are not limited to the following:

  • Designers: Professionals looking to create consistent and accessible user interfaces that align with the ONS design standards. Designers can create and test high-fidelity prototypes before development. It is useful for exploring and refining user interactions
  • User Researchers: Individuals who need to use realistic prototypes for user testing to gather feedback and improve service design.
  • Content Designers: To structure and test clear, user-friendly content and to ensure that language is accessible, meeting ONS guidelines.
  • Product Owners & Stakeholders: To visualize and approve designs before full-scale development. To ensure the prototype aligns with business and user needs.

Requirements

This guide requires some technical or developer experience. 

To install and use the prototype kit, you will need a terminal application and a code editor, such as Visual Studio Code (opens in a new tab) (opens in a new tab)  .

If you are using a local ONS device, you may need to request elevated permissions and access to a command terminal by raising a service call.

Install the Prototype Kit

Install Prototype Kit on PC

Learn how to install the ONS Prototype Kit on a PC using this step-by-step guide.

Install Prototype Kit on Mac

Learn how to install the ONS Prototype Kit on a Mac using this step-by-step guide.

Install Prototype Kit on ONS PC

Learn how to install the ONS Prototype Kit on an ONS network PC using this step-by-step guide.

Update the Prototype Kit

Update the Prototype Kit

Keep your prototype kit up to date with the latest components and features. Follow steps for Windows PC or macOS.

Further help

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) (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)