Colors

v2.0.0-beta.3

Every color used in the Elemental Design library is defined in this component.

Usage Guidelines

Only core components such as Buttons or Typography should depend directly on the colors component. Higher level components should get their colors indirectly from the core set of components. This makes it easy to update the color usage across the library.

Primary Palette
Secondary Palette
Neutral Palette
Conditional Palette
Exported Styles
Changelog

Features

Single collection of all colors
Multiple palettes for dark/light themes etc.
Guaranteed compliance with Accessibility contrast requirements

Dependencies

None

Documents

UX Accessibility Checklist

Primary Palette

Contains the main brand colors and standard backgrounds.

Digital Pearson Blue

#047a9c

Primary Uses

Pearson Blue is the primary brand color. It is used for common interactive items like links and primary buttons.

A11y Complements

White

White Gray

Ink Blue

#005a70

Primary Uses

Complements Pearson Blue as a hover effect. Also designed for use as an accent color and background for light text.

A11y Complements

White

White Gray

Digital Ice Blue

Moonlight

White

#ffffff

Primary Uses

Most content should appear on a white background, whether it spans the full page or forms a small tile. White should also be used as a text color on dark backgrounds.

A11y Complements

Digital Pearson Blue

Ink Blue

Digital Grass Green

Charcoal

Medium Gray

Strawberry Red

White Gray

#f5f5f5

Primary Uses

The standard background for within applications. Only secondary content should live directly on a White Gray background, preferring to use White.

A11y Complements

Digital Pearson Blue

Ink Blue

Digital Grass Green

Charcoal

Medium Gray

Strawberry Red

Secondary Palette

Additional brand colors that accent the page in specific circumstances.

Sunshine Yellow

#ffb81c

Primary Uses

Should be reserved for the most important interactive elements. More important than Pearson Blue, and should generally only appear once per screen.

A11y Complements

Charcoal

Digital Ice Blue

#d6ebe8

Primary Uses

Alternative background for screens with minimal content, such as sign in.

A11y Complements

Charcoal

Ink Blue

Neutral Palette

Basic grays used for text, buttons, divider lines, etc.

Charcoal

#252525

Primary Uses

Intended as the default text color, replaces black in most cases.

A11y Complements

White

White Gray

Sunshine Yellow

Moonlight

Concrete

Digital Ice Blue

Medium Gray

#6a7070

Primary Uses

Intended as the secondary text color for light backgrounds.

A11y Complements

White

White Gray

Concrete

#c7c7c7

Primary Uses

Intended for borders and separators, typically not used for actual content.

A11y Complements

Charcoal

Ink Blue

Moonlight

#e9e9e9

Primary Uses

Disabled buttons, accent color.

A11y Complements

Charcoal

Ink Blue

Conditional Palette

Colors that only appear under certain conditions, like success or error states.

Strawberry Red

#db0020

Primary Uses

Indicates overdue items and the concept of incorrectness.

A11y Complements

White

White Gray

Digital Grass Green

#038238

Primary Uses

Indicates success.

A11y Complements

White

White Gray

Exported Styles

Available Styles	Reference As (How do I use this?)
Digital Pearson Blue	`[](/design/c/colors/v2.0.0-beta.3/#rd-digital-pearson-blue)`
Ink Blue	`[](/design/c/colors/v2.0.0-beta.3/#rd-ink-blue)`
White	`[](/design/c/colors/v2.0.0-beta.3/#rd-white)`
White Gray	`[](/design/c/colors/v2.0.0-beta.3/#rd-white-gray)`
Sunshine Yellow	`[](/design/c/colors/v2.0.0-beta.3/#rd-sunshine-yellow)`
Digital Ice Blue	`[](/design/c/colors/v2.0.0-beta.3/#rd-digital-ice-blue)`
Charcoal	`[](/design/c/colors/v2.0.0-beta.3/#rd-charcoal)`
Medium Gray	`[](/design/c/colors/v2.0.0-beta.3/#rd-medium-gray)`
Concrete	`[](/design/c/colors/v2.0.0-beta.3/#rd-concrete)`
Moonlight	`[](/design/c/colors/v2.0.0-beta.3/#rd-moonlight)`
Strawberry Red	`[](/design/c/colors/v2.0.0-beta.3/#rd-strawberry-red)`
Digital Grass Green	`[](/design/c/colors/v2.0.0-beta.3/#rd-digital-grass-green)`

Changelog

2.0.0-beta.3

CHANGED: Switch back to using pure white background, and update colors to be brighter.

2.0.0-beta.2

CHANGED: Tweak colors for accessibility.
CHANGED: Palette to match rebrand discussions.

2.0.0-beta.1

CHANGED: Colors now reflect new branding.

1.0.1

ADDED: Exported styles

1.0.0

Initial version