Material Design

You might say

Give it an Android-style look with layered cards and a ripple when people tap.

Use a systematic component language with clear layers and motionMaterial Design is Google's design system for components, layout, color, type, elevation, and motion. Its value is the shared behavior and accessibility guidance, not making every product look like a Google app. Customize it through a consistent theme while keeping states and structure clear.

Scroll sideways to explore the full example

ROUTE OPSEast China Distribution Center⌕⋮

Demo StatusDistribution TaskRoute and Progress Example

Example

ROUTE 08 · Hangzhou WestExample of sign-in progressArrival time to be confirmed

Tasks to be dispatchedNeed to arrange a driver

About to departView all

ROUTE 12 · BinjiangThe driver has confirmedTime to be confirmed

ROUTE 15 · YuhangWaiting for dispatchTime to be confirmed

ROUTE 19 · Qianjiang New TownLoading completedTime to be confirmed

＋New dispatch

Design Principles

Build from reusable components and tokens
Use elevation only to explain layer relationships
Give every interactive state visible feedback
Let motion connect cause and result
Adapt the system to the brand without breaking consistency

When to use it

Android and cross-platform product
Refer to Android’s component and interaction guidelines.
Large interface needing a mature component system
Email
you@example.comFloating labels can clarify field names and input states.
Team that benefits from documented patterns
A
B
Rapid product work with accessibility requirements
→

When NOT to use it

Copy default components without matching the product's content
Use elevation as decoration
＋✎ButtonLink
Mix several design systems in one flow
＋✎★
Customize each component independently until the system disappears
Purple buttonHot-pink button

History

2014.06

Material Design launches at Google I/O

Paper-like layers, ripple feedback, and the floating action button gave Android a shared system-wide design language.

2015—2017

Material spreads across Google's products

Gmail, Calendar, Maps, and other services adopted the system as the component ecosystem matured across platforms.

2018

Material Theming opens brand customization

Shape, color, and type became easier to customize in response to criticism that every Material app looked the same.

2021

Material You adds dynamic color

Android 12 introduced themes derived from a user's wallpaper, making the system more personal while keeping shared structure.

Anatomy

Content layerFloating layer Brand primary color example ＋ Button Spacing scale

Use container, position, and moderate shading to illustrate who covers whom; intensity adjusts by component relationship

Assign stable color responsibilities to branding, status, and key actions and test readability on different backgrounds

Floating buttons can be used to initiate actions frequently; they do not have to appear on every page

Click feedback can spread outward from the touch point to indicate that the operation has been received

Establish reusable spacing and sizing relationships and allow exceptions for content, language, and accessibility needs

AI Prompt

Material Design interface, indigo primary color with a restrained pink accent, consistent component tokens, elevation that explains layers, floating action button where appropriate, ripple feedback and clear states

Typical use cases

Mobile app

Scroll sideways to explore the full example

ROUTE OPSDistribution task⌕

Routes to be executed8 routes

Hangzhou West18 / 22 Signed for

16:40

Binjiang3 / 18 Signed for

18:10

YuhangWaiting for driver confirmation

To be dispatched

＋

Web dashboard

Scroll sideways to explore the full example

← Article⋮

Why does the paper float

Design Weekly · 6 minutes ago Material uses a surface level to illustrate the overlay relationship: normal content stays on the page, and temporary dialog boxes float above it and interrupt the current task.

Read the full text Share

Component library

Scroll sideways to explore the full example

you@example.com

Password

••••••••

Forgot your password?

Cross-platform product

Scroll sideways to explore the full example

Photo

Moved to "Favorites"Undo

GalleryAlbumShareSearch

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website