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.

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!

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

Edit on GitHub