Material Design 3
Google's adaptive design system for expressive, personal interfaces
Color Palette
Typography — Roboto
Display Large
Display Medium
Headline Large
Headline Medium
Title Large
Title Medium
Material Design 3 introduces a more expressive, personal approach to design. Dynamic color, updated typography, and increased use of shape help create interfaces that feel uniquely yours.
Label Small · 11px tracking
Buttons
Filled
High-emphasis button with filled container color, 20px full pill radius
Outlined
Medium-emphasis with 1px outline stroke
Text
Low-emphasis text button with state layer on hover
Tonal Surface
Filled tonal button on secondary container
Form Inputs
Badges & Tags
Surfaces & Cards
Surface
Default background at elevation 0. Base layer for all content.
Surface Container
Tonal surface for grouped content at low elevation.
Primary Container
Emphasized surface using primary container color.
Elevated Card
Surface at elevation 1 with subtle shadow.
Border Radius Scale
4px
8px
12px
16px
pill
Component Example
Dynamic Color
Personalized color schemes derived from user wallpaper.
Tonal Surfaces
Layered surfaces replace flat backgrounds and heavy shadows.
Adaptive Layout
Components scale gracefully across form factors.
Design Tokens
| Token | Value | Usage |
|---|---|---|
--md-sys-color-primary | #6750A4 | Primary brand color |
--md-sys-color-on-primary | #FFFFFF | Text on primary |
--md-sys-color-surface | #FFFBFE | Default surface |
--md-sys-color-on-surface | #1C1B1F | Text on surface |
--md-sys-color-outline | #79747E | Borders & dividers |
--md-sys-color-secondary-container | #E8DEF8 | Secondary containers |
--md-sys-shape-corner-medium | 12px | Medium corner radius |