Brands that want to convey a sense of energy and excitement use color in a bold way. The apps should reflect that same approach while preserving content legibility and usability.

Bold Use of Color for Brands

"State changes subtly can reinforce brand presence."

State Changes for Brands 

Brands can use color in subtle ways, whether that means conveying:
- Sophistication
- Emphasizing content
- Suiting content in some other way

When using color with subtlety:
- Ensure that interactive areas and state changes remain identifiable and easily seen

Subtle Use of Color Usage for Brands

Progress indicators are a subtle but powerful place to incorporate brand color:
- Tie function of the app to the brand

Progress Indicators for Brands 

A placeholder UI is displayed while screen content loads:
- A brand color here assures users that they are still in the app as it loads

Placeholder UI for Brands 

"Features can be highlighted to ensure the user sees them by using color to guide user focus"

Feature Discovery for Brands

"Color used onboarding to connect content to branding"

Onboarding and Brands

"Launch screens can be a celebratory moment that uses color in bold ways."

Launch Screens for Brands

Your brand can use color to emphasize its presence. Brand colors can be used in key moments, in ways that associate those colors with specific actions and information.

The brand color application can be bold and brash, subtle and sophisticated, or anywhere in between. Your brand’s personal approach to color should be reflected in your app by: 

- Bold
- Launch Screens
- Onboarding
- Feature Discovery
- Subtle Use of Color
- Placeholder
- Progress Indicatios
- State Changes 

Arizona State University

University of Michigan - Ann Arbor

Color helps express hierarchy, establish a brand presence, give meaning, and indicate element states.
- Hierarchy 
- Brand
- Meaning 
- State

Color Usage

In Material Design, color draws attention to specific elements on-screen. When an element’s color contrasts with its surroundings, that element stands out, so users can tell it’s important. Because color themes vary:
- bold and bright, 
- monochromatic or muted

For example, 
- Black icons stand out when they are placed against a white background
- Multicolored cards draw attention to themselves when placed next to monochromatic colors

Hierarchy in Material Design

Color can provide information about the state of an app, its components, and its elements. 

This includes:

- Current state of an element or component, such as whether a button is enabled or disabled
- Changes in state to an app, component, or element
- Color should be noticeable when indicating state changes, such as subtle differences - Color may be missed so it’s best to indicate a change of state in more than one way, such as displaying an icon or moving the location of an element

State of an App Determined by Web Elements

Color communicates the meaning of different UI elements. For example, a weather app displayed colors indicating current weather conditions.

Learn Before

Related

Learn After