Material expressive adaptive system

Personal apps with shape, color, and live context.

Use semantic color roles, large rounded containers, touch-first navigation, emphasized type, and glanceable live updates without turning state into decoration.

Build the flow Check breakpoints
Today Live
Search tasks, places, or updates
Pickup arrives in 8 min Driver matched. Route updates stay visible and every state has a static fallback.
Morning planAdaptive cards stack on compact screens and split on expanded layouts.
Feeling activeColor roles express personality while keeping text readable.
Saved placesLarge touch targets make action clusters easy to scan.
Motion ruleAnimate shape, selection, and route change only when it clarifies state.
HomeExploreUpdatesAccount

Color roles

Dynamic color is useful only after roles are defined: primary, containers, surfaces, text, semantic status, and selected states.

primary
#6750a4 / action + active
primary-container
#eaddff / live + selected
surface-container
#f3edf7 / card grouping
danger-surface
#f9dedc / error only

Typography

Expressive type belongs in high-value moments. Product text remains stable for localization and accessibility scaling.

Glanceable

display-xl / 60px / 650

Your route changed

title-md / status and sheet titles

Body copy explains the state, the reason it changed, and the next action without relying on motion alone.

body / 15px / 1.52

08:24

mono / tabular live timing

Components

Signature modules are shaped controls, live-update cards, tonal search, and adaptive navigation.

Selected
Pill action cluster

Primary and tonal actions use shape to signal affordance, not to decorate static text.

Live update
Delivery progress

Every live card includes object, stage, timestamp, and a non-animated readable state.

Adaptive
Navigation rail

Bottom navigation becomes rail or sidebar when the viewport can support persistent context.

Fallback
Reduced motion

Shape morphs and spring motion collapse to opacity or static state changes.

Responsive behavior

The system changes composition by context instead of squeezing one layout into every screen.

Compact

One-column cards, bottom navigation, full-width sheets, large touch targets.

Medium

Two-column groups, optional navigation rail, persistent filters and search.

Expanded

Rail or sidebar, split view, richer media, and detail panels.

Motion

Use transform, opacity, shape state, and static reduced-motion keyframes.