---
version: alpha
name: Material Expressive Adaptive Interface
description: "A Material 3 Expressive and adaptive-product interface for mobile-first consumer apps, responsive product shells, glanceable live status, and personality-rich task flows. It uses dynamic color roles, larger rounded containers, emphasized typography, shaped buttons, bottom and side navigation variants, live-update cards, and spring-like motion rules while keeping accessibility, adaptive layouts, and reduced-motion fallbacks explicit."

colors:
  primary: "#6750a4"
  primary-hover: "#5a4696"
  on-primary: "#ffffff"
  primary-container: "#eaddff"
  on-primary-container: "#21005d"
  secondary: "#625b71"
  secondary-container: "#e8def8"
  tertiary: "#7d5260"
  tertiary-container: "#ffd8e4"
  canvas: "#fffbfe"
  surface-card: "#ffffff"
  surface-soft: "#f7f2fa"
  surface-container: "#f3edf7"
  surface-container-high: "#ece6f0"
  surface-selected: "#eaddff"
  ink: "#1d1b20"
  body: "#49454f"
  muted: "#79747e"
  hairline: "#cac4d0"
  focus: "#6750a4"
  success: "#386a20"
  success-surface: "#d9f7c5"
  warning: "#8c5000"
  warning-surface: "#ffdcc2"
  danger: "#b3261e"
  danger-surface: "#f9dedc"
  inverse-canvas: "#141218"
  inverse-surface: "#211f26"
  inverse-ink: "#f5eff7"

typography:
  display-xl:
    fontFamily: "Roboto Flex, Roboto, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 60px
    fontWeight: 650
    lineHeight: 1.02
    letterSpacing: 0
  headline-lg:
    fontFamily: "Roboto Flex, Roboto, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 36px
    fontWeight: 620
    lineHeight: 1.12
    letterSpacing: 0
  title-md:
    fontFamily: "Roboto Flex, Roboto, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 18px
    fontWeight: 650
    lineHeight: 1.28
    letterSpacing: 0
  body:
    fontFamily: "Roboto, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 15px
    fontWeight: 420
    lineHeight: 1.52
    letterSpacing: 0
  label:
    fontFamily: "Roboto, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 13px
    fontWeight: 650
    lineHeight: 1.25
    letterSpacing: 0
  mono:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
    fontSize: 12px
    fontWeight: 550
    lineHeight: 1.45
    letterSpacing: 0

rounded:
  none: 0px
  sm: 12px
  md: 18px
  lg: 28px
  xl: 36px
  pill: 9999px

spacing:
  base: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 88px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 12px 22px
  button-tonal:
    backgroundColor: "{colors.secondary-container}"
    textColor: "{colors.on-primary-container}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
  expressive-card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 20px
  live-update:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-primary-container}"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
    padding: 18px
  search-bar:
    backgroundColor: "{colors.surface-container-high}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 13px 18px
  nav-item:
    backgroundColor: "{colors.surface-selected}"
    textColor: "{colors.primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 8px 14px

layout:
  shell: "Adaptive app shell that changes from bottom navigation on compact screens to navigation rail or sidebar on medium and expanded screens."
  density: "Comfortable touch density. Prefer large tap targets, pill controls, and grouped containers rather than dense tables."
  grid: "Use compact, medium, and expanded layout decisions. Keep content cards in 1 column on phones, 2 columns on tablets, and mixed rail-plus-content compositions on desktop."
  motion: "Motion may be spring-like, shape-aware, and responsive, but must explain state change and include reduced-motion fallbacks."

guidance:
  do:
    - "Start from semantic color roles, then map brand or user-generated color into primary, secondary, tertiary, containers, surfaces, and states."
    - "Use expressive typography for key moments, but keep body text stable and localized strings readable."
    - "Let large rounded containers group tasks, live updates, media, and action clusters."
    - "Adapt navigation by screen size: bottom bar on compact, rail/sidebar on expanded, and clear active state in every mode."
    - "Use shape and motion to reinforce drag, dismiss, progress, selection, and route transitions."
  dont:
    - "Do not use bright dynamic colors as decoration on every card."
    - "Do not copy Google app screens, icons, or brand assets into unrelated products."
    - "Do not make expressive type, motion, or color the only way to understand state."
    - "Do not squeeze desktop density into compact mobile screens."
    - "Do not omit reduced-motion, haptic-free, or high-contrast fallbacks."

caseStudy:
  source: "Material Design 3, Material 3 Expressive, Android adaptive guidance, and Wear OS expressive guidance"
  urls:
    - "https://m3.material.io/"
    - "https://m3.material.io/blog/building-with-m3-expressive"
    - "https://m3.material.io/foundations/adaptive-design/overview"
    - "https://m3.material.io/styles/color/overview"
    - "https://m3.material.io/styles/typography/type-scale-tokens"
    - "https://m3.material.io/components/buttons/overview"
    - "https://blog.google/products-and-platforms/platforms/android/material-3-expressive-android-wearos-launch/"
    - "https://developer.android.com/design/ui/wear/guides/get-started/apply"
  analysis: "Material 3 Expressive expands Material 3 with a more personal visual system, dynamic color themes, responsive components, emphasized typography, shape-aware motion, and glanceable live information. The reusable lesson is not to copy Google UI, but to build a semantic token system where color roles, container shape, adaptive navigation, type emphasis, and motion feedback all serve user context and state clarity."
---

# Material Expressive Adaptive Interface

Use this system for mobile-first consumer products, lifestyle utilities, delivery and ride progress, health tracking, personal finance, learning apps, media browsers, and responsive product shells that need more warmth and personality than a neutral SaaS dashboard.

