Material Design

Material is the metaphor.

Material is the metaphor. Paper, ink, and light, given real physics. Paper that lifts under your cursor, ink that ripples under your tap, a grid you can feel even when it isn't drawn.

See the system

The four rules

8dp grid

Every margin, padding, and dimension snaps to multiples of 8 density-independent pixels.

Elevation

A paired ambient + key-light shadow gives every surface a real, numbered depth in dp.

Ripple

Touch feedback as an ink-like circle expanding outward from the exact point of contact.

FAB

A circular, elevated button reserved for the one action that matters most on a screen.

Where you see it

Material has been the default skin of Android since Lollipop (5.0, 2014), and the house style of Google’s own product suite ever since — Gmail, Drive, Photos, Maps. It survives today across the Android third-party app ecosystem (Material Components for Android, Flutter’s Material widgets) and on the web through Material-UI/MUI, used in countless dashboards and admin panels that want to read as instantly Google-credible.

Android since LollipopGmail / Drive / Photos / MapsMaterial-UI / MUI dashboardsFlutter Material widgetsAndroid third-party apps
Indigo 500
Pink A200
Red 500
Blue 500

Other surfaces in this system

Build on the same physics

Every surface here has a real, numbered depth — browse the rest of the multiverse, or keep going to the next style.