Colors
Search the component library

Colors

v1.0.1

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

Light Palette

Foreground

Pitch #231f20
Gray No. 1 #565656
Royal Navy #094877
Hyperdrive #0d65a6
Firetruck #D0021B
Spruce #076826

Background

Brightly Lit #E6E6E6
Off White #F2F2F2
Dirty Ice #F8F8F8
White #FFFFFF
Blue Milk #D9EEFF
Highlighter #FDEC2E

Accents

Boring #A6A8AB
Sidewalk #B3B3B3
Hairline Gray #D0D0D0

Dark Palette

Foreground

White #FFFFFF
Gray Wash #AEAEAE

Background

Black #000000
Gutenberg Black #333333
Full Moon #424242

Accents

Asphalt #3f3f3f
Smoke Gray #545454

Blue Palette

Foreground

White #FFFFFF

Background

Basic Blue #107ACA
Sea #0C5D99

Accents

Deep Sea #0A4D80
Sky Blue #9DC0DB

White Palette

Foreground

Sandy Gray #6d6d6d

Background

White #ffffff

Exported Styles

Light Palette

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

Dark Palette

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

Blue Palette

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

White Palette

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

Changelog

1.0.1

  • ADDED: Exported styles

1.0.0

Initial version