This site is no longer maintained

This is the documentation for version 0 of the design system and will no longer be updated. Please see the new Design System site on nice.org.uk for the most up-to-date documentation.

Design System documentation

Alpha NICE Design System is in development. This means it is not feature complete and there may be issues. Find any? Please, let us know!

About NICE Design System

NICE Design System is a set of reusable patterns, documentation and guidelines for rapid product development.

Its goal is to create a consistent, acccessible digital experience across all of NICE’s services.

It’s a source for creating beautiful, consistent experiences across NICE’s digital services. It’s aimed at developers, designers and content editors and consists of:

  • A base framework to give the structure of a modern web app e.g. grid, typography etc
  • A pattern library of both micro and macro patterns
  • A style guide for both design and code
  • A set of auto-generated documentation at a code-level for both SASS and JavaScript.

It is a re-work of NICE’s original adaptation of Bootstrap, known as NICE.Bootstrap.

View the roadmap

Our aims and principles

  • Tested and testable

    JavaScript written in a testable way with unit tests. Responsive testing. Set of manual accessibility tests.

  • Tooling doesn’t in the way of the code

    It's all about the code so using different IDEs or platforms for dev shouldn't get in the way of building things.

  • Easy to maintain and extend

    It should be a living thing that gets improved and extended so it's got to be easy for developers to pick up and work on.

  • Easy to use and consume

    It should be easy to integrate the NICE Design System into any application with just a few commands, for example via NPM, Bower, or Meteor's Atmosphere.

  • Accessible

    We aim to conform to WCAG 2.0 Level AA and follow the 4 principles of accessibility of perceivable, operable, understandable, and robust for our content.

  • Modern

    But not just modern for the sake of being modern. There are some amazing modern web technologies that we use to try and make great experiences.

  • Modular

    You shouldn't be forced to include everything - pick and choose exactly what you need which means lightweight…

  • Lightweight

    It's not a monolithic framework with every design pattern NICE have ever used - it's lightweight 'starter for 10' that gives just enough of a framework and as a result is lightweight and quick loading.

Who is it for?

Developers

Either quickly rapidly prototype using a compiled version, or integrate it into your app and use it as a solid base.

Install

Designers

Have a base and set of rules and styles from which to iterate without re-inventing the wheel

Content editors

A set of guidelines for how components should be used and a set of templates. An up-to-date source of truth to ensure consistency of use across.

Edit on GitHub