Introduction to the Design System

The Design System for the NIHR is a collection of style guidelines for designing and branding NIHR web applications, on how to design content and interaction, as well as a set of tools to quickly build your own applications following these guidelines.

The Styles section documents the guidelines, ranging from branding, to colour, to text, to content presentation. These apply to all applications that must implement NIHR corporate branding.

Built on top of the style guidelines are the components, which are concrete bits of HTML, CSS, and sometimes JavaScript that fulfil a specific purpose, and that can be reused throughout your application like building bricks.

You may choose to implement the Design System's style guidelines using your own technology stack. Alternatively, you can install the Design System into your project, and reuse our own component implementations that are based on Bootstrap.

The entire Design System ecosystem is built using code, including the style guidelines, this documentation site, and the Bootstrap implementations of our components. Find us on Github under nihruk/design-system.