Material Design 3 Layout and Size Hierarchy

Overview

This skill guides the implementation of Material Design 3 (M3) Expressive layout and spacing principles to create clear, organized, and responsive interfaces.

Keywords: Material Design 3, M3, layout, spacing, grid, responsive design, breakpoints, size hierarchy, elevation, padding, margin

Core Principles

Layout Philosophy

M3 layout — from Material You foundations to M3 Expressive — focuses on: