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

Brand colors emphasize brand presence by associating specific interface actions and information with the brand identity. The application of brand color in a user interface can range from bold and prominent to subtle and sophisticated.

Arizona State University

University of Michigan - Ann Arbor

Google

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 communicates the meaning of different UI elements. For example, a weather app displayed colors indicating current weather conditions.

Meaning with Color in UI

Brand Color Application in UI

Color can communicate the current state or changes in state of an app, its components, and its elements. For example, color can indicate whether a button is enabled or disabled. When using color to indicate state changes, ensure the differences are noticeable. Because subtle color differences may be missed by users, it is best to indicate a change of state in multiple ways, such as pairing the color change with an icon or a change in the element's location.

Learn Before

Related

Learn After