← Back
Best viewed on a desktop. Please switch to a larger device.

Material
Design

A design language built on the metaphor of physical paper and ink. Every surface has mass and depth. Shadows are cast by elevation. Motion follows the laws of physics.

M3
Generation
2014
Released
Paper
Metaphor
Elevation 1 - Resting
Text fields, cards at rest
Level 1
Elevation 2 - Contained
Tonal buttons, chips
Level 2
Elevation 3 - FAB
Floating action buttons
Level 3
Elevation 4 - Navigation
Nav drawers, sheets
Level 4
Elevation 5 - Dialogs
Modal dialogs, pickers
Level 5
System

Elevation System

M3 combines shadow depth with tonal surface colour - higher elevation surfaces blend more primary colour into them, reinforcing the z-axis.

1
Level 1
Cards, text inputs
2
Level 2
Tonal buttons
+5% primary
3
Level 3
FAB resting
+8% primary
4
Level 4
Navigation drawers
+11% primary
5
Level 5
Dialogs, pickers
+14% primary
0
Level 0
Flat surface variant
No shadow
Color

Color System - Material You

Role-based tokens: every hue has a container and an "on" variant for text/icons placed on top of it.

Primary #6750A4
On Primary #FFFFFF
Primary Container #EADDFF
On P-Container #21005D
Secondary #625B71
Sec. Container #E8DEF8
Tertiary #7D5260
Tert. Container #FFD8E4
Surface #FFFBFE
Surface Variant #E7E0EC
On Surface #1C1B1F
Outline Variant #CAC4D0
Error #B3261E
Error Container #F9DEDC
Outline #79747E
Inverse Surface #313033
Type

Type Scale

M3 defines named roles - each with fixed size, weight, and tracking tokens - rather than freeform sizing.

Display Large Display Text 57sp · Light · −0.25
Display Medium Display Medium 45sp · Light · 0
Headline Large Headline Large 32sp · Regular · 0
Headline Medium Headline Medium 28sp · Regular · 0
Title Large App Bar / Dialog Title 22sp · Regular · 0
Title Medium List Primary & Card Titles 16sp · Medium · +0.15
Body Large Primary reading text - comfortable at body sizes for long-form content. 16sp · Regular · +0.5
Body Medium Secondary reading text, card descriptions, captions. 14sp · Regular · +0.25
Label Large Button labels, navigation labels 14sp · Medium · +0.1
Label Medium Chip labels, helper text 12sp · Medium · +0.5
Label Small Overlines, timestamps, badges 11sp · Medium · +0.5
Components

UI Components

Buttons & FAB

Text Fields

Full Name
Enter your legal name
Email Address
Message
Describe your project briefly
Chips

Selection Controls

Switches
Notifications
Push alerts
Dark Mode
System appearance
Auto-sync
Background data
Checkboxes
✓
✓
Radio Buttons
Progress
Upload 72%
Storage 45%
72%
45%
20%
Navigation

Navigation Patterns

Top App Bar + Navigation Bar
Inbox

Page content area

🏠 Home
🔍 Search
❤️ Saved
👤 Profile
Primary Tabs
🏠Overview
⭐Features
💳Pricing
📚Docs
Active tab content - transitions use the Shared Axis pattern along the horizontal axis.
Navigation Drawer

Material App

[email protected]

Main
🏠Home
📊Analytics3
👥Audience
Account
⚙️Settings
🔔Notifications

Navigation Drawer

Slides from the leading edge on mobile and can be permanently visible on wider screens. Active items use the secondary container colour as their indicator background.

Cards

Card Variants

Three variants - Elevated, Filled, Outlined - each signalling a different level of emphasis and context.

🎨
Elevated Card
Design Systems

Shadow elevation separates this card clearly from the background - highest-emphasis content.

🌊
Filled Card
Expressive Motion

Surface-variant fill creates gentle separation without a shadow. Good for grouped content.

🌸
Outlined Card
Accessible Colour

A border defines the card without elevation - ideal for selectable or low-emphasis states.

Recent Activity

See all
🎨

Design System Updated

New colour tokens added to primary palette

2m ago
›
📊

Analytics Report Ready

Q1 2026 dashboard compiled

1h ago
›
🌸

Design Review Scheduled

Thursday 3:00 PM with product team

3h ago
›
🚨

Accessibility Issue Flagged

Contrast ratio below 4.5:1 on button label

Yesterday
›
Overlays

Dialogs, Snackbars & Sheets

Alert Dialog
⚠️

Discard changes?

Your unsaved changes will be permanently lost. This action cannot be undone.

Snackbars

Message sent successfully

Undo

Failed to connect. Check your network.

Retry
Modal Bottom Sheet

Share this item

📋Copy link
💬Send message
📧Send via email
⬇️Save to device
📤More options
Layout

Full Application Layout

Analytics Dashboard
👤

Dashboard

[email protected]

📊Overview
👥Users
📦Products
💳Billing
🔔Alerts4
⚙️Settings
Overview
👥
12,481
Total Users
↑ 12% this month
💰
$48.2k
Revenue
↑ 8.4%
🚨
23
Open Issues
↑ 3 new today
⚡
99.8%
Uptime
All systems normal

Weekly Traffic

Principles

Core Principles

01 · Material

Material is the Metaphor

Surfaces behave like physical paper stacked in 3D space. They cast shadows based on their elevation above the base plane. Nothing floats without reason.

02 · Bold

Bold, Graphic, Intentional

Strong typographic hierarchy, deliberate whitespace, and purposeful colour guide the user's attention. Every visual decision encodes priority.

03 · Motion

Motion Has Meaning

Transitions tell stories about spatial relationships. Shared Axis, Container Transform, and Fade Through make navigation feel predictable and physical.

04 · Adaptive

Material You - Dynamic Colour

M3 extracts tonal palettes from the user's wallpaper, generating a personalised colour scheme that still satisfies contrast and accessibility requirements.