Color

Color Guidelines

BodyText Colors

Layout Colors

Action Colors

Status Colors

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.

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.

Primary Color Palette

Blue

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

Neutral

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

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.

Yellow