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
Dependencies
None
Documents
Contains the main brand colors and standard backgrounds.
Pearson Blue is the primary brand color. It is used for common interactive items like links and primary buttons.
White
White Gray
Complements Pearson Blue as a hover effect. Also designed for use as an accent color and background for light text.
White
White Gray
Digital Ice Blue
Moonlight
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.
Digital Pearson Blue
Ink Blue
Digital Grass Green
Charcoal
Medium Gray
Strawberry Red
Hot Pink
The standard background for within applications. Only secondary content should live directly on a White Gray background, preferring to use White.
Digital Pearson Blue
Ink Blue
Digital Grass Green
Charcoal
Medium Gray
Strawberry Red
Hot Pink
Additional brand colors that accent the page in specific circumstances.
Should be reserved for the most important interactive elements. More important than Pearson Blue, and should generally only appear once per screen.
Charcoal
Hover state for Sunshine Yellow.
Charcoal
Alternative background for screens with minimal content, such as sign in. Also used for mild attention grabbing, for example in coach marks.
Charcoal
Ink Blue
Use for decorative elements. Avoid any situations where turquoise is the foreground or background color for text.
Charcoal
Basic grays used for text, buttons, divider lines, etc.
Intended as the default text color, replaces black in most cases.
White
White Gray
Sunshine Yellow
Moonlight
Concrete
Digital Ice Blue
Digital Marine Turquoise
Intended as the secondary text color for light backgrounds.
White
White Gray
Intended for borders and separators, typically not used for actual content.
Charcoal
Ink Blue
Default button color.
Charcoal
Ink Blue
Disabled buttons, accent color.
Charcoal
Ink Blue
Colors that only appear under certain conditions, like success or error states.
Indicates overdue items and the concept of incorrectness.
White
White Gray
Indicates success.
White
White Gray
Indicate new/unread notifications.
White
White Gray
Initial version
Colors