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.com    Floating 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
08
Hangzhou West18 / 22 Signed for
16:40
12
Binjiang3 / 18 Signed for
18:10
15
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

Login
Email
you@example.com
Password
••••••••
Login
Forgot your password?
Cross-platform product

Scroll sideways to explore the full example

Photo
Moved to "Favorites"Undo
GalleryAlbumShareSearch
Further reading
Material DesignMaterial Design ↗