Usage
These guidelines describe a variety of UI components and elements where color application is important.
Top and bottom app bars
The way color is applied to top and bottom app bars helps users identify them and understand their relationship to surrounding elements.
Backdrop
The backdrop has a front and back layer. To distinguish between these two layers, the baseline back layer color is your primary color and the baseline front layer is white.
Sheets and surfaces
The baseline color for sheets and surfaces, such as bottom sheets, navigation drawers, menus, dialogs, and cards is white. These components can incorporate color to create contrast between other surfaces. Contrast can make surface edges apparent, indicating elevation differences when surfaces overlap.
Buttons, chips and selection controls
Buttons, chips and selection controls can be emphasized by applying your primary or secondary color to them.
Color categories
- The baseline color for contained, text and outlined buttons is your primary color.
- The baseline color for floating action buttons and extended floating action buttons is your secondary color.
- The baseline color for selection controls is your secondary color.
Typography and iconography
Color can express whether text has greater, or lesser, importance relative to other text. Color also ensures text remains legible when placed above imagery or backgrounds, which can make it difficult to read the text in front of them.