Styles

Material 3 Expressive

Explore the same project workspace.

Explore the same project workspace
PROJECT / TODAY · 01

Make room

A little space for your next idea.

Collect references, sketch a direction, and make the words clear. Three small steps toward a thoughtful workspace.

Tasks

Ready to begin.

A fictional demo within this article. Reset or reload restores its initial state.

Concept

Material 3 Expressive directs attention with color, shape, size, and motion. This authored study uses large task controls and varied curves.

Example

All eleven styles share a workspace: overview, three tasks, progress, and two resource notes. Follow the menu, check a task, filter Open or Done, and expand a note. Completion becomes 1 / 3 and 33%; unmatched filters show an empty message. Reset or reload restores All, three unchecked tasks, 0%, and closed notes. Completion briefly pulses the progress shape; reduced motion removes animation.

When to choose it

Choose it when key actions need clear visual emphasis. Expressive shapes must preserve familiar labels and reading order.

Google Design

Comparison summary
Comparison within this category
ConceptFeaturesAdvantagesLimitationsSuitable situationsCombination conditions
Material 3 ExpressiveColor blocks, varied curves, large controls, and brief shape reactions.Size and containment give primary actions emphasis.Expressive shapes must preserve familiar labels and reading order.Choose it when key actions need clear visual emphasis.Pair solid surfaces with a clear grid and reduced-motion support.
Keep exploringSource & edits ↗

Discuss this idea

Comments are shared across languages. GitHub login required to post.