Skip to content

Feature Request: Support for Material Design 3 "Expressive" Components & Styling #5888

@Aditya1234vishwakarma

Description

@Aditya1234vishwakarma

Description

Feature Request: Support for Material Design 3 "Expressive" Components & Styling

Description

First of all, thank you for the incredible work on the Material Web components. As the ecosystem moves forward, there is a growing need to align the Web implementation with the "Expressive" side of the Material Design 3 specification.

Currently, the library excels at the "Standard" M3 look, but it lacks the more organic, playful, and high-contrast characteristics that define the Expressive layer (often seen in the latest Android updates and specialized Google apps).

Proposed Changes

I would love to see the implementation of Expressive styling across the core components, specifically:

  • Expressive Shapes: Support for extra-rounded or "asymmetric" corner treatments for Buttons, FABs, and Cards.
  • Motion & Easing: Inclusion of the more fluid, elastic motion tokens defined in the M3 Expressive spec.
  • Typography: Support for the expressive typesetting scales.
  • Component Variations: Adding "Expressive" variants for existing components (e.g., an Expressive FAB that feels more organic than the standard one).

Why is this needed?

  • Consistency: To ensure Web apps can achieve parity with Android/Flutter apps using the Expressive design language.
  • Modern UX: Modern web interfaces are moving towards more personality-driven designs, and the "Standard" M3 can sometimes feel too rigid for consumer-facing creative apps.
  • Developer Experience: Having these built into the official library prevents developers from having to "hack" CSS to override standard M3 behaviors.

Additional Context

Material Design 3 Expressive emphasizes a more personal and adaptive feel. Implementing this in @material/web would make it the ultimate tool for building next-gen web interfaces.


Labels: feature request, material design 3, expressive

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions