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.
Storybook is an interactive gallery of all of the components and elements that make up the design system.
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.
Banner for highlighting, and giving context to, a call-to-action
A breadcrumb trail is a secondary navigation, that displays as a series of links, situated below the header.
A flexible component for displaying an item like news or guidance within a list
Full viewport width component to accommodate background images for impact
Introduce a site or sub-site with impact
A navigation menu to navigate to different high level pages or sections
Allows users to navigate to specific sections, within long pages of content, across any screen size.
Embed media and maintain an aspect ratio across devices
Main heading and intro copy to introduce a page
Blocks to highlight or separate content
Alpha and beta beta banners clearly identify non-live services
A way for users to navigate to previous or next pages in a sequence of content.
Navigation to support sub-pages within a section
Content is separated into different panes, with only one pane viewable at a time.
Tag component used for labelling items in a list
Guidance and resources for getting started with the design system
Resources for composing design system interfaces in Adobe XD
The foundations that are to be used for faster product development.
Button of different types, colours and sizes and combination of buttons
Colour palettes and usage, contrast guidelines and SASS variables
Use containers, grids and whitespace to build a structure and hierarchy on the page.
Useful helper classes for common tasks
Icons, their usage and guidance for creating new custom icons
Links and hover/active/visited/focus states
Use of lists and nesting lists
Guidance for building mobile-first responsive web applications
Spacing between elements and vertical rhythm
Basic table styling
Headings, paragraphs, featured text, quotations, lists, links
Showing and hiding elements across breakpoints, for print, device orientations and screen readers
Common component use-cases and compositions.
Multiple column callout arrangement
Technical details for implementing or working on the design system
Bits you need to add a component to the design system
Follow this guide to jump into using the components in React
To get started with contributing to the codebase, get the monorepo running on your own machine