Material 3 Expressive Design for Android

Color system

Semantic color roles & Dynamic theming

Primary roles

primary, onPrimary, primaryContainer, and onPrimaryContainer for prominent actions and highlighted surfaces.

Secondary & Tertiary

secondary for chips/filters, tertiary for contrasting visual accents and balanced visual energy.

Surface hierarchy

surfaceContainerLowest through surfaceContainerHighest define tonal elevation without heavy drop shadows.

Outline & Error

outline for borders, error and errorContainer for feedback, validation, and destructive actions.

Typography

Material 3 type scale & Variable font axes

Material 3 organizes type into 15 roles across 5 styles: Display, Headline, Title, Body, and Label. When using variable fonts like Roboto Flex, configure axes (weight, width, optical size) within verified ranges and ensure layouts support 200% accessibility font scaling without clipping.

Shape & Elevation

Expressive grouping and state layers

Tonal Elevation: Surfaces communicate elevation depth through surface container color shifts rather than heavy drop shadows.
Expressive Shapes: Round corners and asymmetric shapes communicate visual grouping (e.g. connected card items, segmented controls).
State Overlays: Standardized alpha overlays indicate hover, focus, press, and dragged interaction states.

Motion

Spring physics and reduced-motion fallback

object ExpressiveMotion {
    val PressSpring = spring<Float>(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessMedium
    )
    val SpatialSpring = spring<IntOffset>(
        dampingRatio = Spring.DampingRatioNoBouncy,
        stiffness = Spring.StiffnessMediumLow
    )
}

When reduced motion is enabled, replace spatial bounces with immediate state transitions while preserving feedback and safety intervals.

Adaptive layouts

Window size classes & NavigationSuiteScaffold

Size Class	Window Width	Navigation	Layout Pattern
Compact	< 600 dp	NavigationBar / BottomAppBar	Single Pane
Medium	600–839 dp	NavigationRail	Single or Supporting Pane
Expanded	840–1199 dp	NavigationRail / Drawer	List-Detail / Supporting Pane
Large+	>= 1200 dp	Permanent NavigationDrawer	Multi-Pane with max reading width

Component blueprints

Key Material 3 Expressive components

Split Buttons

Combines a primary button with an adjacent contextual dropdown menu trigger via SplitButtonLayout.

Floating Toolbars

Floating action surfaces that adapt smoothly between horizontal and vertical orientations via HorizontalFloatingToolbar.

Wavy Progress

Organic wave motion for determinate or indeterminate operations via WavyLinearProgressIndicator.

Segmented Buttons

Connected selection controls that communicate mutually exclusive or multi-select choices.

Quality checklist

Verification standards

Semantic MaterialTheme colorScheme and typography tokens applied consistently.
Interactive elements meet the minimum 48x48 dp touch target requirement.
Dynamic color support verified across light and dark themes.
Adaptive navigation responsive across compact, medium, and expanded window sizes.
Accessibility semantics and reduced-motion modes thoroughly tested.