expressive-design

Installation
SKILL.md

Material Expressive Design System

Material Expressive is Google's most researched design system update, based on 46 studies with 18,000+ participants. It creates emotionally engaging user experiences through strategic use of layout patterns, color, shape, size, motion, and containment.

Core Expressive Elements

  1. Layout Patterns - Modular grids (Bento), masonry, card-based, split-screen, and specialized page structures.
  2. Color & Typography - Expanded tonal palettes, container tiers, emotional selection, and dynamic convergence. Utilizing variable fonts (like Roboto Flex) for flexible text weight and width.
  3. Shape - Expanded library of 35 shapes, expressive radii, containment, visual boundaries, and built-in shape morph motion for decorative visual elements.
  4. Size - Larger touch targets, visual hierarchy. Reintroduces clear functional signifiers to reduce user uncertainty and improve scanning speed.
  5. Motion - New physics-based motion system including spatial springs for realistic object movement and effects springs for seamless color/opacity transitions.
  6. Containment - Surface elevation, tonal separation.
  7. New & Updated Components - Flexible Toolbars, Split Buttons, Progress Indicators (with customizable waveforms and thickness), Button Groups (shape-shifting interactions), and FAB Menus (overflow into mini-menus).

Workflows

Apply Expressive Design

Arguments:

Related skills

More from ab22593k/skills

Installs
13
Repository
ab22593k/skills
First Seen
Feb 12, 2026