Color

Colors Anatomy

The core Blue family serves as the primary action, guiding users on their journey.

Blue Family

Neutral grays provide a backdrop of light and dark themes.

Gray Family

Extended colors are used sparingly for emphasis, impact, and functional alerts.

Extended Family

Accessibility

The color families in our palette contain ten values from 10 to 100. White and Black sit outside those values. Black text is WCAG AA accessible on colors ranging from 10 to 50. White text is accessible on colors from 60 to 100.

Interaction States

Hover

The hover state is one full step lighter for values between 100 and 70, and one full step darker for values between 60 and 10. For example, the Blue 60 hover state is Blue 70. The exception is that White shares the same hover state as Gray 10, and Black shares the same hover state as Gray 100.

Active

The active state is two full steps lighter for values between 100 and 70, and two full steps darker for values between 60 and 10. For example, the Blue 60 active state is Blue 80. The exception is that White shares the same active state as Gray 10, and Black shares the same active state as Gray 100.

Focus

The focus state usually appears as a Blue 60 border in the light theme and as a White border in the dark theme.

Disabled

Disabled components are unavailable for interaction, so they don’t receive hover or focus and are not subject to WC3 contrast compliance standards. For the dark themes, disabled values are two full steps lighter than their respective background. For light themes, they are two full steps darker. The exception is that the White theme disabled value is Gray 30.

Color Palettes

Blue and Gray

Blue		Gray
Blue 100	`#001433`	Gray 100	`#161616`
Blue 90	`#002255`	Gray 90	`#262626`
Blue 80	`#003D99`	Gray 80	`#393939`
Blue 70	`#0052CC`	Gray 70	`#525252`
Blue 60	`#0066ff`	Gray 60	`#6F6F6F`
Blue 50	`#448FFF`	Gray 50	`#8D8D8D`
Blue 40	`#66A3FF`	Gray 40	`#A8A8A8`
Blue 30	`#99C2FF`	Gray 30	`#C6C6C6`
Blue 20	`#CCE0FF`	Gray 20	`#E0E0E0`
Blue 10	`#EEF5FF`	Gray 10	`#F4F4F4`

Red and Green

Red		Green
Red 100	`#2D0709`	Green 100	`#071908`
Red 90	`#520408`	Green 90	`#022D0D`
Red 80	`#750E13`	Green 80	`#044317`
Red 70	`#A2191F`	Green 70	`#0E6027`
Red 60	`#DA1E28`	Green 60	`#198038`
Red 50	`#FA4D56`	Green 50	`#24A148`
Red 40	`#FF8389`	Green 40	`#42BE65`
Red 30	`#FFB3B8`	Green 30	`#6FDC8C`
Red 20	`#FFD7D9`	Green 20	`#A7F0BA`
Red 10	`#FFF1F1`	Green 10	`#DEFBE6`

Purple and Others

Purple		Others
Purple 100	`#1B0F30`	Yellow	`#F1C21B`
Purple 90	`#520408`	Black	`#000000`
Purple 80	`#750E13`	White	`#ffffff`
Purple 70	`#A2191F`
Purple 60	`#DA1E28`
Purple 50	`#FA4D56`
Purple 40	`#FF8389`
Purple 30	`#FFB3B8`
Purple 20	`#E8DAFF`
Purple 10	`#F6F2FF`