A picnic page lets residents reserve places. A quiet row of equal buttons makes joining easy to miss. The team wants a strong primary action and lively feedback; understated flat grouping alone is not the priority.
How: work toward a solution
Choose three people and join. The large curved action changes to cancellation, the state confirms participation and reserved places becomes three. Change the group size or cancel. Brief shape feedback disappears with reduced motion.
Choose a group size and change picnic participationNEIGHBORS TOGETHER
A picnic for everyone
Saturday · Riverside lawn · 12:00
✳
No participation yet
Reserved places: 0
A fictional demo within this article. Reset or reload restores its initial state.
What: the concept
Material 3 Expressive uses color, shape, size and motion to guide attention. This web study is not a native Material library. Labels and reading order still matter.
Use expressive emphasis when one action should attract attention and the product voice permits it. Flat design can coexist with this approach; a restrained interface may need less shape variation and motion.
02Applications
The picnic separates invitation, group size and participation state. The curved action changes meaning visibly when joined. The flower is decorative; it does not carry the only confirmation signal.
03Implementation & cautions
Keep state text and pressed semantics independent of animation. Reduced motion removes the reaction. A real event needs server capacity checks; this local example accepts one to six places without making a reservation.
Already talking with external AI? Share this article link and explain why the choice fits your project and which tradeoff matters. Ask how it applies to your agreed requirements.
Discuss this idea
Comments are shared across languages. GitHub login required to post.