Google Design Language
Material Design is a design language developed by Google. Grounded in the physical world, it translates the texture of paper and ink into digital surfaces — using depth, shadow, and motion as the vocabulary of a living interface.
Core Principle
Material is the metaphor. A unifying theory of a rationalized space and a system of motion grounded in tactile reality.
Google Material Design Guidelines
Core Concept
Every surface occupies a position on the z-axis. Shadow depth communicates elevation above the base material layer. Click a card to inspect its shadow spec.
box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2),0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12)
Each dp level uses two shadow layers: a key shadow (directional) and an ambient shadow (soft, surrounding).
All Material transitions use cubic-bezier(0.4, 0, 0.2, 1) — elements decelerate into their resting state.
On hover, surfaces lift -translate-y-1 and upgrade their shadow level, simulating physical lift off the plane.
Component Library
Production-ready UI elements following the full Material Design specification — buttons, cards, inputs, and FABs.
Contained (dp2 → dp8 on hover)
Outlined (no elevation)
Text (ghost — no border, no shadow)
Icon buttons
Visual Language
Color is applied with purpose: to convey meaning, establish hierarchy, and create consistent brand identity across surfaces.
Primary
#6200ee
Secondary
#03dac6
Error
#b00020
Neutral
#212121
Pink A400
#ff0266
Yellow A700
#ffde03
Green A700
#00c853
Surface
#ffffff
Background
#fafafa
On Primary
#ffffff
App bars, primary buttons, active states, selected indicators — the dominant brand color.
FABs, selection controls, highlighted inputs — used sparingly for the most important accent.
A400 accent — notifications, badges, emphasis overlays. Never use as a background.
Navigation Pattern
Material bottom navigation bars allow switching between top-level destinations in an app. They appear at dp8 and contain 3–5 items.
Home
Active destination
Click tabs to switch active destination
dp8
Elevation
Bottom nav floats at dp8 above content
3–5
Destinations
Minimum 3, maximum 5 navigation items
56dp
Height
Standard height is 56dp (56px at 1x)
Type Scale
Material Design uses the Roboto typeface. The type scale provides 13 named styles spanning Display through Caption.
Philosophy
Three core principles guide every Material decision — from shadow depth to motion curves.
A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink.
Typography, grids, space, scale, color, and imagery guide visual treatments and signal hierarchy. These elements do far more than please the eye.
Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion — clarifying relationships.