The Color System

Primary Color

A primary color is the color displayed most frequently across your app’s screens and components.

If you don’t have a secondary color, your primary color can also be used to accent elements.

Dark and light primary variants

You can make a color theme for your app using your primary color, as well as dark and light primary variants.

Distinguish UI elements

To create contrast between UI elements, such as distinguishing a top app bar from a system bar, you can use light or dark variants of your primary color on each elements. You can also use variants to distinguish elements within a component, such different variants used on a floating action button container, and the icon within it.

Secondary Color

A secondary color provides more ways to accent and distinguish your product. Having a secondary color is optional, and should be applied sparingly to accent select parts of your UI.

Secondary colors are best for:

  • Floating action buttons
  • Selection controls, like sliders and switches
  • Highlighting selected text
  • Progress bars
  • Links and headlines
  • Dark and light secondary variants
  • Just like the primary color, your secondary color can have dark and light variants. You can make a color theme by using your primary color, secondary color, and dark and light variants of each color.