Design Systems & Platform

Material Design 3

Maintained by Google

Google’s open design system covering foundations, colour, typography, components, and adaptive layouts across Android, web, and Flutter.

Why it matters

M3’s dynamic colour and tonal-palette model is the clearest public reference for building a themeable token system - worth studying even when you are not shipping Material.

Key principles

  1. Design tokens carry decisions from design to code, so themes swap without touching components.
  2. Dynamic colour derives an entire accessible palette from a single source colour using tonal ranges.
  3. Adaptive layout uses window size classes (compact, medium, expanded, large, extra-large) instead of device names.
  4. Accessibility targets are baked into the specs - minimum 48dp touch targets and documented contrast ratios.
  5. Motion follows an easing and duration scale rather than per-screen improvisation.