UX Framework
Colors
Search the component library

Colors

v2.0.0-beta.1
Download UI Kit v1.9.0 Code

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

Download UI Kit v1.9.0 Code

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

Documents

UX Accessibility Checklist

Light Palette

Foreground

Black #000000
Pearson Blue #007fa3
Ink Blue #005a70
Medium Gray 1 #6b7071
Dark Gray #393c3d
Charcoal #252525
Red #db0020
Green #008638

Background

White #FFFFFF

Dark Palette

Foreground

White #FFFFFF

Background

Pearson Blue #007fa3

Exported Styles

Light Palette

Available Styles Reference As (How do I use this?)
Pitch (#231f20) [](/design/c/colors/v2.0.0-beta.1/#rd-pitch-231f20)
Gray No. 1 (#565656) [](/design/c/colors/v2.0.0-beta.1/#rd-gray-no-1-565656)
Royal Navy (#094877) [](/design/c/colors/v2.0.0-beta.1/#rd-royal-navy-094877)
Hyperdrive (#0d65a6) [](/design/c/colors/v2.0.0-beta.1/#rd-hyperdrive-0d65a6)
Firetruck (#D0021B) [](/design/c/colors/v2.0.0-beta.1/#rd-firetruck-d0021b)
Spruce (#076826) [](/design/c/colors/v2.0.0-beta.1/#rd-spruce-076826)
Brightly Lit (#E6E6E6) [](/design/c/colors/v2.0.0-beta.1/#rd-brightly-lit-e6e6e6)
Off White (#F2F2F2) [](/design/c/colors/v2.0.0-beta.1/#rd-off-white-f2f2f2)
Dirty Ice (#F8F8F8) [](/design/c/colors/v2.0.0-beta.1/#rd-dirty-ice-f8f8f8)
White (#FFFFFF) [](/design/c/colors/v2.0.0-beta.1/#rd-white-ffffff)
Blue Milk (#D9EEFF) [](/design/c/colors/v2.0.0-beta.1/#rd-blue-milk-d9eeff)
Highlighter (#FDEC2E) [](/design/c/colors/v2.0.0-beta.1/#rd-highlighter-fdec2e)
Boring (#A6A8AB) [](/design/c/colors/v2.0.0-beta.1/#rd-boring-a6a8ab)
Sidewalk (#B3B3B3) [](/design/c/colors/v2.0.0-beta.1/#rd-sidewalk-b3b3b3)
Hairline Gray (#D0D0D0) [](/design/c/colors/v2.0.0-beta.1/#rd-hairline-gray-d0d0d0)

Dark Palette

Available Styles Reference As (How do I use this?)
White (#FFFFFF) [](/design/c/colors/v2.0.0-beta.1/#rd-white-ffffff)
Gray Wash (#AEAEAE) [](/design/c/colors/v2.0.0-beta.1/#rd-gray-wash-aeaeae)
Black (#000000) [](/design/c/colors/v2.0.0-beta.1/#rd-black-000000)
Gutenberg Black (#333333) [](/design/c/colors/v2.0.0-beta.1/#rd-gutenberg-black-333333)
Full Moon (#424242) [](/design/c/colors/v2.0.0-beta.1/#rd-full-moon-424242)
Asphalt (#3f3f3f) [](/design/c/colors/v2.0.0-beta.1/#rd-asphalt-3f3f3f)
Smoke Gray (#545454) [](/design/c/colors/v2.0.0-beta.1/#rd-smoke-gray-545454)

Blue Palette

Available Styles Reference As (How do I use this?)
White (#FFFFFF) [](/design/c/colors/v2.0.0-beta.1/#rd-white-ffffff)
Basic Blue (#107ACA) [](/design/c/colors/v2.0.0-beta.1/#rd-basic-blue-107aca)
Sea (#0C5D99) [](/design/c/colors/v2.0.0-beta.1/#rd-sea-0c5d99)
Deep Sea (#0A4D80) [](/design/c/colors/v2.0.0-beta.1/#rd-deep-sea-0a4d80)
Sky Blue (#9DC0DB) [](/design/c/colors/v2.0.0-beta.1/#rd-sky-blue-9dc0db)

White Palette

Available Styles Reference As (How do I use this?)
Sandy Gray (#6d6d6d) [](/design/c/colors/v2.0.0-beta.1/#rd-sandy-gray-6d6d6d)
White (#ffffff) [](/design/c/colors/v2.0.0-beta.1/#rd-white-ffffff)

Changelog

2.0.0-beta.1

  • CHANGED: Colors now reflect new branding.

1.0.1

  • ADDED: Exported styles

1.0.0

Initial version