Color
Search the component library

Color

v2.0.0

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.

Features

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

Dependencies

None

Primary Palette

Contains the main brand colors and standard backgrounds.

Digital Pearson Blue
Ink Blue
White
White Gray

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

Concrete

Alto

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

Charcoal

Medium Gray

Digital Pearson Blue

Ink Blue

Strawberry Red

Digital Grass Green

Hot Pink

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

Charcoal

Medium Gray

Digital Pearson Blue

Ink Blue

Strawberry Red

Digital Grass Green

Hot Pink

Secondary Palette

Additional brand colors that accent the page in specific circumstances.

Sunshine Yellow
Sunflower Yellow
Digital Ice Blue
Digital Marine Turquoise
Brackish Turquoise

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

Sunflower Yellow

#ff9a19

Primary Uses

Hover state for Sunshine Yellow.

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

Digital Marine Turquoise

#19a6a4

Primary Uses

Indicate current day in calendars. CTA button background.

A11y Complements

Charcoal

Brackish Turquoise

#179599

Primary Uses

CTA button background hover state.

A11y Complements

No complements meet accessibility requirements

Neutral Palette

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

Charcoal
Medium Gray
Concrete
Alto
Moonlight

Charcoal

#252525

Primary Uses

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

A11y Complements

White

Digital Marine Turquoise

White Gray

Sunshine Yellow

Sunflower Yellow

Digital Ice Blue

Concrete

Alto

Moonlight

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

Alto

#d9d9d9

Primary Uses

Default button color.

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
Digital Grass Green
Hot Pink

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

Hot Pink

#da0474

Primary Uses

Indicate new/unread notifications.

A11y Complements

White

White Gray

Changelog

2.0.0

  • CHANGED: Colors now reflect new branding.

1.0.1

  • ADDED: Exported styles

1.0.0

Initial version