The posture is personal, adaptive, and glanceable. The interface should feel touch-first and alive, but every expressive choice must still make the task clearer.

## Overview

Material Expressive Adaptive turns Material 3's semantic roles into a page-wide Interface language. Dynamic color becomes a system of roles rather than a random palette. Large rounded containers group content. Typography can become more expressive in hero and status moments. Navigation adapts from bottom bar to rail or sidebar. Motion explains drag, dismissal, live progress, selection, and route transitions.

This resource should not be used to clone Android or Google apps. It is a reusable product-language abstraction for apps where personality, touch ergonomics, and adaptive context matter.

## Colors

### Brand & Accent

- `primary` (#6750a4) carries main actions, active navigation, focus, and selected states.
- `primary-container` (#eaddff) is a soft container for selected surfaces, live updates, and emphasis cards.
- `secondary` and `tertiary` create supportive contrast, not arbitrary decoration.

### Surface

- `canvas` (#fffbfe) is a warm app background.
- `surface-card` (#ffffff) is for crisp sheets and high-priority content.
- `surface-container`, `surface-container-high`, and `surface-soft` build Material-style containment without relying on heavy shadows.

### Text

- `ink` (#1d1b20) is for headings and primary labels.
- `body` (#49454f) supports comfortable reading.
- `muted` (#79747e) is for navigation labels, timestamps, and helper text.

### Hairlines & Borders

Use `hairline` (#cac4d0) sparingly. Material containment should come mostly from surface roles, spacing, and shape. Borders are helpful for previews, side panels, compact cards, and focus-adjacent boundaries.

### Semantic

Success, warning, and danger colors must pair with text or icon indicators. Do not encode delivery, payment, health, or safety status through color alone.

## Typography

### Font Family

Use Roboto or a compatible system sans. Roboto Flex is useful when a product needs expressive width or weight changes, but the fallback must remain readable.

### Hierarchy

Use `display-xl` and `headline-lg` for emotional or navigational moments, not for every card. `title-md`, `body`, and `label` should carry most product UI. Keep letter spacing at 0.

### Principles

Emphasized type should help users notice the current object, status, or next action. It should not shrink translations, wrap into awkward fragments, or become the only state indicator.

### Note on Font Substitutes

When Roboto or Roboto Flex is unavailable, use system UI fonts and preserve role, size, weight, line-height, and spacing.

## Layout

### Spacing System

Base spacing is 4px. Use 8/12px for control interiors, 16/24px for groups, 32/48px for section rhythm, and 88px for major page sections.

### Grid & Container

Compact screens use one-column task cards and bottom navigation. Medium screens can use two-column cards. Expanded screens should introduce navigation rails, side panes, or adaptive split views.

### Whitespace Philosophy

Whitespace should feel touch-ready and approachable. Do not collapse task cards into enterprise density unless the product is explicitly an admin tool.

## Elevation & Depth

Prefer tonal surfaces over heavy shadow. Use shadow only for modal sheets, floating live updates, and drag/overlay states. Depth should clarify layered interaction, not decorate static sections.

## Shapes

The system uses high radius and pill controls. Cards can use 28px radii; important live-update surfaces can use 36px radii. Avoid mixing square admin tables with expressive rounded mobile components unless the product clearly needs both modes.

## Components

### Buttons

Use pill primary buttons for main actions and tonal buttons for lower-risk actions. Larger touch targets are better than tiny dense controls.

### Cards & Containers

Use expressive cards for task groups, media, recommendations, and live status. Each card needs a clear object, status, and next action.

### Inputs & Forms

Search and entry fields should be rounded, spacious, and labeled. Error text stays close to fields and cannot rely only on red surface color.

### Navigation

Use bottom navigation for compact screens, navigation rail for medium screens, and side navigation or split-pane shells for expanded screens. Active state must be visible through shape, surface, and text.

### Signature Components

Live-update cards, adaptive navigation, shaped action clusters, and large rounded media cards are the signature modules.

## Do's and Don'ts

Do use semantic roles before choosing hex colors.

Do make live progress glanceable with status text, timestamp, and action.

Do test mobile text wrapping and larger accessibility type.

Don't scatter saturated colors across every surface.

Don't use motion if the same state change is not visible in static form.

Don't clone Google system UI, app screens, icons, or proprietary imagery.

## Responsive Behavior

### Breakpoints

Compact: one-column task flow, bottom navigation, full-width sheets.

Medium: two-column cards, optional rail, more persistent filters.

Expanded: navigation rail/sidebar, split view, larger media and status panels.

### Touch Targets

Primary controls should be at least 44px high. Icon-only controls need accessible names and visible focus.

### Collapsing Strategy

Move secondary actions into sheets or menus on compact screens. Do not squeeze all desktop actions into the top bar.

### Image Behavior

Media should use stable aspect ratios and soft clipping. Avoid cropping faces, product objects, or status labels behind rounded masks.

## Iteration Guide

1. Identify whether the product is personal, task-based, or admin-like.
2. Choose semantic color roles before choosing decorative colors.
3. Define compact, medium, and expanded navigation modes.
4. Create the live-update or status module before designing secondary cards.
5. Add motion only after the static state sequence works.
6. Verify reduced motion, high contrast, long localization strings, and touch targets.

## Known Gaps

Exact proprietary Google app implementations, haptic behavior, and Pixel/Wear OS-specific animation parameters are not reproduced. This resource abstracts public Material guidance for Interface generation and should not be treated as permission to copy Google product identity.