Installing the design system Install with npm
The ONS Design System is available as an npm package (opens in a new tab) . Every release is published to npm and provides a quick way to install everything you need. Inside the package are the following:
- components – each component contains a macro file that can be used in a Nunjucks-compatible application
- Sass files – all Sass rules are available to import, either everything or specific parts like a single component or the Sass that controls layout
- CSS files – compiled CSS of all components and layout styles
- fonts, images, favicons – static assets used in components and templates
- base page template – a Nunjucks template that contains the core markup and components needed to create an ONS service
To install the ONS Design System npm package you will need to install node.js (opens in a new tab) and you will need a package.json (opens in a new tab) file in the root of your project.
npm install @ons/design-system
This will install the latest version of
@ons/design-system in your
The next step is to get some styles, scripts and other assets working in your project.
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)