Colors overview

Semantic

In rare cases, it's handy to use our base semantic colors. They are aliases for the respective 500 shade of each color and hold semantic meaning.

colorPrimary

#0059C8

--color-primary

colorPositive

#006D23

--color-positive

colorNegative

#BD002A

--color-negative

colorWarning

#CC4500

--color-warning

colorText-dark

#111B2B

--color-text-dark

colorText-base

#1B273A

--color-text-base

colorText-mid

#414D63

--color-text-mid

colorText-light

#5A657C

--color-text-light

colorText-lightest

#67728A

--color-text-lightest

Gray

Gray is our main color used for typography, borders and element backgrounds.

gray100

#F7F9FA

--gray-100

gray200

#E7EBEE

--gray-200

gray300

#CFD9E0

--gray-300

gray400

#AEC1CC

--gray-400

gray500

#67728A

--gray-500

gray600

#5A657C

--gray-600

gray700

#414D63

--gray-700

gray800

#1B273A

--gray-800

gray900

#111B2B

--gray-900

colorElement-darkest

#67728A

--color-element-darkest

colorElement-dark

#AEC1CC

--color-element-dark

colorElement-mid

#CFD9E0

--color-element-mid

colorElement-light

#E7EBEE

--color-element-light

colorElement-lightest

#F7F9FA

--color-element-lightest

Blue

Blue is our primary color and should be used when you want to highlight a primary action.

blue100

#E8F5FF

--blue-100

blue200

#CEECFF

--blue-200

blue300

#98CBFF

--blue-300

blue400

#40A0FF

--blue-400

blue500

#036FE3

--blue-500

blue600

#0059C8

--blue-600

blue700

#0041AB

--blue-700

blue800

#003298

--blue-800

blue900

#002A8E

--blue-900

colorBlue-lightest

#E8F5FF

--color-blue-lightest

colorBlue-light

#98CBFF

--color-blue-light

colorBlue-mid

#036FE3

--color-blue-mid

colorBlue-base

#0059C8

--color-blue-base

colorBlue-dark

#0041AB

--color-blue-dark

Green

Green is used to highlight positive actions or messages. E.g. when showing a success message, a save action, or a marking a step as complete.

green100

#EAF9E8

--green-100

green200

#CDF3C6

--green-200

green300

#9ED696

--green-300

green400

#5DB057

--green-400

green500

#008539

--green-500

green600

#006D23

--green-600

green700

#00550C

--green-700

green800

#004700

--green-800

green900

#003F00

--green-900

colorGreen-dark

#00550C

--color-green-dark

colorGreen-base

#006D23

--color-green-base

colorGreen-mid

#008539

--color-green-mid

colorGreen-light

#9ED696

--color-green-light

colorGreen-lightest

#EAF9E8

--color-green-lightest

Red

Red is used to highlight negative actions or messages. E.g. when performing a destructive action such as deleting content, for highlighting validation or application error messages, or for showing statuses with a negative context.

red100

#FFF2F2

--red-100

red200

#FFE0E0

--red-200

red300

#FFB1B2

--red-300

red400

#FF707D

--red-400

red500

#DA294A

--red-500

red600

#BD002A

--red-600

red700

#990017

--red-700

red800

#7F0010

--red-800

red900

#72000E

--red-900

colorRed-dark

#990017

--color-red-dark

colorRed-base

#BD002A

--color-red-base

colorRed-mid

#DA294A

--color-red-mid

colorRed-light

#FFB1B2

--color-red-light

colorRed-lightest

#FFF2F2

--color-red-lightest

Purple

Purple is used sparingly as a generic highlight color. E.g. when highlighting premium value or trials.

purple100

#F7F2FF

--purple-100

purple200

#EDE3FF

--purple-200

purple300

#D1BBFF

--purple-300

purple400

#AE89FF

--purple-400

purple500

#8553E7

--purple-500

purple600

#6C3ECF

--purple-600

purple700

#5127B5

--purple-700

purple800

#3E16A4

--purple-800

purple900

#340E9C

--purple-900

colorPurple-dark

#5127B5

--color-purple-dark

colorPurple-base

#6C3ECF

--color-purple-base

colorPurple-mid

#8553E7

--color-purple-mid

colorPurple-light

#D1BBFF

--color-purple-light

colorPurple-lightest

#F7F2FF

--color-purple-lightest

Orange

Orange is used to highlight actions or messages which require attention but don't necessarily have a negative context. E.g. showing a draft/unpublished state, or showing a gentle warning message rather than an error message.

orange100

#FFF2E4

--orange-100

orange200

#FDE5C0

--orange-200

orange300

#FDB882

--orange-300

orange400

#F07F23

--orange-400

orange500

#CC4500

--orange-500

orange600

#B12D00

--orange-600

orange700

#892300

--orange-700

orange800

#731A00

--orange-800

orange900

#631C00

--orange-900

colorOrange-dark

#B12D00

--color-orange-dark

colorOrange-base

#CC4500

--color-orange-base

colorOrange-mid

#F07F23

--color-orange-mid

colorOrange-light

#FDE5C0

--color-orange-light

colorOrange-lightest

#FFF2E4

--color-orange-lightest

Yellow

Yellow is used very sparingly. Use only when other colors aren't applicable or are already taken in a specific context.

yellow100

#FEF9DF

--yellow-100

yellow200

#FFF6CC

--yellow-200

yellow300

#FFE993

--yellow-300

yellow400

#FFD960

--yellow-400

yellow500

#FFC835

--yellow-500

yellow600

#EAAF09

--yellow-600

yellow700

#B78300

--yellow-700

yellow800

#956300

--yellow-800

yellow900

#7F5200

--yellow-900

colorYellow-dark

#956300

--color-yellow-dark

colorYellow-base

#EAAF09

--color-yellow-base

colorYellow-mid

#FFC835

--color-yellow-mid

colorYellow-light

#FFD960

--color-yellow-light

colorYellow-lightest

#FFF6CC

--color-yellow-lightest

Black

colorBlack

#0C141C

--color-black

White

colorWhite

#ffffff

--color-white

Accessibility

Black text (anything darker than gray-800) is WCAG AA accessible on shades ranging from 100 to 400, white text is accessible on colors from 500 to 900.

blue100

blue200

blue300

blue400

blue500

blue600

blue700

blue800

blue900

gray100

gray200

gray300

gray400

gray500

gray600

gray700

gray800

gray900

green100

green200

green300

green400

green500

green600

green700

green800

green900

orange100

orange200

orange300

orange400

orange500

orange600

orange700

orange800

orange900

purple100

purple200

purple300

purple400

purple500

purple600

purple700

purple800

purple900

red100

red200

red300

red400

red500

red600

red700

red800

red900

yellow100

yellow200

yellow300

yellow400

yellow500

yellow600

yellow700

yellow800

yellow900

Combining shades

When combining multiple shades of the same color, keep to the following accessible combinations. The same combinations are possible across colors (with yellow being the only exception).

600 on 100

600 on 200

700 on 300

300 on 900

500 on white

500 on gray100

600 on 100

600 on 200

700 on 300

300 on 900

500 on white

500 on gray100

600 on 100

600 on 200

700 on 300

300 on 900

500 on white

500 on gray100

600 on 100

600 on 200

700 on 300

300 on 900

500 on white

500 on gray100

600 on 100

600 on 200

700 on 300

300 on 900

500 on white

500 on gray100

800 on 100

800 on 200

900 on 300

300 on 900

800 on white

800 on gray100

Color system

Colors overview

Semantic

Gray

Blue

Green

Red

Purple

Orange

Yellow

Black

White

Accessibility

Combining shades

Help improve this page