產品研發流程 Product > :art: 設計流程 Design > :rainbow: 顏色 Colors

繁體 | 简体 | English



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: