Material Design UI and UX for Web

Design tokens

CSS Custom Properties token architecture

:root {
  /* Color Roles - Light Scheme */
  --md-sys-color-primary: #00639b;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #cee5ff;
  --md-sys-color-on-primary-container: #001d33;

  --md-sys-color-surface: #f8f9ff;
  --md-sys-color-on-surface: #191c20;
  --md-sys-color-surface-container: #eceef4;
  --md-sys-color-surface-container-high: #e6e8ee;

  --md-sys-color-outline: #73777f;

  /* Typography Scale */
  --md-sys-typescale-display-large: 400 3.5rem / 4rem 'Roboto Flex', sans-serif;
  --md-sys-typescale-title-medium: 500 1rem / 1.5rem 'Roboto Flex', sans-serif;
  --md-sys-typescale-body-large: 400 1rem / 1.5rem 'Roboto Flex', sans-serif;

  /* Shapes & Motion */
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-full: 9999px;
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #97cbff;
    --md-sys-color-on-primary: #003355;
    --md-sys-color-primary-container: #004b77;
    --md-sys-color-surface: #101418;
    --md-sys-color-on-surface: #e1e2e8;
    --md-sys-color-surface-container: #1d2024;
  }
}

Responsive layout

Viewport breakpoints and reflow

Compact (< 600px)

Single-column flow, bottom sheets, full-width actions, and collapsible navigation drawer.

Medium (600–839px)

Two-column grid layout, persistent navigation rail or header, and fluid container sizing.

Expanded (840–1199px)

Multi-column layout, persistent navigation, and master-detail split views.

Large (1200px+)

Constrained maximum reading width (e.g. max-width: 1280px) to maintain comfortable line lengths.

Interaction states

Semantic HTML and visible focus

Native Controls First: Use semantic elements (<button>, <dialog>, <details>) before building custom ARIA widgets.
Full State Matrix: Style :hover, :focus-visible, :active, :disabled, and [aria-selected="true"].

Unobscured Focus: Provide a clear 2px outline for keyboard focus:

:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

Accessibility (WCAG)

Inclusive web experiences

Touch Targets: Maintain minimum 48x48 CSS pixel hit targets for interactive elements.
Color Contrast: Guarantee 4.5:1 text contrast and 3:1 non-text contrast in both light and dark themes.
Reduced Motion: Respect prefers-reduced-motion by disabling long transitions while preserving instant state changes.
Zoom Support: Ensure layouts function without horizontal scrolling at 200% browser text magnification.