foundations / null

Color

Color Guidelines

BodyText Colors

Default BodyText

Neutral400#141414

Subdued BodyText

Neutral90#737475

Link

Blue400#2270ee

Layout Colors

Page Background

Neutral0#ffffff

Alt Background

Neutral10#fcfcfc

Accent

Neutral40#f5f5f5

Border

Neutral60#dfe0e1

Global Header

Neutral300#2d2e31

Action Colors

Primary Action

Blue400#2270ee

Neutral Action

Neutral50#eeeeee

Negative Action

Red500#e13212

Status Colors

Critical

Red400#f94d32

Warning

Yellow400#ffc902

Success

Green500#18a761

Info

Blue400#2270ee

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 Blue400

Neutral90 on Neutral40

Neutral80 on White

White on Yellow

Black on Red400

Black on Blue400

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#ecf4fd

Blue200#a9d1ff

Blue300#56a4ff

Blue400#2270ee

Blue500#1360d9

Blue600#004cc3

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

Neutral80#949596

Neutral90#737475

Neutral100#606162

Neutral200#444445

Neutral300#2d2e31

Neutral400#141414

Neutral500#040404

System Colors

Red

Red is used to indicate negative trends, critical/error messages, and destructive events. It should be used sparingly on high priority situations. Lower priority warnings should utilize yellow.

Red100#ffece9

Red200#ffb2a0

Red300#ff745f

Red400#f94d32

Red500#e13212

Red600#bf2a00

Yellow