Implement Google's Material Design 3 (Material You) UI system. Primary: Jetpack Compose Material3 (MaterialTheme, components, adaptive layout). Also Flutter and limited web (@material/web, maintenance mode). Covers tokens, 30+ components, layout, theming, M3 Expressive (platform matrix), and accessi

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](https://m3.material.io/blog/whats new at io26) 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? What platform? 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. Web (limited): @material/web Important: Per [Material Design 3 for Web](https://m3.material.io/develop/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 Import Components Individually Always import only the components you use — importing the entire package bloats the bundle: Basic Usage Theming with CSS Custom Properties Apply a custom theme by setting CSS custom properties on :root or any ancestor: Component Level Overrides Override individual component tokens for specific customization: Dark Theme Apply dark theme by overriding color tokens on a class or media query: Full theming guide: references/theming and dynamic color.md Common Patterns App Shell Standard MD3 app with responsive navigation + top app bar + content area: Card Grid Form Layout More patterns: references/navigation patte

material-3