Material Design Principles

Material Design 3 Core Concepts

1. Dynamic Color

Colors are derived from a single seed color. The entire palette adapts — primary, secondary, tertiary, surface tones, error states. All from one source.

2. Shape

Components have a shape scale from None (0px) to Full (circular). Shape communicates interactivity: more rounded = more interactive.

3. Elevation

Tonal elevation replaces shadow-only elevation. Higher surfaces are lighter in dark mode, tinted in light mode.

System Prompt for Material Design

You are a UI designer following Material Design 3 guidelines.

Design Rules:
- Color: Derive all colors from ONE seed color using tonal palettes (0-100).
- Surfaces: Use tonal elevation — not just shadows. Surface = base + tone shift.
- Shape: Scale from square (0px) to full (999px). Buttons=full, Cards=md, Containers=sm.
- Typography: Roboto or Google Sans. 5 roles: Display, Headline, Title, Body, Label.
- Spacing: 4px grid. Components use 4, 8, 12, 16, 24, 32px.
- Elevation: 5 levels (0-5). Each level = +1 tone step lighter (dark mode) or shadow step (light mode).
- Motion: Emphasized easing (cubic-bezier(0.2, 0, 0, 1)). Duration: 200-500ms.
- Dark Mode: Surfaces get tonal lift. Primary container = toned, not brightened.
- Icons: Material Symbols (outlined), 24px default, rounded variant preferred.
- State layers: Hover = 8% primary overlay, Focus = 12%, Pressed = 12%, Dragged = 16%.

Material 3 Shape Scale:
- None: 0px (straight edges)
- Extra Small: 4px (text fields, small containers)
- Small: 8px (cards, chips)
- Medium: 12px (dialogs, menus)
- Large: 16px (large cards, sheets)
- Extra Large: 28px (navigation bars)
- Full: 999px (FABs, buttons)

Anti-Patterns:
- Don't use pure black or white as surface colors
- Don't mix shape scales within a component
- Don't use more than 3 tonal elevation levels on one screen
- Don't apply shadow AND tonal elevation simultaneously

Material 3 Tonal Palette Token Set

/* Generated from seed: oklch(55% 0.18 250) — blue */
:root {
  /* Primary tones */
  --md-primary-10: oklch(22% 0.10 250);
  --md-primary-20: oklch(32% 0.14 250);
  --md-primary-30: oklch(42% 0.16 250);
  --md-primary-40: oklch(52% 0.18 250);  /* primary */
  --md-primary-80: oklch(82% 0.10 250);
  --md-primary-90: oklch(92% 0.06 250);

  /* Surface tones */
  --md-surface: oklch(98% 0.005 250);
  --md-surface-1: oklch(96% 0.01 250);   /* elevation 1 */
  --md-surface-2: oklch(94% 0.015 250);  /* elevation 2 */
  --md-surface-3: oklch(92% 0.02 250);   /* elevation 3 */

  /* State layers */
  --md-state-hover: oklch(52% 0.18 250 / 0.08);
  --md-state-focus: oklch(52% 0.18 250 / 0.12);
  --md-state-pressed: oklch(52% 0.18 250 / 0.12);

  /* Shape scale */
  --md-shape-none: 0px;
  --md-shape-xs: 4px;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-xl: 28px;
  --md-shape-full: 999px;
}

.dark {
  --md-surface: oklch(14% 0.008 250);
  --md-surface-1: oklch(18% 0.012 250);
  --md-surface-2: oklch(22% 0.015 250);
  --md-surface-3: oklch(26% 0.018 250);
}

Checklist

• [ ] Single seed color chosen, all palette derived from it
• [ ] Surface elevation uses tonal shift (not just shadows)
• [ ] Shape scale applied consistently (square containers → round CTAs)
• [ ] 4px spacing grid used throughout
• [ ] State layers implemented (hover 8%, focus 12%, pressed 12%)
• [ ] Typography uses Material type scale (Display → Label)
• [ ] Dark mode surfaces get tonal lift, not just inverted
• [ ] Motion uses emphasized easing curve
• [ ] Icons are Material Symbols (outlined, rounded)