foundations / null

Color

Color Guidelines

BodyText Colors

Default BodyText

Neutral400#141414

Subdued BodyText

Neutral90#737475

Link

Blue500#0265dc

Layout Colors

Page Background

Neutral0#ffffff

Alt Background

Neutral10#fcfcfc

Accent

Neutral40#f5f5f5

Border

Neutral60#dfe0e1

Global Header

Neutral300#2d2e31

Action Colors

Primary Action

Blue500#0265dc

Neutral Action

Neutral50#eeeeee

Negative Action

Red500#e13212

Status Colors

Critical

Red500#e13212

Warning

Yellow500#ffbe00

Success

Green500#007a4d

Info

Blue500#0265dc

Contrast

When using color, it is strongly encouraged to meet minimum contrast ratios with text and background colors. At minimum, text contrast should meet the WCAG 2.0 AA Large guidelines.

Black on White

Neutral90 on White

White on Blue500

Neutral90 on Neutral40

Neutral80 on White

White on Yellow

Black on Red500

Black on Blue500

Icon Exception

Icons are able to be one color shade below the WCAG AA guidelines. This means that icons can be Neutral 80 on a white background. This should be avoided with icon-only interfaces and with small icons.

Interactive States

Hover

Hover states are typically one shade lighter on dark background colors, and one shade darker on light background colors.

Active and Focus

A blue border is typically used to indicate both focus and active states.

Disabled

In general, the disabled state is denoted with a 60% opacity applied to the element. It is also common for elements to be greyscaled.

Default State Items

Disabled Versions

Primary Color Palette

Blue

Blue is used to denote primary and most interactive elements on the page.

Blue100#e0f2ff

Blue200#b5deff

Blue300#78bbfa

Blue400#3892f3

Blue500#0265dc

Blue600#004491

Neutral

Neutral shades represent the foundation of interfaces. They are used to represent most a page's layout, information, and non-interactive elements.

Neutral0#ffffff

Neutral10#fcfcfc

Neutral20#fafafa

Neutral30#f7f7f7

Neutral40#f5f5f5

Neutral50#eeeeee

Neutral60#dfe0e1

Neutral70#bcbcbd