Material Design 3
A comprehensive design system built on the metaphor of physical materials, where layered paper surfaces, bold color, and responsive motion create intuitive and beautiful interfaces.
Typography
A systematic hierarchy from Display to Label, with calibrated size, weight, and tracking at every level.
Color System
Every color has a semantic purpose. The tonal system ensures harmony, accessibility, and effortless theme adaptation.
Depth
Surfaces cast shadows from a consistent top-left light source. Higher elevation means greater visual prominence and importance.
Components
Three card types serve different use cases: elevated for primary content, filled for grouping, outlined for secondary content.
Layered surface hierarchy
Surfaces at different elevation levels cast soft, multi-layered shadows from a consistent light source, communicating depth and interactive importance.
Tonal palette with semantic roles
A structured color system with primary, secondary, and tertiary roles generates harmonious palettes that adapt between light and dark themes automatically.
Purposeful easing curves
Every transition uses specific easing curves and calibrated durations that convey spatial relationships and guide attention through natural, physical movement.
Interactive
Every interactive element provides state-layer feedback confirming user input through hover, focus, and pressed states.
Layout
All spacing, sizing, and component dimensions align to an 8-density-independent-pixel grid for mathematical consistency across every screen.
Effects
Material motion is purposeful, using specific easing curves to communicate spatial relationships and state changes.
By the Numbers
Every surface, shadow, and transition in Material Design serves a purpose. Start creating interfaces that feel as natural as paper and ink.