Material 3

Material Design 3

This skill guides implementation of Google's Material Design 3 (MD3) — a personal, adaptive, expressive design system. MD3 uses dynamic color, tonal surfaces, rounded shapes, and spring-based motion to create UIs that feel alive and personal.

Philosophy

MD3 is built on three principles:

• Personal: Dynamic color adapts UI to the user's wallpaper or content. Theming is individual, not one-size-fits-all.
• Adaptive: Layouts transform across 5 window size classes. Components resize, reposition, and change form factor responsively.
• Expressive: Shape morphing, spring physics, and emphasized typography create moments of delight without sacrificing usability.

Current Updates: Google I/O 2026

Material's Google I/O 2026 update reinforces a Compose-first Android path and expands expressive/adaptive guidance:

• Material Android is Compose-first: For new Android work, prefer Jetpack Compose Material3 for the latest components, expressive APIs, adaptive scaffolds, and Styles API integration. Android Views may remain necessary in existing apps, but they should not be treated as the default path for new Material 3 implementations.
• Expressive layout system: Use an expressive layout scaffold to adapt screens across mobile, desktop, foldables, watches, XR, and other spatial form factors. Start from adaptive scaffolds/window size classes instead of fixed phone-first layouts.
• 8dp spacing system: Apply spacing tokens for margins, padding, and gaps so layouts and components can adapt programmatically to device type and density.
• New/updated expressive components: Lists, menus, search, and search app bars have refreshed expressive guidance, with Jetpack Compose as the primary implementation target.
• Watches and XR: Watches emphasize physics-based motion, arc text, and edge-hugging containers. XR emphasizes spatial panels and depth-based elevation.

Key differences from MD2:

• Tonal surfaces replace elevation shadows as the primary depth cue
• Dynamic color generates full schemes from a single seed color
• Fully rounded corners by default (not slightly rounded)
• Spring-based motion physics replace fixed easing curves for components
• 3 levels of user-controlled contrast (standard/medium/high)

Relationship with frontend-design skill: When both skills are active, MD3 provides the design system (tokens, components, layout rules) and frontend-design provides creative direction within those constraints. MD3 rules take precedence for component structure and token usage. Note: Roboto/Roboto Flex IS the correct default typeface in MD3 — the frontend-design guidance to avoid Roboto does not apply when implementing MD3.

Decision Tree

What are you building?

Full app scaffold        → See "Common Patterns: App Shell" + references/layout-and-responsive.md
Single component         → See "Component Quick Reference" table → references/component-catalog.md
Custom theme             → See references/theming-and-dynamic-color.md
Form / input layout      → See references/component-catalog.md § Input Components
Navigation structure     → See references/navigation-patterns.md
Data display             → See references/component-catalog.md § Data Display

What platform?

