Material Design: Design System Fundamentals

Material Design is Google's open-source design system — a set of guidelines, components, and tools for building consistent, accessible UIs across platforms. Material 3 (Material You) is the current version, introduced with Android 12.

Core Principles

• Material as a metaphor: UI elements behave like physical materials — they have depth, shadow, and respond to touch.

• Bold, graphic, intentional: typography, grids, and color are the primary design tools.

• Motion provides meaning: transitions communicate relationships and hierarchy, not decoration.

• Adaptive design: layouts respond to different screen sizes; components adapt to context.

• Accessibility first: minimum contrast ratios (4.5:1 text), touch targets (48×48dp), screen reader support built-in.

Color System

Material 3 uses a color scheme derived from a seed color. Dynamic color (Material You) generates the scheme from the user's wallpaper on Android 12+.

Color roles (Material 3):
  Primary         — main brand color, key actions
  On Primary      — text/icons on Primary surface
  Primary Container — tonal variant of Primary (less prominent)
  On Primary Container — text/icons on Primary Container

  Secondary       — supporting accent
  Tertiary        — contrasting accent, rarely used
  Error           — error states
  Surface         — backgrounds (cards, dialogs, sheets)
  On Surface      — text/icons on Surface
  Outline         — borders, dividers

Tonal surface colors:
  Surface Dim / Surface / Surface Bright — hierarchy within surfaces
  Surface Container (Lowest/Low/Medium/High/Highest) — layering

Dynamic color (Android 12+):
  MaterialTheme.colorScheme.primary   — adapts to wallpaper
  Generated via Material Theme Builder or dynamic palette APIs

Typography

Type scale (Material 3):
  Display Large   57sp  — hero text, splash screens
  Display Medium  45sp
  Display Small   36sp
  Headline Large  32sp  — page titles
  Headline Medium 28sp
  Headline Small  24sp
  Title Large     22sp  — app bar, dialog titles
  Title Medium    16sp  (medium weight)
  Title Small     14sp
  Body Large      16sp  — paragraph text
  Body Medium     14sp
  Body Small      12sp
  Label Large     14sp  — buttons, tabs
  Label Medium    12sp
  Label Small     11sp  — captions, overlines

Spacing & Layout

Layout grid:
  Mobile (compact): 4-column grid, 16dp margins
  Tablet (medium):  8-column grid, 24dp margins
  Desktop (expanded): 12-column grid, 24dp margins

Base unit: 4dp (spacing, sizing multiples of 4)
  8dp  — small gaps, icon padding
  16dp — default list item padding, screen margins
  24dp — section spacing
  48dp — minimum touch target size

Elevation (Material 3 — uses tones, not shadows):
  Level 0: 0dp   (Surface)
  Level 1: 1dp   (Surface Container Low)
  Level 2: 3dp   (Surface Container)
  Level 3: 6dp   (Surface Container High)
  Level 4: 8dp   (Navigation drawer)
  Level 5: 12dp  (Menus, FAB)