Material Design 3

A comprehensive design system by Google combining Swiss rationalism with tactile material metaphors. Bold colors, elevation hierarchy, and expressive motion.

Explore Design System Authenticity Checklist
🎨

Material Design 3

Colorful • Elevated • Accessible

📚 What Is Material Design?

History & Evolution

Created by Google in 2014, Material Design bridges Swiss Design rationalism with physical material metaphors. It treats digital interfaces as 3D spaces with realistic light, shadow, and motion.

  • 2014: Material Design introduced
  • 2018: Material 2 — elevated surfaces
  • 2021: Material 3 — Material You, dynamic color
  • 2024+: Continued refinement

🎯 Core Principles

  • User-Centric: Accessibility-first design
  • Unified: Consistent across platforms
  • Personalization: Dynamic color theming
  • Motion: Purposeful animations (200-400ms)
  • Elevation: Depth through shadow layers
  • Inclusive: WCAG AA/AAA compliant

⭐ Key Differentiators from Swiss Design

Grid System

Swiss: Asymmetric | Material: Symmetric, 8dp baseline

Color

Swiss: Limited | Material: Bold, vibrant palettes

Depth

Swiss: Flat 2D | Material: Elevation, 3D z-axis

Motion

Swiss: Minimal | Material: Expressive, meaningful

🎨 Material Color System

Material uses tonal palettes (50–900) for every color, ensuring WCAG AA contrast compliance across all combinations.

Primary Palette (Purple)

50
100
200
300
400
500
600
700
800
900

Secondary & Tertiary Accents

Secondary (Teal)

Tertiary (Gold)

✓ Color System Best Practices

  • Use 500 as your base color reference
  • Test all pairs for WCAG AA contrast (4.5:1 minimum)
  • Light tones (50–300) for surfaces and backgrounds
  • Dark tones (600–900) for text and primary actions

📝 Typography Scale

H1 • 96px Light

Headline Large

H2 • 60px Light

Headline Medium

H3 • 48px Regular

Headline Small

H4 • 34px Regular

Title Large

Body • 16px Regular (1.5 line-height)

Body text is the primary text for reading. Use generous line-height and readable widths (45-75 characters). Ensure proper contrast and readable sizing.

Label • 14px Medium

Labels for buttons, form fields, and UI controls

🔝 Elevation & Shadow System

0–24dp elevation levels with layered ambient + directional shadows for realistic depth.

📄

Elevation 1

Subtle

📋

Elevation 2

Cards

🎨

Elevation 4

App bars

⭐

Elevation 6

FABs

🧩 Material Components

Buttons — All States

Filled Button

Primary action

Outlined Button

Secondary action

Text Button

Tertiary action

Cards — Elevation Variants

📊
Outlined

Elevation 0

💳
Elevated

Elevation 4

⭐
Filled

Elevation 6

Chips — Interactive Tags

⚡ Motion & Easing

🎮 Interactive Motion Playground

Click buttons to see Material Design motion in action

🎨

Standard Easing & Durations

Standard Easing

cubic-bezier(0.4, 0, 0.2, 1)

Short Duration

100–150ms

Standard Duration

200–300ms

Long Duration

375–400ms

💎 Material Easing Curves Reference Click to expand

All Material Design Easing Functions

/* Standard Easing - Default for most transitions */
.material-standard {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Emphasized Easing - For entering elements */
.material-emphasized-enter {
  transition: all 0.4s cubic-bezier(0.05, 0.7, 0.1, 1);
}

🔲 8dp Grid System

Grid Visualization

1
2
3
4
5
6
7
8

Each cell = 8dp. Use multiples for all spacing and sizing.

Responsive Breakpoints

Mobile

< 600px • 4-column

Tablet

600–1023px • 8-column

Desktop

≥ 1024px • 12-column

✅ Material Design Authenticity Checklist

Visual & Layout

  • [ ] 8dp grid system used
  • [ ] Elevation hierarchy (0–24dp)
  • [ ] Shadows: ambient + directional
  • [ ] Bold, saturated colors
  • [ ] Roboto font family
  • [ ] Material type scale
  • [ ] Touch targets ≥48×48dp
  • [ ] Responsive layouts

Interaction & Accessibility

  • [ ] Material easing curves
  • [ ] Durations: 100–400ms
  • [ ] Ripple effects present
  • [ ] Focus indicators visible
  • [ ] WCAG AA contrast (4.5:1)
  • [ ] Respects prefers-reduced-motion
  • [ ] Alt text on images
  • [ ] Semantic HTML