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!

Variables

$colour-nice-black

colour-nice-black

$colour-nice-black: #222;

$colour-nice-white

colour-nice-white

$colour-nice-white: #fff;

$colour-nice-teal

colour-nice-teal

$colour-nice-teal: #004650;

$colour-nice-purple

colour-nice-purple

$colour-nice-purple: #451551;

$colour-nice-cool-teal

colour-nice-cool-teal

$colour-nice-cool-teal: #00506a;

$colour-nice-rich-black

colour-nice-rich-black

$colour-nice-rich-black: #0e0e0e;

$colour-nice-dark-grey

colour-nice-dark-grey

$colour-nice-dark-grey: #393939;

$colour-nice-grey-1

colour-nice-grey-1

$colour-nice-grey-1: #adadad;

$colour-nice-grey-2

colour-nice-grey-2

$colour-nice-grey-2: #d6d6d6;

$colour-nice-grey-3

colour-nice-grey-3

$colour-nice-grey-3: #e9e9e9;

$colour-nice-blue-1

colour-nice-blue-1

$colour-nice-blue-1: #233746;

$colour-nice-blue-2

colour-nice-blue-2

$colour-nice-blue-2: #314c60;

$colour-nice-blue-3

colour-nice-blue-3

$colour-nice-blue-3: #517489;

$colour-nice-ice-teal

colour-nice-ice-teal

$colour-nice-ice-teal: #a2bdc1;

$colour-nice-teal-1

colour-nice-teal-1

$colour-nice-teal-1: #4f7d83;

$colour-nice-teal-2

colour-nice-teal-2

$colour-nice-teal-2: #18646e;

$colour-nice-teal-3

colour-nice-teal-3

$colour-nice-teal-3: #15434a;

$colour-true-black

colour-true-black

$colour-true-black: #000;

$colour-true-white

colour-true-white

$colour-true-white: #fff;

$colour-body

colour-body

$colour-body: #fafafa;

$colour-text

colour-text

$colour-text: $colour-nice-rich-black;

$colour-text-subtle

colour-text-subtle

$colour-text-subtle: $colour-nice-grey-1;

$colour-text-inverse

colour-text-inverse

$colour-text-inverse: $colour-nice-white;

$colour-icons

colour-icons

$colour-icons: $colour-nice-teal;

$colour-focus

colour-focus

$colour-focus: #0092a6;

$colour-focus-inverse

colour-focus-inverse

$colour-focus-inverse: $colour-link-inverse;

$colour-btn-cta

colour-btn-cta

$colour-btn-cta: $colour-nice-purple;

$colour-btn-cta-hover

colour-btn-cta-hover

$colour-btn-cta-hover: #260b2d;

$colour-btn-cta-text

colour-btn-cta-text

$colour-btn-cta-text: $colour-nice-white;

$colour-btn-primary

colour-btn-primary

$colour-btn-primary: $colour-nice-dark-grey;

$colour-btn-primary-hover

colour-btn-primary-hover

$colour-btn-primary-hover: $colour-nice-rich-black;

$colour-btn-primary-text

colour-btn-primary-text

$colour-btn-primary-text: $colour-nice-white;

$colour-btn-secondary

colour-btn-secondary

$colour-btn-secondary: #666;

$colour-btn-secondary-hover

colour-btn-secondary-hover

$colour-btn-secondary-hover: #333;

$colour-btn-secondary-text

colour-btn-secondary-text

$colour-btn-secondary-text: $colour-nice-white;

$colour-btn-inverse

colour-btn-inverse

$colour-btn-inverse: $colour-nice-white;

$colour-btn-inverse-hover

colour-btn-inverse-hover

$colour-btn-inverse-hover: $colour-nice-grey-3;

$colour-btn-inverse-text

colour-btn-inverse-text

$colour-btn-inverse-text: $colour-nice-rich-black;

$colour-border

colour-border

$colour-border: $colour-nice-grey-1;

$colour-panel-default

colour-panel-default

$colour-panel-default: $colour-nice-grey-3;

$colour-panel-inverse

colour-panel-inverse

$colour-panel-inverse: $colour-nice-dark-grey;

$colour-agile-phase

colour-agile-phase

$colour-agile-phase: #009ae9;

$colour-discovery

colour-discovery

$colour-discovery: #b8008e;

$colour-alpha

colour-alpha

$colour-alpha: #d5367f;

$colour-beta

colour-beta

$colour-beta: #f47738;

$colour-live

colour-live

$colour-live: #70a747;

$colour-error

colour-error

$colour-error: #b10e1e;

$colour-error-background

colour-error-background

$colour-error-background: #eac3c3;

$colour-caution

colour-caution

$colour-caution: #9b722f;

$colour-caution-background

colour-caution-background

$colour-caution-background: #ffdfa4;

$colour-info

colour-info

$colour-info: #4a7f99;

$colour-info-background

colour-info-background

$colour-info-background: #e6faff;

$colour-success

colour-success

$colour-success: #3f8c5e;

$colour-success-background

colour-success-background

$colour-success-background: #eff7eb;

$colour-guidance-new

colour-guidance-new

$colour-guidance-new: $colour-nice-purple;

$colour-guidance-updated

colour-guidance-updated

$colour-guidance-updated: $colour-nice-blue-3;

$colour-guidance-consultation

colour-guidance-consultation

$colour-guidance-consultation: #557021;

Edit on GitHub