Google Material Design 3 Design System (Core Principles and Rules for Dynamic Color, Type Scale, Tonal Elevation, Shape, Adaptivity, Motion, and Accessibility)
A distillation of the core principles and foundational dimensions of Google Material 3 (M3), synthesized from Will’s Notion design notes (123 .md files across 12 categories). It covers: ① The soul of M3 — Dynamic Color (extract source color from wallpaper/content → algorithmically generate 5 key colors → tonal palette 0–100 → 26 semantic Color Roles, achieving four goals: personalization, automatic dark mode, user-controllable contrast) and the underlying HCT color model (Hue/Chroma/Tone, closer to human vision than HSL); ② Color role system (Primary/Secondary/Tertiary/Error/Surface + Container + On + Variant naming convention, 3 contrast levels Standard/Medium/High corresponding to 3:1 and 7:1); ③ Type Scale (15 styles across 5 major categories Display/Headline/Title/Body/Label, Major Second 1.125 ratio, variable fonts with 4 axes: weight, grade, width, optical size); ④ Shape (7 corner radius levels None→Full plus rounded/cut corner families); ⑤ Tonal Elevation (levels 0–5 dp; M3 uses tonal differences and overlays instead of shadows); ⑥ Layout (Window Size Classes Compact <600 / Medium 600–840 / Expanded 840–1200 / Large / XL, information density, 48dp touch targets); ⑦ Adaptive (3 strategies: hide/show, float, reflow); ⑧ Motion (easing emphasized/standard × duration 200–500ms); ⑨ Interaction state layers (hover +8% / focus +10% / press +10% / drag +16% opacity overlay); ⑩ Accessibility (WCAG contrast 3:1/4.5:1) and ⑪ Content design (20 English UI copy rules). Value for PMs: use it as a checklist when reviewing design drafts (is contrast sufficient, are touch targets large enough, are color roles used correctly, is copy sentence-case), understand why “design tokens” and “semantic colors” reduce collaboration costs, and which parts of M3 are hard constraints to copy directly (accessibility/touch target sizes) versus stylistic choices that can be deviated from (dynamic color/corner radius/font sizes). Division of labor with [[nngroup-visual-design-systems]]: that article is a general overview of “what a design system is” (Design System vs Style Guide, adopt/adapt/build your own), while this article explains the internal principles and numeric rules of the specific Material 3 design system. Audience = product managers; jargon is explained in industry terms, with a Why for each section.