Colors

Color system built out of main brand colors and adjusted for variety of interfaces.

Primary Colors

Colors that are used most frequently across all pages and components.

Dynamo Blue
HEX: #0000c8RGBa: 0,0,78,1Sass: $color-primary-dynamo-blue
Electric Blue
HEX: #14e6e6RGBa: 7,90,90,1Sass: $color-primary-electric-blue
Black
HEX: #000000RGBa: 0,0,0,1Sass: $color-primary-black
White
HEX: #ffffffRGBa: 100,100,100,1Sass: $color-primary-white
Gray 100
HEX: #f8f8f8RGBa: 97,97,97,1Sass: $color-primary-gray-100
Gray 200
HEX: #e5e5e5RGBa: 89,89,89,1Sass: $color-primary-gray-200
Gray 300
HEX: #ccccccRGBa: 80,80,80,1Sass: $color-primary-gray-300
Gray 400
HEX: #aaaaaaRGBa: 66,66,66,1Sass: $color-primary-gray-400
Gray 500
HEX: #888888RGBa: 53,53,53,1Sass: $color-primary-gray-500
Gray 600
HEX: #6e6e6eRGBa: 43,43,43,1Sass: $color-primary-gray-600
Gray 700
HEX: #555555RGBa: 33,33,33,1Sass: $color-primary-gray-700
Gray 800
HEX: #333333RGBa: 20,20,20,1Sass: $color-primary-gray-800
Gray 900
HEX: #191919RGBa: 9,9,9,1Sass: $color-primary-gray-900

Secondary Colors

Colors that are used most frequently across all pages and components.

Midnight (Dynamo Dark)
HEX: #000064RGBa: 0,0,39,1Sass: $color-secondary-midnight-dynamo-dark-
Dusk
HEX: #042eceRGBa: 1,18,80,1Sass: $color-secondary-dusk
Evening
HEX: #085cd4RGBa: 3,36,83,1Sass: $color-secondary-evening
Afternoon
HEX: #0c8adaRGBa: 4,54,85,1Sass: $color-secondary-afternoon
Morning
HEX: #10b8e0RGBa: 6,72,87,1Sass: $color-secondary-morning
Sunrise (Electric Light)
HEX: #89f3f3RGBa: 53,95,95,1Sass: $color-secondary-sunrise-electric-light-
Passionfruit
HEX: #c7009fRGBa: 78,0,62,1Sass: $color-secondary-passionfruit
Clementine
HEX: #ff741eRGBa: 100,45,11,1Sass: $color-secondary-clementine
Mango
HEX: #f9ba06RGBa: 97,72,2,1Sass: $color-secondary-mango
Mint
HEX: #00ad7bRGBa: 0,67,48,1Sass: $color-secondary-mint

Extra Colors

Colors that are used most frequently across all pages and components.

Success
HEX: #00d636RGBa: 0,83,21,1Sass: $color-extra-success
Error
HEX: #f21d45RGBa: 94,11,27,1Sass: $color-extra-error

Border Colors

Colors that are used most frequently across all pages and components.

Border
HEX: #edededRGBa: 92,92,92,1Sass: $color-border-border
Dark
HEX: #b3b3b3RGBa: 70,70,70,1Sass: $color-border-dark
Darker
HEX: #929292RGBa: 57,57,57,1Sass: $color-border-darker
Darkest
HEX: #000000RGBa: 0,0,0,1Sass: $color-border-darkest
Invert
HEX: #c8c8c8RGBa: 78,78,78,1Sass: $color-border-invert
Light
HEX: #c8c8c8RGBa: 78,78,78,1Sass: $color-border-light
Lighter
HEX: #ffffffRGBa: 100,100,100,1Sass: $color-border-lighter
Lightest
HEX: #ffffffRGBa: 100,100,100,1Sass: $color-border-lightest

Neutral Colors

Colors that are used most frequently across all pages and components.

Transparent
HEX: #000000RGBa: 0,0,0,1Sass: $color-neutral-transparent

Text Colors

Colors that are used most frequently across all pages and components.

Hard
HEX: #000000RGBa: 0,0,0,1Sass: $color-text-hard
Base
HEX: #000000RGBa: 0,0,0,1Sass: $color-text-base
Soft
HEX: #555555RGBa: 33,33,33,1Sass: $color-text-soft
Muted
HEX: #777777RGBa: 46,46,46,1Sass: $color-text-muted
Hard [invert]
HEX: #ffffffRGBa: 100,100,100,1Sass: $color-text-hard-invert-
Base [invert]
HEX: #ffffffRGBa: 100,100,100,1Sass: $color-text-base-invert-
Soft [invert]
HEX: #ffffffRGBa: 100,100,100,1Sass: $color-text-soft-invert-
Muted [invert]
HEX: #ffffffRGBa: 100,100,100,1Sass: $color-text-muted-invert-