NICE Design System
Your source for quickly creating consistent on-brand NICE digital services
Quick links
Foundations
The foundations and patterns 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
Helpers
Useful helper classes for common tasks
Iconography
Icons, their usage and guidance for creating new custom icons
Grid & layout
Use containers, grids and whitespace to build a structure and hierarchy on the page.
Links
Links and hover/active/visited/focus states
Responsive
Guidance for building mobile-first responsive web applications
Spacing
Spacing between elements and vertical rhythm
Typography
Headings, paragraphs, featured text, quotations, lists, links
Visibility
Showing and hiding elements across breakpoints, for print, device orientations and screen readers
Components
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
Alpha & Beta
Alpha and beta beta banners clearly identify non-live services
Breadcrumbs
A breadcrumb trail is a secondary navigation, that displays as a series of links, situated below the header.
Card
A flexible component for displaying an item like news or guidance within a list
Hero
Introduce a site or sub-site with impact
In page nav
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
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
Technical
Technical documentation and code style guides for creating NICE digital services
SASS & CSS
SASS documentation (mixins, functions, variables, selectors) and code style guide
JavaScript
JS documentation and code style guide
Installation
Install the product to get started
About NICE Design System
NICE Design System is a set of reusable patterns, documentation and guidelines for rapid product development.
Getting started
Guides to getting started using NICE Design System
Roadmap
Where we're taking the product