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)

Material Design: Components, Theming & Material You

Core Components

Action components:
  Button variants: Filled, Outlined, Text, Elevated, Tonal
  FAB (Floating Action Button): standard, small, large, extended
  Icon Button: standard, filled, tonal, outlined
  Segmented Button: single/multi select

Navigation:
  Navigation Bar  — bottom, 3-5 destinations (mobile)
  Navigation Rail — side, 3-7 destinations (tablet)
  Navigation Drawer — side panel, many destinations (desktop)
  Top App Bar: center-aligned, small, medium, large

Containment:
  Card variants: Elevated, Filled, Outlined
  Dialog: basic, full-screen
  Bottom Sheet: modal, standard
  Side Sheet: modal, standard (desktop)

Selection:
  Checkbox, Radio Button, Switch, Slider (continuous/discrete)
  Date Picker, Time Picker

Text input:
  Text Field: Filled, Outlined
  Search Bar, Search View

Feedback:
  Progress Indicator: linear, circular (determinate/indeterminate)
  Snackbar (brief message + optional action)
  Badge (notification count on icon)

Theming with Material Theme Builder

// Android — Material 3 with Jetpack Compose
// build.gradle: implementation("androidx.compose.material3:material3")

val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40,
    // ...
)

val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    secondary = PurpleGrey80,
    // ...
)

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,   // Material You
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context)
            else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

Material Web (Web Components)

<!-- Install -->
<!-- npm install @material/web -->

<link rel="stylesheet" href="@material/web/all.css">
<script type="module" src="@material/web/all.js"></script>

<!-- Buttons -->
<md-filled-button>Save</md-filled-button>
<md-outlined-button>Cancel</md-outlined-button>
<md-text-button>Learn more</md-text-button>

<!-- Text field -->
<md-outlined-text-field label="Email" type="email"></md-outlined-text-field>

<!-- Navigation bar -->
<md-navigation-bar>
  <md-navigation-tab label="Home"><md-icon slot="active-icon">home</md-icon></md-navigation-tab>
  <md-navigation-tab label="Favorites"><md-icon slot="active-icon">favorite</md-icon></md-navigation-tab>
</md-navigation-bar>

Tools & Resources

• Material Theme Builder (m3.material.io/theme-builder): generate color schemes from a seed color, export to Compose/Flutter/Web.

• Material Symbols: icon library with 2500+ icons, variable font (fill, weight, grade, optical size). Use as web font or Compose icons.

• Figma Material 3 Design Kit: official design file with all components, color tokens, and spacing specs.

• Material Design for Flutter (pub.dev/packages/material_design): Flutter ships MD3 natively in the Material library.

• MUI (mui.com): leading React implementation of Material Design. Use ThemeProvider + createTheme() for custom themes.

• Vuetify (vuetifyjs.com): Material Design component framework for Vue 3.