The backdrop has a front and back layer.

Distinguish between these two layers:
- The baseline back layer color is your primary color 
- Baseline front layer is white

University of Michigan - Ann Arbor

Arizona State University

- Usage in UI
- Top and bottom app bars
- Backdrop
- Color variations

Applying color to UI

Material Design Documentation

The fundamental skill of coloring interface designs is being able to modify one base color into many different variations. Many great-looking interfaces is that they often have darker and lighter variations on a particular theme color.

Darker variations:
- Brightness decreases.
- Saturation increases.
- Hue (often) shifts towards a luminosity minimum (red, green, or blue).

Lighter variations:
- Brightness increases.
- Saturation decreases.
- Hue (often) shifts towards a luminosity maximum.

Color Variations

The way color is applied to the top and bottom app bars:
- Helps users identify them 
- Understand their relationship to surrounding elements

Top and Bottom App Bars

Principles and guidelines that "describe a variety of UI components and elements where color application is important."
- Consistent
- Distinct
- Intentional 

Learn Before

Related