material-design-3-layout

Define CSS custom properties on the 4dp scale, such as --md-sys-spacing-4 for 16px, then create semantic tokens like component padding and section gaps that reference them. Use these tokens everywhere instead of hard-coded pixel values.

M3 defines breakpoints at 600px, 905px, 1240px, and 1440px. Grids use 4 columns on mobile, 8 on tablets, and 12 on desktop, with margins and gutters of 16px on mobile and 24px on larger screens.

M3 defines six elevation levels from 0 to 5, each with a specific box-shadow token, ranging from flat surfaces to modal bottom sheets. Elevated surfaces also receive a subtle primary-color tint overlay to reinforce depth.

All interactive elements must be at least 48 by 48 dp, even if the visual element appears smaller. Achieve this with padding so the clickable area meets the accessibility requirement.

Use explicit containment such as borders, cards, or elevation for interactive or distinct actionable sections. Use implicit containment through proximity, spacing, and alignment for related text blocks, label-value pairs, and sequential content.

State layers are overlays using the on-surface content color at fixed opacities: 8% for hover, 12% for focus and pressed, and 16% for dragged. Only one state applies at a time, and disabled elements render content at 38% opacity.