Google's open-source design system. Material 3 is the current version, and Material 3 Expressive is its 2025 update: new components, spring-based motion and stronger emphasis, without replacing Material 3.
Shortcut points to it for
MaterialOfficial source(opens in a new tab)
What Shortcut could read. Shortcut has read the Overview page of all 36 components, the Breakpoints page and the Expressive announcement. It has not read Material's pages on tokens, colour, typography, shape or elevation, nor any component's Specs or Accessibility tab.
Material lists 36 components. Shortcut has read the Overview page of each one and summarised it, with a link to Material’s own specs, guidelines and accessibility tabs.
The “when” column restates Material. The note under each is Shortcut’s.
Shortcut’s note. Visible options cost space; hidden ones cost a tap and are chosen less. Show them when you can.
Shortcut’s note. A switch should take effect immediately. If nothing happens until Save, a checkbox is the honest control.
Shortcut’s note. Ordered from most interrupting to least. Use the least interruption the message can survive.
Shortcut’s note. The count of destinations decides more than the screen does. Material now points to the expanded rail where a drawer was used.
An evolution of Material 3, announced on 13 May 2025. Google says it is not a new version: Material 3 is not deprecated and this is not "M4".
Google describes 46 studies with more than 18,000 participants, and reports that people spotted key UI elements up to four times faster on expressive screens. These are Google's own figures.
Shortcut's readingFor a working designer: check which version your team's library is on before specifying a segmented button or a navigation drawer. And treat "expressive" as a set of tools for hierarchy, not a reason to animate everything.
Official source
Material's reasons for designing to breakpoints, not devices: window space changes with multi-window modes and unfolding, and a device lands in different breakpoints depending on orientation.
Responsive & ViewportsFoldables & Multi-state DevicesBreakpoints compared across systems
Official source
From Google’s Android developer documentation, not from Material. It applies to Android apps and does not carry over to the web as written.
Window size classes are set by the window available to the app, not the device screen. Split-screen, resizable windows and folding all change it while the app runs.
Android Developers, Use window size classes(opens in a new tab)
Most apps can adapt by width alone. In landscape on a phone the height is compact, and two-pane layouts are not practical.
Android Developers, Use window size classes(opens in a new tab)
Folded and unfolded screens can differ substantially in size and aspect ratio, requiring alternative layouts.
Android Developers, Learn about foldables(opens in a new tab)
A half-opened device can sit in tabletop or book posture. Keep dialogs and menus off the fold, and split content into two areas.
Android Developers, Learn about foldables(opens in a new tab)
An app stops and restarts as it moves between screens on a fold. It must preserve and restore its state.
Android Developers, Learn about foldables(opens in a new tab)
Touch targets of at least 48 × 48 dp.
Android Accessibility Help, Touch target size (cites Material Design)(opens in a new tab)
Not yet read by Shortcut: system bars and edge-to-edge, back navigation and predictive back, theming.
Not yet read. Shortcut has not read Material’s own pages on design tokens, colour, typography, shape or elevation, so it gives no values for them here.
The comparison pages cite Google’s Android documentation for colour roles, the type scale and the shape scale. Design tokens compared
Google’s Expressive announcement links to an updated Figma design kit. Shortcut has not opened the file, so it cannot describe what is in it. Find the link in the announcement(opens in a new tab)
How one Google product behaves, as its help pages describe it. This is a product pattern to learn from. It is not Material guidance, and Material does not tell you to copy it.
Gemini's help page says a Sources button appears at the bottom of a response or in line through it, and opens a side panel with the relevant links. Links may be public websites, files you uploaded, or Workspace documents if connected.
Shortcut’s reading. Sources are reachable from the answer, and shown beside it instead of replacing it. Note the wording: "when sources are available". The design has a state for no sources.
Official source
Looked for and not yet read in Google’s own documentation: ai input, progress states, user approval for actions, editable output, uncertainty. For published guidance on these, see Atlassian’s AI interaction guidelines.
Compact: under 600 dp. Medium: 600 to under 840 dp. Expanded: 840 to under 1200 dp.
Android Developers, Use window size classes(opens in a new tab)Design-system convention
Large: 1200 to under 1600 dp. Extra-large: 1600 dp and above.
Android Developers, Use window size classes(opens in a new tab)Design-system convention
Classes describe the window, not the device.
Android Developers, Use window size classes(opens in a new tab)Design-system convention
Touch targets of at least 48 × 48 dp.
Android Accessibility Help, Touch target size (cites Material Design)(opens in a new tab)Design-system convention
Applies to touch interfaces
Differences in size and aspect ratio between folded and unfolded can be substantial, requiring alternative layouts.
Android Developers, Learn about foldables(opens in a new tab)Design-system convention
Unfolded in landscape is like a tablet: a two-pane layout with a navigation rail. Folded is like a phone: a single column with a bottom navigation bar.
Android Developers, Learn about foldables(opens in a new tab)Design-system convention