Google introduced Material Design in June 2014 at their I/O developer conference. What started as a visual language for Android has evolved into one of the most comprehensive design systems in the industry, spanning mobile apps, web applications, wearables, and embedded interfaces. Material Design gives developers and designers a shared vocabulary — a set of principles, components, and guidelines that produce consistent, usable interfaces across platforms.
With Material Design 3 (also called Material You), launched alongside Android 12, Google pushed the system further. Dynamic color, personalized theming, and updated component shapes make Material 3 feel distinctly different from its predecessors while keeping the same foundational philosophy intact.
Core Principles
Material as Metaphor
Material Design draws inspiration from physical paper and ink. Surfaces have tangible properties: they occupy space, cast shadows, can stack on top of each other, and respond to touch. Unlike pure flat design, Material uses depth through elevation to communicate hierarchy and relationships between elements. A floating action button sits above a card, which sits above the background — each level communicating its relative importance.
Bold, Graphic, Intentional
Large typography, deliberate color choices, generous whitespace, and edge-to-edge imagery define the visual tone. Every element serves a purpose. Decorative elements without function get eliminated. The design language borrows from print design traditions — grid-based layouts, typographic scale, and strong visual anchors guide the user through content.
Motion Provides Meaning
Animation in Material Design is not decoration. Every motion communicates spatial relationships and causality. A card expanding to fill the screen shows the user exactly where the content came from. A button ripple confirms that a tap was registered. Transitions between screens maintain spatial awareness — the user always understands where they are in the application hierarchy.
Elevation and the Shadow System
Elevation is one of Material Design’s most distinctive features. Every surface exists at a specific elevation measured in density-independent pixels (dp). Higher surfaces cast larger, softer shadows. This creates a visual hierarchy that users intuitively understand: important elements float above less important ones.
/* Material Design elevation levels */
/* Level 0: Flat surface */
.surface { box-shadow: none; }
/* Level 1: Cards, search bars (1dp) */
.card {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.08);
}
/* Level 2: Raised buttons, cards on hover (3dp) */
.card:hover {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12),
0 2px 4px rgba(0, 0, 0, 0.08);
}
/* Level 3: App bar, FAB resting (6dp) */
.fab {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15),
0 3px 6px rgba(0, 0, 0, 0.1);
}
/* Level 4: Navigation drawer, dialogs (24dp) */
.dialog {
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16),
0 12px 24px rgba(0, 0, 0, 0.12);
}Material Design 3 introduced a tonal surface approach alongside shadows. Instead of relying solely on shadow depth, surfaces can use tonal color overlays to indicate elevation, which works better in dark themes and on OLED screens where shadows are less visible.
Color System
Material Design 2: Primary and Secondary
The original Material color system uses a primary color for app bars and major UI elements, and a secondary (accent) color for interactive elements like FABs, toggles, and selection controls. Google provides a palette with shades ranging from 50 (lightest) to 900 (darkest) for each hue, ensuring accessible contrast ratios at every level.
Material Design 3: Dynamic Color
Material You introduced dynamic color extraction. On Android 12 and later, the system pulls colors from the user’s wallpaper and generates a complete color scheme automatically. This scheme includes primary, secondary, tertiary, error, and neutral tones, each with multiple variants for surfaces, text, and borders.
/* Material 3 color tokens (CSS custom properties) */
:root {
/* Primary */
--md-sys-color-primary: #6750A4;
--md-sys-color-on-primary: #FFFFFF;
--md-sys-color-primary-container: #EADDFF;
--md-sys-color-on-primary-container: #21005E;
/* Secondary */
--md-sys-color-secondary: #625B71;
--md-sys-color-on-secondary: #FFFFFF;
--md-sys-color-secondary-container: #E8DEF8;
/* Surface */
--md-sys-color-surface: #FFFBFE;
--md-sys-color-on-surface: #1C1B1F;
--md-sys-color-surface-variant: #E7E0EC;
/* Error */
--md-sys-color-error: #B3261E;
--md-sys-color-on-error: #FFFFFF;
}For web developers, Material 3 color tokens can be generated using Google’s theme builder tool. The generated tokens work as CSS custom properties, enabling theme switching with a single class change on the root element.
Typography: The Roboto Scale
Material Design defines a typographic scale with specific roles: Display, Headline, Title, Body, and Label. Each role has Large, Medium, and Small variants, producing 15 distinct text styles that cover every UI need.
/* Material 3 type scale (simplified) */
.display-large {
font-family: 'Roboto', sans-serif;
font-size: 57px;
line-height: 64px;
letter-spacing: -0.25px;
}
.headline-medium {
font-size: 28px;
line-height: 36px;
letter-spacing: 0;
}
.body-large {
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
}
.label-medium {
font-size: 12px;
line-height: 16px;
letter-spacing: 0.5px;
font-weight: 500;
}Roboto remains the default typeface, but Material 3 encourages brand customization. Google’s own products have moved toward Google Sans, and the system supports any typeface that fits your brand identity.
Components
Material Design specifies dozens of reusable components, each with detailed guidelines for sizing, spacing, behavior, and accessibility. Here are the most commonly used ones:
Buttons
Material 3 defines five button types: Filled, Outlined, Text, Elevated, and Tonal. Each has a specific use case. Filled buttons are for primary actions. Outlined buttons work for secondary actions. Text buttons serve low-emphasis actions like “Cancel” or “Learn more.”
<!-- Material 3 button variants using Web Components -->
<md-filled-button>Save changes</md-filled-button>
<md-outlined-button>Discard</md-outlined-button>
<md-text-button>Learn more</md-text-button>
<md-filled-tonal-button>Add to cart</md-filled-tonal-button>Cards
Cards are surfaces that group related content and actions. Material 3 offers Elevated, Filled, and Outlined card variants. Cards should contain a clear hierarchy: a visual header, supporting text, and action buttons.
Navigation
Material provides Navigation Bar (bottom, mobile), Navigation Rail (side, tablet), and Navigation Drawer (side, desktop) components. Responsive applications switch between these based on screen width, maintaining the same navigation structure across breakpoints.
Dialogs and Sheets
Dialogs interrupt the user to request a decision or provide critical information. Bottom sheets slide up from the screen edge to present secondary content. Both use scrim overlays to focus attention and prevent interaction with background content.
Implementing Material Design on the Web
Material Web (Web Components)
Google’s official Material Web library provides Material 3 components as Web Components. These work with any framework or no framework at all, since Web Components are a native browser standard.
npm install @material/web// Import specific components
import '@material/web/button/filled-button.js';
import '@material/web/textfield/outlined-text-field.js';
import '@material/web/checkbox/checkbox.js';<md-outlined-text-field
label="Email"
type="email"
required>
</md-outlined-text-field>
<md-checkbox
touch-target="wrapper">
</md-checkbox>MUI (React)
MUI (formerly Material-UI) is the most popular React implementation of Material Design. It provides a complete set of pre-built React components with TypeScript support, theming, and extensive customization options. MUI 5 uses Emotion for styling by default and supports Material Design 3 concepts through its theming system.
import { Button, TextField, Card, CardContent, Typography } from '@mui/material';
import { ThemeProvider, createTheme } from '@mui/material/styles';
const theme = createTheme({
palette: {
primary: { main: '#6750A4' },
secondary: { main: '#625B71' },
},
shape: { borderRadius: 12 },
});
function App() {
return (
<ThemeProvider theme={theme}>
<Card variant="outlined">
<CardContent>
<Typography variant="h5">Sign up</Typography>
<TextField label="Email" variant="outlined" fullWidth />
<Button variant="contained">Create account</Button>
</CardContent>
</Card>
</ThemeProvider>
);
}Angular Material
Angular Material is Google’s own implementation for the Angular framework. It follows Material Design specifications closely and integrates deeply with Angular’s dependency injection, forms, and routing systems. The Component Dev Kit (CDK) provides low-level utilities for building custom components that follow Material behavior patterns.
Material Design vs Other Design Systems
Material Design exists alongside several other major design systems, each with distinct strengths:
- Apple Human Interface Guidelines (HIG) — Apple’s system emphasizes clarity, deference to content, and depth. HIG relies more on blur effects (vibrancy) and less on shadows compared to Material. It targets Apple platforms exclusively
- Fluent Design (Microsoft) — Fluent uses depth, light, motion, and material (acrylic transparency). It feels more transparent and layered than Material, with reveal-highlight effects that respond to cursor position
- Ant Design — Popular in enterprise and Asian markets, Ant Design is pragmatic and data-dense. It favors information density over whitespace and provides a massive component library optimized for admin dashboards and B2B tools
- Carbon Design System (IBM) — Carbon is built for enterprise applications with an emphasis on accessibility, data visualization, and consistent cross-product experiences across IBM’s software portfolio
Material Design’s main advantage is breadth. It covers more use cases, platforms, and component types than most alternatives. Its main criticism is that heavy adoption produces apps that all look like Google products, reducing brand distinctiveness.
Customizing Material Design for Your Brand
Material 3’s theming system is specifically designed for brand customization. You control the color scheme, typography, and component shapes without breaking the design system’s internal consistency.
/* Customized Material 3 theme */
:root {
/* Brand colors replace the defaults */
--md-sys-color-primary: #c2724e;
--md-sys-color-on-primary: #ffffff;
--md-sys-color-primary-container: #ffdbc9;
/* Custom shape (rounded corners) */
--md-sys-shape-corner-small: 4px;
--md-sys-shape-corner-medium: 8px;
--md-sys-shape-corner-large: 16px;
/* Custom font */
--md-sys-typescale-body-large-font: 'IBM Plex Sans', sans-serif;
}The key is changing the design tokens while keeping the structural relationships intact. Material’s elevation levels, spacing rhythm, and component proportions work together as a system. Swapping colors and fonts is safe. Changing fundamental spacing ratios or removing elevation can break the internal logic.
Accessibility in Material Design
Material Design builds WCAG compliance into its specifications. Color contrast ratios meet AA standards by default. Touch targets are minimum 48x48dp. Focus indicators are visible and consistent. Components include proper ARIA attributes and keyboard navigation patterns.
The dynamic color system in Material 3 automatically checks contrast ratios when generating color schemes. If a generated color fails accessibility standards, the system adjusts the tone values to maintain readability. This makes it harder to accidentally create inaccessible color combinations.
Frequently Asked Questions
Should I use Material Design for non-Google products?
It depends on your goals. Material provides a proven, well-documented design system that reduces design decisions and speeds up development. For internal tools, admin panels, and MVPs, Material is excellent — you get a polished look with minimal design effort. For consumer-facing products where brand identity is critical, consider customizing Material’s tokens heavily or using it as a structural foundation with your own visual layer on top.
What is the difference between Material Design 2 and Material Design 3?
Material 3 (Material You) introduces dynamic color theming, updated component shapes with more rounded corners, new component variants (like tonal buttons), and a revised color system based on tonal palettes rather than fixed color swatches. The principles remain the same, but Material 3 feels softer, more personalized, and less rigidly geometric than Material 2.
How does Material Design affect performance?
The implementation library you choose matters more than the design system itself. MUI adds significant JavaScript bundle size to React applications. Material Web Components are lighter since they use native browser APIs. For performance-critical projects, consider implementing only the components you need rather than importing an entire library. Tree-shaking helps, but selective imports are even better.
Can I mix Material Design with other design systems?
Mixing full design systems typically creates visual inconsistency. However, borrowing specific concepts — elevation logic from Material, typography scale from your brand guidelines, spacing from an 8px grid — is common practice. Many teams use Material as a starting point and gradually replace components with custom designs as their design system matures. If you are building with a modern framework, most Material libraries support incremental adoption.
Material Design represents one of the most thorough attempts to systematize digital interface design. Whether you adopt it wholesale, borrow its principles, or study it as a reference, the thinking behind elevation, motion, color systems, and component architecture will make you a better developer and designer. Understanding how Google approaches design at scale offers lessons that apply far beyond their ecosystem.
