Sistema

Shape

Raw
GuidancelatestM3Retrieved 2026-05-11

Material Design 3 — Shape

Overview

Shape is one of M3's most distinctive design tools. Where M2 used flat or lightly rounded corners, M3 makes corner radius a first-class expressive dimension — different corner sizes communicate component identity, hierarchy, and interaction affordance.

Shape in M3 is exclusively concerned with corner rounding (border-radius). Standard rectangular components use uniform corners, though individual corners can be adjusted to create asymmetrical shapes.

M3 Expressive Update (May 2025)

The M3 Expressive update significantly expanded the shape system:

  • 35 new abstract shapes added to the Material Shape Library (Figma Design Kit) and Jetpack Compose
  • Shape morphing built into Material shapes for animating between shapes in response to interaction
  • New corner radius tokens:
TokenValue
large-increased20dp
extra-large-increased32dp
extra-extra-large48dp
  • Fully-rounded corners are now defined using the full token (previously expressed as 50% of component size)

Shape Principles

Use shapes and type in harmony. Shapes echo the visual character of the typeface. Round, expansive shapes pair well with geometric or humanist typefaces; square, angular shapes suit more utilitarian or monospaced fonts.

Morph shapes to communicate state. Shape morphing should respond to interaction — selected states, in-progress actions, environmental changes (time, temperature, sound). Think about how shapes react to tapping, swiping, scrolling, releasing, and long-pressing.

Embrace tension. Contrasting shapes (round alongside square) create dynamic, memorable design. M3 Expressive moves away from exclusively rounded shapes — sharp shapes convey precision, energy, and differentiation.

Shape is versatile, not semantic. Avoid assigning a fixed literal meaning to a single shape. A waveform can express loading progress, but progress could equally be shown with rotating shapes or morphing. Reserve meaning for content and interaction, not shape alone.

Use abstract shapes sparingly. Be intentional. When incorporating diverse shapes, consider how they fit the overall composition, whether they resonate with the product's narrative, and what value they add to the user experience.

Shape Scale

M3 defines a named scale of five corner sizes, plus two absolute values:

Scale NameDefault ValueTypical Use
none0pxSquare containers, data tables
extra-small4pxChips, menu items, tooltips
small8pxOutlined text fields, snackbars
medium12pxCards (small), some dialogs
large16pxNavigation drawers, cards
extra-large28pxFABs, date pickers, large dialogs
full9999px (pill)Buttons, badges, search bars
large-increased20pxM3 Expressive add-on
extra-large-increased32pxM3 Expressive add-on
extra-extra-large48pxM3 Expressive add-on

Shape and Component Identity

Shape is one of the ways M3 communicates component type and purpose. The default shape assignments are intentional:

  • Pill-shaped (full): Buttons, FABs — conveys action, invitation to interact
  • Extra-large (28px): Extended FABs, date picker headers — prominent, expressive containers
  • Large (16px): Navigation drawers, bottom sheets — significant surfaces
  • Medium (12px): Cards — balanced container presence
  • Small (8px): Text fields, snackbars — functional but softened
  • Extra-small (4px): Chips, menus — compact utility elements

Token Structure

On the web, shape tokens are CSS custom properties under --md-sys-shape-corner-*:

:root {
  --md-sys-shape-corner-none:        0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small:       8px;
  --md-sys-shape-corner-medium:      12px;
  --md-sys-shape-corner-large:       16px;
  --md-sys-shape-corner-extra-large:         28px;
  --md-sys-shape-corner-full:                9999px;
  /* M3 Expressive add-ons */
  --md-sys-shape-corner-large-increased:     20px;
  --md-sys-shape-corner-extra-large-increased: 32px;
  --md-sys-shape-corner-extra-extra-large:   48px;
}

Component tokens alias these system values:

/* Example: filled button defaults to full (pill) shape */
--md-filled-button-container-shape: var(--md-sys-shape-corner-full);

To make all buttons square, override the component token:

:root {
  --md-filled-button-container-shape: 0px;
}

Shape Customization

Shape can be customized at two levels:

System level — change a scale step for all components that use it:

:root {
  --md-sys-shape-corner-full: 8px; /* Flattens all pill-shaped elements */
}

Component level — change shape for a single component type without affecting others:

:root {
  --md-filled-button-container-shape: 0px;
}

Component-level overrides are more upgrade-safe and are preferred for product customization.

Shape and Brand Expression

M3 treats the shape scale as a product personality dial. Rounded, expressive shapes (extra-large, full) communicate friendliness, modernity, and playfulness. Reduced rounding (small, none) communicates precision, formality, and density.

Common brand adaptations:

  • Rounded/friendly: Keep default M3 shapes or increase curvature on secondary surfaces
  • Flat/utilitarian: Reduce corner radii across the scale, keep only a small amount (4–8px) on interactive elements
  • Strict/corporate: Set most surfaces to small or none; reserve rounding only for interactive actions like buttons

Consistency within the scale matters more than any particular value. A product that uses 4px everywhere creates a coherent character; one that uses random values (6px here, 11px there) creates visual noise.

Do's and Don'ts

Do:

  • Use the named scale steps — don't invent values outside the scale
  • Let component defaults stand where they match your brand — overriding everything is unnecessary
  • Use extra-large and full intentionally for high-emphasis or interactive elements
  • Apply consistent shape logic across component families (don't round buttons but square cards with no rationale)

Don't:

  • Override all shapes to 0px globally unless a strictly flat aesthetic is intentional and consistent
  • Use asymmetric corner radii on standard components — M3's shape system uses uniform corners
  • Confuse shape customization with spacing or size adjustments

Sources