Material Design

Web engineering guide

Material 3 Expressive Web Development

Implement Material 3 Expressive components, CSS design tokens, fluid layouts, motion, and accessibility in modern web applications.

Architecture

Clean separation for Material web apps

Design tokens

Semantic CSS custom properties for color schemes, typography scale, shapes, and motion curves.

Component architecture

Semantic HTML elements enhanced with state classes and standardized ARIA attributes.

Adaptive layouts

Responsive CSS Grid and Flexbox layouts mapped to Material window width classes.

Component workflow

From markup to verified interaction

  1. 1

    Semantic HTML structure

    Start with native HTML elements (buttons, dialogs, inputs) to ensure baseline accessibility.

  2. 2

    ARIA & Accessibility state

    Expose dynamic state using aria-expanded, aria-selected, aria-disabled, and aria-controls.

  3. 3

    Apply design tokens

    Style with CSS custom properties (var(--md-sys-color-primary), etc.) for effortless theming.

  4. 4

    Interactive state styling

    Style hover, focus-visible, active, and disabled states with clear focus rings.

Patterns & Blueprints

Expressive web component patterns

Split Buttons

Separates a primary button from a dropdown menu trigger while keeping them visually joined via border-radius tokens.

Floating Toolbars

Floating utility bars with full-rounded shapes, elevated shadow tokens, and responsive icon action sets.

Expressive Transitions

Subtle elevation and transform hover transitions with full prefers-reduced-motion fallback.

Verification & Quality

Cross-browser and accessibility standards

  • Cross-browser: Verified across modern Chromium, Safari (WebKit), and Firefox browsers.
  • Responsive Viewports: Tested across 360px (compact), 768px (medium), and 1200px+ (expanded).
  • Keyboard Accessibility: All interactive elements operable via Tab, Enter, Space, and Arrow keys.
  • Screen Readers: Verified proper announcements using NVDA / VoiceOver.