NICE Design System

Create consistent and on-brand digital services

The NICE Design System provides a markup framework and additional resources to enable developers and designers to build consistent interfaces more easily.

The components adhere to current accessibility and usability best practice. We publish React components to NPM and include example HTML snippets for use when prototyping or building pages inside a CMS.

24 Febrary 2020 marks the release of the first non-alpha version of the design system, along with this new documentation which will be added to in the coming weeks.

The first port of call for help with using the design system is to create a new post on the Github project discussion board. We're reserving Github issues for bugs (where things aren't doing what you expect them to) and conversations around how to implement an agreed feature.

Get involved

Contributions to the design system are always welcome. They can take the form of raising issues, research, and discussions as well as code contributions via pull requests.


Storybook is an interactive gallery of all of the components and elements that make up the design system.

Have a play

If you'd like to jump into having a play with the design system, you can either

For help with using either of the above, don't hesitate to create an issue on the Github repository.


Once you've mastered the foundations, these components are further patterns for building user interfaces.

  • Action banner

    Banner for highlighting, and giving context to, a call-to-action

  • Breadcrumbs

    A breadcrumb trail is a secondary navigation, that displays as a series of links, situated below the header.

  • Callout


  • Card

    A flexible component for displaying an item like news or guidance within a list

  • Full Bleed

    Full viewport width component to accommodate background images for impact

  • Hero

    Introduce a site or sub-site with impact

  • Horizontal navigation

    A navigation menu to navigate to different high level pages or sections

  • In-page navigation

    Allows users to navigate to specific sections, within long pages of content, across any screen size.

  • Maintain ratio

    Embed media and maintain an aspect ratio across devices

  • Page header

    Main heading and intro copy to introduce a page

  • Panel

    Blocks to highlight or separate content

  • Phase banner

    Alpha and beta beta banners clearly identify non-live services

  • Previous and Next

    A way for users to navigate to previous or next pages in a sequence of content.

  • Stacked navigation

    Navigation to support sub-pages within a section

  • Tabs

    Content is separated into different panes, with only one pane viewable at a time.

  • Tag

    Tag component used for labelling items in a list

Designers and user experience teams

Guidance and resources for getting started with the design system


The foundations that are to be used for faster product development.

  • Buttons

    Button of different types, colours and sizes and combination of buttons

  • Colour

    Colour palettes and usage, contrast guidelines and SASS variables

  • Grid & layout

    Use containers, grids and whitespace to build a structure and hierarchy on the page.

  • Helpers

    Useful helper classes for common tasks

  • Iconography

    Icons, their usage and guidance for creating new custom icons

  • Links

    Links and hover/active/visited/focus states

  • Lists

    Use of lists and nesting lists

  • Responsive

    Guidance for building mobile-first responsive web applications

  • Spacing

    Spacing between elements and vertical rhythm

  • Tables

    Basic table styling

  • Typography

    Headings, paragraphs, featured text, quotations, lists, links

  • Visibility

    Showing and hiding elements across breakpoints, for print, device orientations and screen readers


Common component use-cases and compositions.

Getting technical

Technical details for implementing or working on the design system