Primary key colors

The primary key color is used to derive roles for key components across the UI, such as the FAB, prominent buttons, active states, as well as the tint of elevated surfaces.

Secondary key colors

The secondary key color is used for less prominent components in the UI such as filter chips, while expanding the opportunity for color expression.

Tertiary key colors

The tertiary key color is used to derive the roles of contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element. The tertiary color role is left for teams to use at their discretion and is intended to support broader color expression in products.

Error key colors

In addition to the accent and neutral key color, the color system includes a semantic color role for error, again in the form of the error role itself, plus an on-error, error container, and on-error container role.

Neutral key colors

The neutral key color is used to derive the roles of surface and background, as well as high emphasis text and icons.

The neutral variant key color is used to derive medium emphasis text and icons, surface variants, and component outlines.