A decision handbook for the visual "atomic layer" of Apple design. Covers color (system semantic colors · wide color gamut · Liquid Glass palettes) / typography (SF · NY · Dynamic Type · minimum font sizes per platform) / layout (grouping · hierarchy · safe areas · progressive disclosure) / spatial layout (visionOS field of view · depth · scale) / materials (Liquid Glass vs standard materials · thin/thick selection) / motion (purposefulness · optionality · visionOS motion sickness prevention) / dark mode (not a simple inversion · 4.5:1/7:1 contrast ratios) / images (@1x/2x/3x · format selection) / app icons (layering · cross-platform shape · Icon Composer) / interface icons (optical centering · vector) / SF Symbols (4 rendering modes · 9 weights · variants · animation · customization) / branding (yielding to content). Each entry includes best practices, counterexamples, and platform differences.
Starting in iOS 26, Apple’s full new visual language Liquid Glass, plus deepened SF Symbols, typographic optical sizes, and color palette system. Liquid Glass: what it is (digital "meta-material", Lensing effect, gel-like flexibility) / material layers (specular highlights/shadows/internal glow feedback/focus changes) / two variants (Regular vs Clear plus three prerequisites for Clear) / adaptivity (small controls switch between light and dark, large panels only gray at edges, soft/hard scroll edges) / structure (depicting relationships, reflecting navigation focus, elevating controls, extending to edges) / geometric concentricity (three shapes: fixed/capsule/concentric) / legibility, Tinting, accessibility / Icon Composer icon workflow (single artwork → all platforms, six appearance modes, layered export). SF Symbols: 4 rendering modes (monochrome/hierarchical/palette/multicolor), variable color, 9 weights and 3 scales, variants, drawing animations (Draw On/Off, Magic Replace, Wiggle/Rotate/Breathe/Pulse/Bounce/Scale), interpolation principles, custom symbols. Typography: SF/NY/Compact/Mono, optical sizes SF Text/Display, variable fonts, 11 Dynamic Type text styles, tracking and leading, font selection (structure/contrast/display vs text fonts). Color palette: dual tint modes, grayscale fill/separator/system gray, semantic colors.
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.
Google UX Certificate Course 5 (Visual Design / Mockups / Design Systems) + Responsive Websites. 4 visual elements (typography/color/iconography/lines, size, shape, images) + color (60-30-10 rule + color psychology + WCAG contrast 4.5:1 + accessibility for color blindness/low contrast/photosensitivity) + typographic hierarchy/legibility + icons (action vs supplementary + text labels + branding) + layout (grids/containers/white space) + visual principles (emphasis/hierarchy/scale & proportion/unity & variety + Gestalt) + Mockups (static high-fidelity) + design systems (4 components + 4 levels of UI patterns + 5 benefits + Sticker Sheets + Figma components/instances + Material/Polaris/Apple HIG/Fluent/USWDS) + responsive design (pros and cons of native apps vs responsive web + hamburger menus/cards/carousels/CTAs) + design ethics (attention economy/dark patterns/marginalized groups). Targeted at PMs
19 curated core articles from the Nielsen Norman Group visual design principles subset. One core thread breaks "looking good" down into "working well": ① The five overarching visual principles (Scale, with a maximum of 3 size levels; Visual Hierarchy; Balance, covering symmetrical, asymmetrical and radial types; Contrast; Gestalt) form the master framework. ② The four Gestalt grouping principles: Proximity (the strongest grouping cue; split a 12-field form into 3 groups of 4), Similarity (color > shape > size for conveying grouping, with counterexamples of misleading similarity), Closure (the brain fills in missing parts; crop carousels by 40% to imply more content, the illusion of completeness), Common Region (containers/borders/background color > proximity + similarity, the false bottom trap). ③ Implementing visual hierarchy: color contrast (2 primary, 2 secondary, no more than 3 contrast variations), scale (3 levels, no more than 2 large elements), grouping (proximity + common region), the Squint Test; grids (Columns: 12 on desktop, 4 on mobile; Gutters; Margins; 8px grid; column grid/modular grid/hierarchical grid; 1128px 12-column layout with 72px column width and 24px gutter); golden ratio φ≈1.618 (applied to font size/line height/image cropping/two-column layouts). ④ Typography: 30+ entry glossary (baseline/x-height/kerning/leading/ligatures/widows), 6 typeface categories for pairing (serif/sans-serif/slab serif/script/decorative/monospace) plus pairing decorative typefaces with neutral ones, using multiple weights of a single typeface, optimal reading typefaces (352 participants tested 16 typefaces; the fastest was 35% faster than the slowest; reading speed drops 1.5 WPM per year, a 11% decline over 20 years; Garamond was suitable for only 48% of readers; there is no universal best typeface). ⑤ Color (primary/secondary/tertiary colors on the color wheel, 5 harmony schemes, 60-30-10 rule, limit to 3 colors, color meanings are not globally universal). ⑥ Imagery (Picture-Superiority Effect; photos should carry information rather than serve as decoration; 4 types of imagery; lists using color + icons are 37% faster to process than plain text; visual signifiers). ⑦ Aesthetic-usability effect (attractive designs are perceived as easier to use; 1995 Kurosu study of 26 ATMs; it masks minor issues but cannot rescue major flaws, and interferes with usability testing). Intended audience: product managers; terms are explained in industry language, content is decision-oriented (when to use/how to choose/counterexamples), all numeric values are retained.