Jetpack Compose          → Primary: androidx.compose.material3, MaterialTheme, references/*
Flutter                  → useMaterial3: true in ThemeData, ColorScheme.fromSeed()
Web (vanilla JS)         → @material/web (limited; maintenance mode) + CSS custom properties
Web (React/Vue/Svelte)   → CSS custom properties + wrapper components (no official React lib)
Web (CSS-only)           → MD3 token values as CSS custom properties (no  elements)

Design Token System

All MD3 tokens use the md.sys namespace. Jetpack Compose maps roles to MaterialTheme.colorScheme, MaterialTheme.typography, and MaterialTheme.shapes (same semantic roles as the spec). On the web, these map to CSS custom properties (--md-sys-*):

Color Tokens (--md-sys-color-*)

| Token | Purpose | |-------|---------| | primary | High-emphasis fills, text, icons against surface | | on-primary | Text/icons on primary | | primary-container | Standout fill for key components (FAB, etc.) | | on-primary-container | Text/icons on primary-container | | secondary / on-secondary | Less prominent accents | | secondary-container / on-secondary-container | Recessive components (tonal buttons) | | tertiary / on-tertiary | Contrasting accents | | tertiary-container / on-tertiary-container | Complementary containers | | error / on-error | Error states (static — doesn't change with dynamic color) | | error-container / on-error-container | Error container fills | | surface | Default background | | on-surface | Text/icons on any surface | | on-surface-variant | Lower-emphasis text/icons on surface | | surface-container-lowest | Lowest-emphasis container | | surface-container-low | Low-emphasis container | | surface-container | Default container (nav areas) | | surface-container-high | High-emphasis container | | surface-container-highest | Highest-emphasis container | | surface-dim / surface-bright | Maintain relative brightness across light/dark | | inverse-surface / inverse-on-surface / inverse-primary | Contrasting elements (snackbars) | | outline | Important boundaries (text field borders) | | outline-variant | Decorative elements (dividers) |

Full details: references/color-system.md

Typography Tokens (--md-sys-typescale-*)

| Scale | Sizes | Use | |-------|-------|-----| | Display | L / M / S | Hero text, large numbers | | Headline | L / M / S | Section headers | | Title | L / M / S | Smaller headers, card titles | | Body | L / M / S | Paragraph text, descriptions | | Label | L / M / S | Buttons, chips, captions |

Each style has tokens for: -font, -weight, -size, -line-height, -tracking Plus 15 emphasized variants (higher weight) via --md-sys-typescale-emphasized-*

Full details: references/typography-and-shape.md

Shape Tokens (--md-sys-shape-corner-*)

| Token | Value | Example components | |-------|-------|-------------------| | none | 0dp | — | | extra-small | 4dp | Chips, snackbars | | small | 8dp | Text fields, menus | | medium | 12dp | Cards | | large | 16dp | FABs, navigation drawer | | large-increased | 20dp | (Expressive) | | extra-large | 28dp | Dialogs, bottom sheets | | extra-large-increased | 32dp | (Expressive) | | extra-extra-large | 48dp | (Expressive) | | full | 9999px | Buttons, chips, badges |

Elevation Levels

| Level | DP | Tonal offset | Use | |-------|-----|-------------|-----| | 0 | 0dp | None | Flat surfaces, most components at rest | | 1 | 1dp | +5% primary | Elevated cards, modal sheets | | 2 | 3dp | +8% primary | Menus, nav bar, scrolled app bar | | 3 | 6dp | +11% primary | FAB, dialogs, search, date/time pickers | | 4 | 8dp | +12% primary | (hover/focus increase only) | | 5 | 12dp | +14% primary | (hover/focus increase only) |

Elevation in MD3 is communicated through tonal surface color, not shadows. Shadows are only used when needed for additional protection against busy backgrounds.

Motion

MD3 Expressive (May 2025) introduced spring-based motion physics for components. The legacy easing/duration system is still used for transitions (enter/exit/shared-axis):

| Easing | Duration | Transition type | |--------|----------|-----------------| | Emphasized | 500ms | Begin and end on screen | | Emphasized decelerate | 400ms | Enter the screen | | Emphasized accelerate | 200ms | Exit the screen | | Standard | 300ms | Begin and end on screen (utility) | | Standard decelerate | 250ms | Enter screen (utility) | | Standard accelerate | 200ms | Exit screen (utility) |

CSS easing values:

• Emphasized: cubic-bezier(0.2, 0, 0, 1)
• Emphasized decelerate: cubic-bezier(0.05, 0.7, 0.1, 1)
• Emphasized accelerate: cubic-bezier(0.3, 0, 0.8, 0.15)
• Standard: cubic-bezier(0.2, 0, 0, 1)
• Standard decelerate: cubic-bezier(0, 0, 0, 1)
• Standard accelerate: cubic-bezier(0.3, 0, 1, 1)

Component Quick Reference

| Component | Web Element | Key Variants | Category | |-----------|------------|--------------|----------| | Button | md-filled-button, md-outlined-button, md-text-button, md-elevated-button, md-filled-tonal-button | Filled, Outlined, Text, Elevated, Tonal; 5 sizes (XS–XL); toggle | Actions | | Button group | md-button-group | Standard, connected | Actions | | Extended FAB | md-extended-fab | Surface, Primary, Secondary, Tertiary | Actions | | FAB | md-fab | Small, Medium, Large | Actions | | FAB menu | — | — | Actions | | Icon button | md-icon-button, md-filled-icon-button, md-filled-tonal-icon-button, md-outlined-icon-button | Standard, Filled, Filled Tonal, Outlined | Actions | | Segmented button | — | Single-select, Multi-select | Actions | | Split button | — | — | Actions | | Badge | — | Small (dot), Large (count) | Communication | | Loading indicator | — | Linear, Circular | Communication | | Progress indicator | md-linear-progress, md-circular-progress | Linear, Circular; determinate/indeterminate | Communication | | Snackbar | — | Single-line, Two-line, Action | Communication | | Tooltip | — | Plain, Rich | Communication | | Card | — | Filled, Outlined, Elevated | Containment | | Carousel | — | Multi-browse, Uncontained, Hero | Containment | | Dialog | md-dialog | Basic, Full-screen | Containment | | Bottom sheet | — | Standard, Modal | Sheets | | Side sheet | — | Standard, Modal | Sheets | | Divider | md-divider | Full-width, Inset | Containment | | Checkbox | md-checkbox | — | Input | | Chips | md-chip-set, md-assist-chip, md-filter-chip, md-input-chip, md-suggestion-chip | Assist, Filter, Input, Suggestion | Input | | Date picker | — | Docked, Modal, Range | Input | | Menu | md-menu, md-menu-item | — | Input | | Radio button | md-radio | — | Input | | Slider | md-slider | Continuous, Discrete, Range | Input | | Switch | md-switch | With/without icon | Input | | Text field | md-filled-text-field, md-outlined-text-field | Filled, Outlined | Input | | Time picker | — | Docked, Modal | Input | | App bar (top) | — | Center-aligned, Small, Medium, Large | Navigation | | Navigation bar | md-navigation-bar | — | Navigation | | Navigation drawer | md-navigation-drawer | Standard, Modal | Navigation | | Navigation rail | — | — | Navigation | | Search | — | Search bar, Search view | Navigation | | Tabs | md-tabs, md-primary-tab, md-secondary-tab | Primary, Secondary | Navigation | | Toolbar | — | — | Navigation | | List | md-list, md-list-item | One-line, Two-line, Three-line | Data Display |

Note: Components marked with — for web element don't have @material/web implementations yet. Use CSS custom properties with standard HTML for these. Compose mappings and examples live in references/component-catalog.md.

Full component details with code examples: references/component-catalog.md

Jetpack Compose (primary)

Use androidx.compose.material3 with MaterialTheme and Material 3 composables (Scaffold, Button, NavigationBar, top app bars, etc.).

• Theming: MaterialTheme(colorScheme = …, typography = …, shapes = …). Prefer dynamicLightColorScheme / dynamicDarkColorScheme on Android 12+ (API 31+) when dynamic color is desired; otherwise lightColorScheme / darkColorScheme or generated theme code from Material Theme Builder.
• Adaptive UI: Window size classes, list-detail and supporting-pane layouts, foldables — see references/layout-and-responsive.md and references/navigation-patterns.md.
• Edge-to-edge & insets: Lay out content with WindowInsets / scaffold padding so bars and IME behave correctly — see references/layout-and-responsive.md.
• Experimental APIs: Some Material 3 APIs require @OptIn(ExperimentalMaterial3Api::class) or expressive opt-ins; match your BOM and compiler.

MaterialTheme(
    colorScheme = colorScheme, // from dynamicLightColorScheme / lightColorScheme / etc.
    typography = Typography(),
    shapes = Shapes(),
) {
    // M3 content — prefer references for Scaffold, navigation, text fields
}

Web (limited): @material/web

Important: Per Material Design 3 for Web, Material Web Components are in maintenance mode and M3 Expressive is not implemented on Web. Use @material/web for token-backed web UIs when appropriate, but do not treat it as equivalent to Compose for current Expressive features.

Setup

npm install @material/web

Import Components Individually

Always import only the components you use — importing the entire package bloats the bundle:

// Good — individual imports
import '@material/web/button/filled-button.js';
import '@material/web/button/outlined-button.js';
import '@material/web/textfield/outlined-text-field.js';
import '@material/web/icon/icon.js';

// Bad — never do this
import '@material/web'; // imports everything

Basic Usage

  
  
  
  

  Get started
  

  
    import '@material/web/button/filled-button.js';
    import '@material/web/textfield/outlined-text-field.js';
  

Theming with CSS Custom Properties

Apply a custom theme by setting CSS custom properties on :root or any ancestor:

:root {
  /* Color scheme (generate with @material/material-color-utilities) */
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #EADDFF;
  --md-sys-color-on-primary-container: #21005D;
  --md-sys-color-secondary: #625B71;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E8DEF8;
  --md-sys-color-on-secondary-container: #1D192B;
  --md-sys-color-surface: #FEF7FF;
  --md-sys-color-on-surface: #1D1B20;
  --md-sys-color-surface-container: #F3EDF7;
  --md-sys-color-outline: #79747E;
  --md-sys-color-outline-variant: #CAC4D0;

  /* Typography */
  --md-sys-typescale-body-large-font: 'Roboto Flex', sans-serif;
  --md-sys-typescale-body-large-size: 1rem;
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-line-height: 1.5rem;

  /* Shape */
  --md-sys-shape-corner-full: 9999px;
  --md-sys-shape-corner-medium: 12px;
}

Component-Level Overrides

Override individual component tokens for specific customization:

md-filled-button {
  --md-filled-button-container-color: var(--md-sys-color-primary);
  --md-filled-button-label-text-color: var(--md-sys-color-on-primary);
  --md-filled-button-container-shape: var(--md-sys-shape-corner-full);
  --md-filled-button-container-height: 40px;
}

md-outlined-text-field {
  --md-outlined-text-field-container-shape: var(--md-sys-shape-corner-small);
  --md-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);
}

Dark Theme

Apply dark theme by overriding color tokens on a class or media query:

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #D0BCFF;
    --md-sys-color-on-primary: #381E72;
    --md-sys-color-primary-container: #4F378B;
    --md-sys-color-on-primary-container: #EADDFF;
    --md-sys-color-surface: #141218;
    --md-sys-color-on-surface: #E6E0E9;
    --md-sys-color-surface-container: #211F26;
    --md-sys-color-outline: #938F99;
    --md-sys-color-outline-variant: #49454F;
  }
}

Full theming guide: references/theming-and-dynamic-color.md

Common Patterns

App Shell

Standard MD3 app with responsive navigation + top app bar + content area:

  
    
    
      edit
    
    
      
        home
        home
      
      
        search
        search
      
    
  
  
    
      
        Page Title
      
    
    
      
    
  

``

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: hamen
• Source: hamen/material-3-skill
• License: MIT

Install and usage instructions live in the source repository linked above.