start-vibing 4.0.2 → 4.1.1

package/template/.claude/skills/super-design/references/design-theory.md

@@ -0,0 +1,706 @@
+# The complete design decision framework: theory, vibes, and rules
+
+This reference synthesizes color theory, perception science, UX laws, typography, brand strategy, and aesthetic vocabularies into a single working document. It is organized so you can **start anywhere**: read linearly for education, or jump to Part 7 (the decision tree) when you have a brief on your desk. Every claim below is traceable to a primary source — cited inline with author and year — and every aesthetic comes with concrete hex values, typefaces, and benchmark brands so the choices are defensible, not decorative.
+
+Two framing ideas run through everything. First, **design is encoding**: colors, type, spacing, and motion are not neutral — they are a lossy compression of brand strategy into perceptual signals, and a good framework decodes back cleanly. Second, **beauty is usability**: the aesthetic–usability effect (Kurosu & Kashimura 1995; Tractinsky et al. 2000) and processing fluency research (Reber, Schwarz & Winkielman 2004) show aesthetic quality is *functional*, not ornamental — it lowers cognitive load, raises trust, and shifts user tolerance for friction.
+
+---
+
+## Part 1 — Theoretical foundations
+
+### 1.1 Color theory lineage
+
+**Newton (1704, *Opticks*)** proved white light splits into a spectrum and drew the first color wheel, closing the loop between red and violet. This is the **physics layer**: wavelength → hue.
+
+**Goethe (1810, *Zur Farbenlehre / Theory of Colours*)** rejected Newton's purely physical account and studied how color is *experienced* — afterimages, shadows, simultaneous contrast, emotional pairings. Goethe is the **phenomenology layer** and the grandfather of all color-psychology work. Designers read Newton to understand screens; they read Goethe to understand feelings.
+
+**Chevreul (1839, *De la loi du contraste simultané des couleurs*)**, chemist at the Gobelins tapestry works, formalized the *law of simultaneous contrast*: adjacent colors shift each other perceptually (a gray looks warm next to blue, cool next to red). This book directly influenced Delacroix, Seurat, Signac and the Impressionists. For UI designers it explains why a single "gray" will look different against different surfaces — **there is no context-free color.**
+
+**Munsell (1905)** built the first perceptually uniform 3-D color solid: **Hue / Value / Chroma** — a cylinder of hues wrapped around a lightness axis with saturation extending outward. This is the ancestor of HSL and of every modern design token system that separates lightness from hue.
+
+**Ostwald (1916, *Die Farbenfibel*)** proposed a competing system of 24 hues with structured tint/shade/tone paths — influential in German/Bauhaus education and on industrial color standards.
+
+**Itten (1921, Bauhaus; later *Kunst der Farbe / The Art of Color*, 1961)** taught color at the Bauhaus with a 12-hue wheel and his famous **seven contrasts**: hue, light–dark (value), cold–warm, complementary, simultaneous, saturation, and extension (Goethe's proportion principle — yellow:orange:red:violet:blue:green = 9:8:6:3:4:6). Itten also introduced the "four seasons" personal palette typology that became the pop-culture color-analysis industry. **For UI: Itten's *extension* is the deep theory behind 60-30-10.**
+
+**Albers (1963, *Interaction of Color*)**, Itten's student, stripped color theory to a single thesis: *"color is the most relative medium in art."* His silkscreen studies show the same swatch reading as two different colors depending on surround. Every serious designer should do his exercises at least once — they cure the illusion that hex codes are fixed meanings.
+
+**Faber Birren (*Color Psychology and Color Therapy*, 1950)** was the first American color consultant for industry, popularizing functional color (safety yellow, hospital green). His work is largely pre-empirical and should be read historically rather than cited as science.
+
+**NCS (Natural Color System, Sweden, codified 1979, based on Ewald Hering's 1892 opponent-process theory)** describes colors as mixtures of the six elementary perceptions: white, black, red, yellow, green, blue. Dominant in Scandinavian architecture and product design.
+
+**Pantone Matching System (1963, Lawrence Herbert)**: not a theory but a printing standard. Its cultural power comes from *social coordination* — "Pantone 186 C" means the same across continents.
+
+**CIE systems (XYZ 1931, CIELAB 1976, LCh)**: perceptually uniform device-independent color spaces used for color management, color difference math (ΔE), and modern design-token color-contrast calculations.
+
+**Digital spaces**: **RGB** (additive, screens), **CMYK** (subtractive, print), **HSL/HSB** (designer-friendly hue/saturation/lightness), **OKLCH (2020, Björn Ottosson)** — a perceptually uniform cylindrical space increasingly used in design systems (Tailwind v4, Radix Colors, Leonardo by Adobe) because equal numeric steps produce equal visual steps, which hex/HSL cannot guarantee.
+
+### 1.2 Color psychology — what the evidence actually supports
+
+Color psychology is the field where folk wisdom most outstrips replicated science. Treat the following with calibrated confidence:
+
+- **Elliot & Maier, "Color and Psychological Functioning"** (*Current Directions in Psychological Science*, 2007; *Annual Review of Psychology*, 2014). Red impairs performance on achievement tasks (IQ-like tests) and increases attraction ratings in mate-evaluation contexts. Effect sizes are modest (d ≈ 0.3–0.6) and **many replications have been mixed**; treat as directional, not deterministic.
+- **Mehta & Zhu, "Blue or Red? Exploring the Effect of Color on Cognitive Task Performances"** (*Science*, 2009). Red enhanced performance on detail/memory tasks; blue enhanced performance on creative tasks. Interpretation: red activates avoidance motivation (vigilance), blue activates approach motivation (exploration). Useful metaphor even where replication is partial.
+- **Valdez & Mehrabian, "Effects of Color on Emotions"** (*Journal of Experimental Psychology: General*, 1994). Across 250+ color samples, **brightness (value) and saturation predicted emotional response far more strongly than hue itself** — pleasure and arousal loaded on saturation/brightness, not on specific colors. **This is the single most important empirical finding for designers**: *your lightness and saturation choices matter more than your hue choices.*
+- **Jonauskaite et al., "Universal Patterns in Color-Emotion Associations Are Further Shaped by Linguistic and Geographic Proximity"** (*Psychological Science*, 2020; n ≈ 4,600, 30 nations). Red→love/anger, yellow→joy, black→sadness show cross-cultural convergence, but ~20% of variance is culturally specific.
+- **Zeki (UCL) on V4 cortex**: color is processed in area V4/V8 of the visual cortex; damage produces achromatopsia. Aesthetic judgments light up the **medial orbitofrontal cortex** (Ishizu & Zeki 2011).
+- **Satyendra Singh, "Impact of color on marketing"** (*Management Decision*, 2006): frequently quoted "90 seconds / 62-90% based on color" — **this is folk citation; the study's sample and method do not support those precise numbers**. Use directionally.
+- **Aslam, "Are You Selling the Right Colour? A Cross-Cultural Review"** (*Journal of Marketing Communications*, 2006): cross-cultural color meanings diverge enough that global brands should localize accents, not primary equity colors.
+
+**Takeaway**: Saturation × value > hue for predicting emotional response. Cultural context matters more than universal archetypes. Be skeptical of any source that claims "red means X" without an effect size.
+
+### 1.3 Gestalt — all the principles, not just six
+
+Founded by **Max Wertheimer (1912 phi phenomenon paper)**, with **Kurt Koffka** and **Wolfgang Köhler**, at the Berlin School. **Prägnanz ("law of good figure")** is the master principle: the perceptual system organizes stimuli into the simplest, most stable interpretation. Every other principle is a corollary.
+
+| Principle | Definition | UI application |
+|---|---|---|
+| **Prägnanz** | Default to simplest stable interpretation | Reduce visual noise until structure reads in 1 second |
+| **Proximity** | Close things = one group | Form field groups, card padding, label-to-input distance |
+| **Similarity** | Like-looking things = one group | Consistent button styles, icon weight |
+| **Continuity** | Smooth paths read as one | Aligned columns, flowing cursor paths |
+| **Closure** | Mind completes missing info | Logo marks, dotted outlines, loading states |
+| **Figure/Ground** | Foreground vs. background | Modals, cards on canvas, focus states |
+| **Common Fate** | Shared motion = one group | Staggered list animations, carousels |
+| **Common Region** (Palmer 1992) | Shared container = one group | **Card UI is almost entirely this principle** |
+| **Uniform Connectedness** (Palmer & Rock 1994) | Connected elements = one group, *strongest* grouping cue | Tab underlines, breadcrumb carets, section rules |
+| **Symmetry** | Symmetric pairs read as unit | Split layouts, side-by-side comparison |
+| **Past Experience** | Familiar configurations read instantly | Don't reinvent hamburgers, save icons, checkboxes |
+| **Focal Point / Isomorphic Correspondence** | Salient point anchors hierarchy | Hero CTAs, avatar anchors |
+| **Parallelism** | Parallel elements group | Grid layouts, stacked list items |
+| **Meaningfulness** | Meaning enhances grouping | Paired icon+label beats icon alone |
+
+Operational rule: **when something on a screen feels "off," it's almost always a Gestalt violation** — proximity is saying one thing while similarity says another.
+
+### 1.4 Visual perception — the biological constraints
+
+- **Fovea ≈ 2° of visual field** at arm's length — roughly a thumbnail. Only foveal vision resolves fine type. Peripheral vision is low-resolution but highly motion-sensitive, which is why animated ads feel intrusive and why subtle peripheral motion (a toast, a spinner) is strongly attention-grabbing.
+- **Saccades** last 20–40 ms; **fixations** last ~200–300 ms. During a saccade, **saccadic suppression** makes us effectively blind. We read in jumps, not sweeps.
+- **Change blindness & inattentional blindness** — Simons & Chabris (1999), "Gorillas in Our Midst" — demonstrated that we miss large visual changes if attention is elsewhere. Practical consequence: **critical UI changes need motion or color change, not just repositioning.**
+- **Reading patterns** (Nielsen Norman Group eye-tracking studies, 2006–2020):
+  - **F-pattern** on text-heavy pages — readers scan top, then progressively less, forming an F.
+  - **Z-pattern** on lightly-loaded landing pages.
+  - **Layer cake** pattern on well-structured headings.
+  - **Spotted pattern** on dense UI / search results.
+  - **Commitment pattern** when motivation is high (long-form).
+- **Pre-attentive attributes (Anne Treisman, 1980)** — processed in <200 ms, before conscious attention: color, motion, orientation, size, curvature, enclosure, 3-D depth cues. Use exactly one pre-attentive channel to mark "the one important thing."
+- **Banner blindness** (Benway 1998): users systematically skip ad-shaped content at ad-typical positions. Modern corollary: **anything that looks like a cookie banner gets dismissed without reading**.
+
+### 1.5 The UX laws (with original sources and formulas)
+
+| Law | Source | Formula / core claim | Practical use |
+|---|---|---|---|
+| **Hick's Law** | Hick 1952; Hyman 1953 | RT = a + b·log₂(n+1) | Decision time grows log with choices — but only for *undifferentiated* options. Segmenting choices (categories) breaks the log curve. |
+| **Fitts's Law** | Fitts 1954 | MT = a + b·log₂(2D/W) | Large, close targets are faster. Foundation of macOS infinite-edge menu bar, iOS bottom-nav thumbzones. |
+| **Miller's Law** | Miller 1956 | Working memory ≈ "7 ± 2 chunks" | **Widely misapplied** — Miller was describing short-term *recall*, not menu items. **Cowan (2001) revised to 4 ± 1** for true working memory. Use as "chunk, don't enumerate," not as a magic number. |
+| **Cognitive Load Theory** | Sweller 1988 | Intrinsic + extraneous + germane load | Extraneous load = what design adds; minimize it. Intrinsic = task-essential. Germane = load that builds schema (good). |
+| **Jakob's Law** | Nielsen 2000 | Users spend most of their time on *other* sites | Follow conventions for 90% of UI, differentiate on the 10% that is your brand. |
+| **Tesler's Law** | Larry Tesler, Xerox PARC | Every system has irreducible complexity — the only question is who absorbs it | Push complexity away from user into system/defaults. |
+| **Postel's Law** | Jon Postel, RFC 760 | Be conservative in what you send, liberal in what you accept | Forgiving input, strict output (form validation philosophy). |
+| **Doherty Threshold** | Doherty & Thadhani, IBM 1982 | System response <400 ms sustains flow | Anything slower needs a skeleton/optimistic UI. |
+| **Peak-End Rule** | Kahneman 1993+ | Experiences judged by peak + end, not average | Invest in onboarding climax and final confirmation. |
+| **Serial Position** | Ebbinghaus 1885 | Primacy + recency beat middle | Put key items first and last in lists. |
+| **Von Restorff / Isolation** | Hedwig von Restorff 1933 | The odd-one-out is remembered | **This is the formal law behind the 10% accent color.** |
+| **Zeigarnik Effect** | Bluma Zeigarnik 1927 | Interrupted tasks remembered better | Progress indicators, partial-completion nudges. |
+| **Goal-Gradient** | Hull 1932; Kivetz et al. 2006 | Effort increases with apparent proximity to goal | Pre-filled progress bars, "you're 80% done." |
+| **Pareto / 80-20** | Pareto 1896 | ~80% of effects from ~20% of causes | Optimize the top-20% screens first. |
+| **Occam's Razor** | Ockham 14c | Prefer the simpler explanation | Remove before adding. |
+
+### 1.6 The aesthetic–usability effect and processing fluency
+
+- **Kurosu & Kashimura (1995)**, *"Apparent Usability vs. Inherent Usability"* (CHI '95), tested 26 ATM-layout variants in Japan. Correlation between *perceived* usability and *apparent beauty* ≈ 0.59; correlation between beauty and *inherent* usability was similarly high. Beauty shaped usability judgment more than actual efficiency did.
+- **Tractinsky (1997)** replicated in Israel explicitly to *refute* a Japan-specific aesthetic-culture explanation, and instead confirmed the effect (r ≈ 0.7).
+- **Tractinsky, Katz & Ikar (2000)**, *"What Is Beautiful Is Usable"* (*Interacting with Computers*), extended the finding and gave the effect its lasting name.
+- **Hassenzahl (2004)**, *"The Interplay of Beauty, Goodness, and Usability"*, separated **hedonic quality** (stimulation, identification) from **pragmatic quality** (efficiency) and showed the two combine into overall appeal.
+- **Tuch, Roth, Hornbæk, Opwis & Bargas-Avila (2012)**, *"Is Beautiful Really Usable?"*, showed the aesthetic halo *weakens when usability problems are severe* — beauty buys tolerance for minor friction, not for broken flows.
+- **Reber, Schwarz & Winkielman (2004)**, *"Processing Fluency and Aesthetic Pleasure"* (*Personality and Social Psychology Review*) — the deep mechanism. Symmetry, contrast, prototypicality, clarity, and figure-ground separation increase *processing fluency*; fluency produces mild positive affect, which is then misattributed to the stimulus ("this is beautiful"). **Winkielman & Cacioppo (2001)** measured the smile-muscle (zygomaticus) EMG response to fluent stimuli — real, automatic, pre-reflective positive affect.
+
+**Consequence**: clean UI isn't just *judged* easier — it is *literally* easier to process, and the resulting positive affect bleeds onto the brand. Fluency is why good typography, consistent spacing, and obvious hierarchy outperform clever-but-dense alternatives.
+
+### 1.7 Peak-shift principle and neuroaesthetics
+
+- **Ramachandran & Hirstein (1999)**, *"The Science of Art"* (*Journal of Consciousness Studies*), proposed 8 laws of aesthetic experience: **peak shift**, grouping, contrast, isolation, perceptual problem-solving, symmetry, abhorrence of coincidence, metaphor.
+- **Peak shift**: a caricature that exaggerates distinctive features fires the feature-detecting neurons *harder* than the original — which is why mascots, icons, and Pixar characters are more compelling than photorealistic equivalents. Duolingo's Duo, Linear's precise geometric logo, and Arcane's character silhouettes all exploit this.
+- **Anjan Chatterjee's aesthetic triad**: sensory-motor / emotion-valuation / meaning-knowledge. A great design scores on all three. Purely sensory work is pretty but forgettable; purely meaningful work is clever but unloved.
+- **Langlois & Roggman (1990)**: averaged faces are rated more attractive. Prototypicality drives beauty — another version of fluency. Confirms *Reinecke et al. 2013* (Google) for websites: **low visual complexity + high prototypicality = peak first-impression appeal**.
+
+### 1.8 First impressions and trust
+
+- **Lindgaard, Fernandes, Dudek & Brown (2006)**, *"Attention web designers: You have 50 milliseconds to make a good first impression"* (*Behaviour & Information Technology*). Judgments formed in 50 ms correlate ≥0.8 with judgments after longer exposure.
+- **Reinecke, Yeh, Miratrix, Mardiko, Zhao, Liu & Gajos (2013)**, *"Predicting Users' First Impressions of Website Aesthetics"* (CHI). Among low-complexity and prototypical designs = highest appeal. Messy + unfamiliar = worst.
+- **Sillence, Briggs, Harris & Fishwick (2007)** on trust in health websites: **~94% of trust-related first impressions were design-based**, not content-based.
+- **Fogg et al. (2003)**, Stanford Web Credibility study, n ≈ 2,400: visual design was the #1 driver of self-reported credibility, ahead of content and reputation.
+
+---
+
+## Part 2 — Structural rules and ratios
+
+### 2.1 Proportion systems
+
+- **Golden ratio (φ ≈ 1.618)**. Culturally magnetic since Pacioli's *De Divina Proportione* (1509). Honest caveat from mathematician Keith Devlin: *"The Myth That Won't Go Away"* — most attributions (Parthenon, Mona Lisa) are post-hoc. Still a useful *starting* ratio for type scales and image crops because it is large enough to create obvious hierarchy.
+- **Rule of thirds**. Photography composition; in UI, offset a hero subject to a third line rather than center for dynamic stills.
+- **Root rectangles**: √2 (1.414) is the A-paper system (A4 halves into two A5s of the same proportion); √3, √φ less common.
+- **Le Corbusier's Modulor (1948/1955)**: anthropometric scale derived from a 1.83 m man and the golden ratio. Use: spacing scales that feel human-bodied rather than arbitrary.
+- **Musical ratios**: perfect fifth 3:2 (1.500), octave 2:1, minor third 6:5 (1.200), major third 5:4 (1.250), perfect fourth 4:3 (1.333). These are the ratios you actually pick from on typescale.com.
+
+### 2.2 Type scales and vertical rhythm
+
+- **Tim Brown, "More Meaningful Typography"** (A List Apart, 2011), popularized modular scales for the web. Formula: *size = base × ratio^step*. Common ratios and their character:
+
+| Ratio | Name | Feel |
+|---|---|---|
+| 1.067 | Minor second | Dense, editorial, legal |
+| 1.125 | Major second | Quiet, calm corporate |
+| 1.200 | Minor third | Balanced SaaS default |
+| 1.250 | Major third | Clear hierarchy |
+| 1.333 | Perfect fourth | Confident marketing |
+| 1.414 | Augmented fourth | Bold editorial |
+| 1.500 | Perfect fifth | Dramatic |
+| 1.618 | Golden | Poster-scale contrast |
+
+- **Bringhurst, *Elements of Typographic Style* (1992)** — the canonical book. Key rules: measure **45–75 characters per line (≈66 optimum)**, leading **1.2 for display, 1.4–1.6 for body** (many UIs overshoot to 1.5–1.7 for comfort), set body at the size you'd read a book at, not smaller.
+- **Vox-ATypI classification**: humanist, garalde, transitional, didone, mechanistic (slab), lineal (humanist sans / grotesque / neo-grotesque / geometric), glyphic, script, graphic, blackletter. Use this vocabulary to justify picks: "we chose a humanist sans (Inter) because its open apertures outperform geometric sans (Futura) at small sizes."
+- **x-height beats point size for legibility**. Inter, SF Pro, and IBM Plex all have large x-heights deliberately.
+- **Variable fonts (OpenType 1.8, 2016)** let a single file interpolate weight, width, optical size — design-system gold because weight tokens become truly continuous.
+- **UI typeface history you should know**: Helvetica (Miedinger & Hoffmann, Haas Foundry, 1957) → Arial (Monotype, 1982) → Verdana (Matthew Carter for Microsoft, 1996) → Segoe UI (Microsoft) → SF Pro (Apple, 2015) → Roboto (Google, 2011) → Inter (Rasmus Andersson, 2016) → Geist (Vercel, 2023).
+
+### 2.3 Grids
+
+- **Swiss / International Typographic Style**. Core texts: **Müller-Brockmann, *Grid Systems in Graphic Design* (1981)**; Karl Gerstner, *Designing Programmes* (1964); Emil Ruder, Armin Hofmann. Dogma: objective typography, asymmetric grids, left-alignment, photography over illustration, Akzidenz-Grotesk / Helvetica. Signals rigor and seriousness.
+- **12-column grid (Bootstrap, 960.gs)** dominates the web because 12 is divisible by 2, 3, 4, 6.
+- **8-point grid (Bryn Jackson, "Intro to the 8-Point Grid System," *Spec*, 2014)**: all spacing and sizing in multiples of 8 (with 4 as a sub-increment). Why 8: it divides neatly into iOS @1x/@2x/@3x and Android mdpi/xhdpi/xxhdpi density multipliers; it's visually distinct enough to feel deliberate.
+- **Baseline grids** align type to a shared vertical rhythm (usually 4 or 8 px). Rigorous but hard to maintain with mixed type sizes; often worth relaxing to a stack-spacing rhythm.
+- **Linear spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96)** is the SaaS default; a doubling scale (4, 8, 16, 32, 64) forces more dramatic hierarchy and suits editorial or marketing work.
+
+### 2.4 Whitespace and density
+
+Whitespace is *not* empty; it is a premium signal because it costs attention real-estate. Research by **Lin (2004)** suggested ~20% more whitespace correlates with ~20% higher comprehension — often quoted uncritically, but the directional finding holds across replications. Luxury brands use macro whitespace (big margins around hero content); utility dashboards use micro whitespace (tight card padding) because density = value-per-pixel when you're doing data work.
+
+### 2.5 WCAG accessibility floors
+
+- **WCAG 2.1 (2018), 2.2 (Oct 2023), 3.0 draft**.
+- **Contrast**: text **4.5:1 AA** (normal), **3:1 AA** (≥18 pt or ≥14 pt bold), **7:1 AAA**, **3:1** for non-text UI components and graphical objects (1.4.11).
+- **APCA (Accessible Perceptual Contrast Algorithm, Andrew Somers)** replaces the old luminance-ratio math with a perceptual model; adopted by WCAG 3 drafts and by Adobe Spectrum, GitHub, Figma Variables.
+- **Target size**: WCAG 2.2 **2.5.8 Target Size (Minimum) = 24×24 CSS px (AA)**; 2.5.5 = 44×44 (AAA). Apple HIG: **44×44 pt**; Material: **48×48 dp**.
+- **Color not sole means (1.4.1)** — never encode state in hue alone.
+- **Motion**: honor `prefers-reduced-motion`; remove parallax and big scale animations for users with vestibular disorders.
+- **Focus visible (2.4.7)** — never disable focus rings without replacing them.
+
+### 2.6 Motion and timing
+
+- **Disney's 12 Principles (Thomas & Johnston, *The Illusion of Life*, 1981)**: squash/stretch, anticipation, staging, straight-ahead/pose-to-pose, follow through & overlapping action, slow in/slow out, arcs, secondary action, timing, exaggeration, solid drawing, appeal.
+- **Material Motion (Google)**: authentic, focused, intentional. Specific easing tokens (`standard`, `emphasized`, `decelerated`, `accelerated`) and duration tokens (50–600 ms).
+- **Apple HIG**: fluid, familiar, intentional; prefer spring physics over cubic-bezier for natural responsiveness.
+- **Duration guidance**: hover/press ≈ 80–120 ms; UI state change 150–250 ms; page transition 250–400 ms; larger hero motion 400–600 ms (rarely more without purpose). **Doherty threshold = 400 ms** is the hard ceiling before *perceived unresponsiveness* begins.
+
+### 2.7 Evaluation heuristics
+
+- **Squint test**: blur your eyes (or Gaussian-blur the screen 5 px). Hierarchy should still read; groupings should still group. This is the fastest way to audit a layout before shipping.
+- **5-second test**: can a fresh viewer describe the page's purpose in 5 seconds?
+- **Nielsen's 10 Usability Heuristics (1994)**: visibility of system status, match system↔real world, user control & freedom, consistency & standards, error prevention, recognition over recall, flexibility & efficiency, aesthetic & minimalist design, help users recognize/diagnose/recover from errors, help & documentation.
+- **Shneiderman's 8 Golden Rules**: consistency, shortcuts for experts, informative feedback, dialogs yield closure, error prevention, easy reversal, internal locus of control, reduce STM load.
+
+---
+
+## Part 3 — Color applied
+
+### 3.1 Harmonies, precisely
+
+| Harmony | Hue spacing | Character | Good for |
+|---|---|---|---|
+| Monochromatic | 0° | Calm, unified, restrained | Luxury, editorial, premium SaaS (Linear's purple family) |
+| Analogous | 30–60° | Harmonious, low-conflict | Wellness, nature, warm brands |
+| Complementary | 180° | Vibrating, high-energy | Sports, entertainment, CTAs |
+| Split-complementary | 180° ± 30° | Complementary tension, softer | Playful, balanced hero pages |
+| Triadic | 120° | Vivid, balanced, can be loud | Kids, gaming, creative tools |
+| Tetradic / Rectangle | 2 complementary pairs | Rich, hard to balance | Editorial / seasonal campaigns |
+| Square | 90° | Most saturated tension | Rare outside experimental work |
+
+**Any harmony works if you flatten saturation and stretch value.** A "triadic" palette of #0A0F1E / #1E2140 / #3B1E2E at 10–20% saturation reads sophisticated; the same hues at 90% saturation reads like a children's toy. **This is the single most useful color lever.**
+
+### 3.2 Temperature, saturation, and the luxury desaturation effect
+
+Warm colors appear to advance; cool colors appear to recede (Itten, confirmed by modern psychophysics). More critically: **desaturation reads as luxury** because (a) it rejects the attention economy's saturated default, (b) it implies the product doesn't need to shout, (c) it photographs well across contexts. Empirically, *Valdez & Mehrabian (1994)* showed arousal ∝ saturation; luxury wants the *opposite* of arousal — it wants **calm confidence**. That is why Aesop, Hermès, Bottega Veneta, Linear, Vercel, Teenage Engineering, and Arc all sit at <30% saturation.
+
+### 3.3 Dark vs light mode
+
+- **Bauer & Cavonius (1980)** found **positive polarity (dark text on light background) improved reading performance by ~26%** over negative polarity, across acuity and comprehension.
+- **Piepenbrock et al. (2013, 2014)** replicated that positive-polarity advantage on LCDs for older users and for small text.
+- **OLED power savings** (Google, Android blog 2018): dark mode can save 30–60% display power *on OLED at high brightness* — smaller effect at lower brightness.
+- **Astigmatism / myopia** users often find halation around light-on-dark text worse; light mode is kinder.
+- **Honest rule**: default to light for reading-heavy products; offer dark as a *choice* (not the default) for tools used long hours in low-ambient-light (IDEs, video tools, Linear-class work). **Do not** conflate "dark mode" with "premium" — that is a trend, not a finding.
+
+### 3.4 Cultural color decoding
+
+| Culture | White | Red | Yellow | Black | Green |
+|---|---|---|---|---|---|
+| Western | purity, weddings | love, danger, urgency | caution, cheap | elegance, mourning | nature, money, health |
+| East Asian (China/Korea) | mourning | prosperity, luck, weddings (CN) | imperial (historic CN) | formality | youth, springtime |
+| Japan | purity | life, urgency | courage, cheerful | elegance | eternity (matcha) |
+| Middle East | purity | caution | happiness | elegance | **Islam, sacred** |
+| Latin America | peace | passion | death (Mexico ambivalent) | mourning | vitality |
+| India | peace, mourning (widows) | weddings, purity (bridal) | sacred (saffron) | evil, negative | harvest, nature |
+
+Aslam (2006) recommends: **keep primary equity color global; localize accent colors and seasonal campaigns**. Coca-Cola keeps red worldwide but accents vary; Pepsi leans blue because its cultural meaning is remarkably stable.
+
+### 3.5 Accessibility at the palette level
+
+- Red-green color blindness affects ~**8% of men of Northern European descent, ~0.5% of women**. Never encode state by green-vs-red alone; pair with icon or text.
+- Use **ColorSafe, Stark, Leonardo (Adobe), Polychrom, sim.daltonlens.org** to audit.
+- Build palettes on a **lightness scale (50 → 950)** like Tailwind/Radix so contrast math is predictable across themes.
+
+### 3.6 Cinematic color grading, ported to UI
+
+- **Teal-and-orange** (hyper-popular since the early 2000s colorist era — see Stu Maschwitz and Dan Margulis): skin tones sit near orange on the color wheel; pushing shadows to teal places skin against its complement, maximizing facial salience. In UI, teal-and-orange reads *cinematic/premium tech* (see: GitHub's 2023 dark, some Netflix marketing).
+- **Fincher/Villeneuve**: muted desaturation + strong directional light + single accent color (Fincher's yellow-green in *Se7en*, *Gone Girl*; Villeneuve's amber in *Blade Runner 2049* Las Vegas, blue-green in *Arrival*). Lesson: **one saturated accent in an otherwise muted world is the strongest color move.**
+- **Fortiche on Arcane**: explicit **color scripts per act**. Piltover = warm golds, cream, brass, topaz (#E8B961 territory, #F3DBA6, #2E2213), signaling Beaux-Arts wealth; Zaun = toxic green (#4F9D55 to #7FC24D), magenta chem-glow (#D9478A), smoke grays, noir black. The *Arcane Render Engine* (custom tool built with Guerrilla Games-style layered 2D painted textures over 3D geometry) preserves hand-painted brushwork in motion. Lesson for UI: **use environment/section color as narrative**, not just decoration.
+
+### 3.7 Brand palette case studies
+
+- **Apple**: neutral grays + white + product-color accents. The product is the hero; UI recedes. Aqua's skeuomorphic 2000 palette → flat iOS 7 → depthier iOS 17 + visionOS glass. SF Pro built in-house for density/clarity at every size.
+- **Stripe**: **#635BFF "Blurple"**, custom **Sohne by Kris Sowersby/Klim**, Benjamin De Cock's precision gradient illustrations. Signals *technical + trustworthy*. Gradient craft implies "the company is run by people who care about details" — a visceral proxy for API quality.
+- **Linear**: near-black **#0B0B0F**, refined purples (#5E6AD2 family), Inter typeface, 8 px grid, micro-fast motion. Signals: "tool for serious builders, not consumers."
+- **Notion**: near-monochrome canvas with user-applied color blocks — the product is *a canvas*, so brand color recedes.
+- **Spotify**: **#1DB954 green** on near-black; Circular (Lineto) typeface; Spotify Wrapped intentionally explodes the restrained year-round system with maximalist annual variance, teaching users that the brand has range.
+- **Netflix**: **#E50914 red** on black — cinema-marquee encoding.
+- **Duolingo**: **Feather Green #58CC02**, Macaw blue, rounded "DIN Next Rounded" family, Duo owl mascot doing peak-shift caricature.
+- **Figma**: multicolor accents (red, blue, green, purple, orange) on neutral — the brand *is* "tools for many kinds of creatives."
+- **Airbnb**: **Rausch #FF5A5F**, Bélo symbol (DesignStudio 2014), Cereal typeface (Dalton Maag) — Rausch is warm-red "belonging," not passion or urgency.
+- **Slack**: eggplant → 2019 DesignStudio refresh with 4-color hash identity signaling collaboration's multiplicity.
+- **Vercel / Next.js**: black/white, geometric Geist Sans/Mono (2023) — developer-tool precision.
+
+---
+
+## Part 4 — The complete vibe spectrum
+
+For each vibe below: **color, type, spacing, motion, imagery, effects, benchmarks, use, origin, traps**.
+
+### 4.1 Premium / luxury / sophistication
+**Emotional signal**: confidence without effort; quiet authority.
+**Color**: desaturated, 1–2 hues, heavy lean on neutrals (#F7F5F0 creams, #0C0C0C off-blacks, #6B6960 warm grays). Gold accent (#B8975A) only if heritage.
+**Type**: refined serif (Tiempos, Canela, GT Super, Söhne Book) + precise sans (Söhne, Neue Haas Grotesk, Graphik).
+**Spacing**: macro whitespace, generous margins (20%+ of viewport).
+**Motion**: restrained, long ease-out durations (500–800 ms), minimal parallax.
+**Imagery**: art-directed still life, cinematic product photography, matte not glossy.
+**Effects**: subtle grain, no drop shadows, flat surfaces, delicate hairlines.
+**Benchmarks**: Aesop, Hermès, Rolex, Bottega Veneta, Linear, Vercel, Arc browser, Teenage Engineering, Arc'teryx Veilance.
+**Use**: high-ASP products, brand-driven purchases, tools for experts.
+**Origin**: Swiss minimalism + Japanese *shibui* + print heritage.
+**Trap**: indistinguishable from other luxury brands ("the sea of Helvetica-on-cream"). Differentiate via *one* ownable asset (Aesop's amber bottle, Hermès orange).
+
+### 4.2 Tech / futuristic / cyberpunk
+**Emotional signal**: edge, power, the future is here.
+**Color**: near-black bases (#05070C, #0A0F1E) + neon accents — cyan (#00F0FF), magenta (#FF2D9C), toxic green (#39FF14), electric violet.
+**Type**: monospaced (JetBrains Mono, Berkeley Mono, IBM Plex Mono, Geist Mono), all-caps with tracking, sometimes katakana overlays.
+**Spacing**: dense grids, 4 px sub-grid, brutalist-ish alignment.
+**Motion**: flicker, scan-lines, glitch, terminal-cursor pulse, chromatic aberration.
+**Imagery**: HUD tropes, wireframes, 3D-renders with rim-light, technical diagrams.
+**Effects**: noise/grain at 3–8%, scanlines, chromatic aberration, holographic mesh gradients.
+**Benchmarks**: Blade Runner 2049, Cyberpunk 2077, Arcane's Zaun, Nothing brand, Tesla UI, Rabbit R1, most Web3 products.
+**Use**: developer tools, gaming, Web3, bold consumer electronics.
+**Origin**: Ghost in the Shell (1995), Blade Runner (1982/2017), William Gibson, 90s demoscene.
+**Trap**: generic "AI-looking" neon gradients — differentiate with *typographic craft*, not more glow.
+
+### 4.3 Calm / trustworthy / corporate
+**Emotional signal**: competence, safety, predictability.
+**Color**: blue-greens (#1E6FD9, #0F766E, #2E7D6B), ample white, single accent.
+**Type**: humanist sans (Inter, IBM Plex Sans, Source Sans, Söhne) at comfortable sizes.
+**Spacing**: generous but not luxurious; consistent 8 px rhythm.
+**Motion**: smooth, short, never surprising.
+**Imagery**: diverse approachable human photography, minimal illustration, data visualization.
+**Effects**: subtle soft shadows, rounded-medium corners (8–12 px), no grain.
+**Benchmarks**: Stripe, Vanta, Monzo, Chase (post-redesign), Oscar Health, Hims, Notion (for B2B), Figma's marketing site.
+**Use**: fintech, healthtech, B2B SaaS, anything regulated.
+**Origin**: Swiss modernism + IBM's Paul Rand / Eliot Noyes lineage.
+**Trap**: the "default SaaS" purple-gradient-hero + Inter + rounded-card template. Escape through proprietary illustration or ownable palette.
+
+### 4.4 Energetic / youthful / playful
+**Emotional signal**: fun, approachable, low-stakes.
+**Color**: saturated and many — triadic or split-complementary, no fear of clash. Duolingo Green #58CC02, Mailchimp Cavendish Yellow #FFE01B, Figma's rainbow.
+**Type**: rounded sans (DIN Next Rounded, Circular, Graphik Rounded), often heavy weights.
+**Spacing**: variable; intentional chaos inside ordered containers.
+**Motion**: springy, bouncy, anticipation/overshoot, squash-and-stretch.
+**Imagery**: custom illustration, mascots, goofy 3D.
+**Effects**: stickers, tilt rotations (2–6°), chunky borders, offset drop shadows.
+**Benchmarks**: Duolingo, Figma, Miro, MailChimp (2018 rebrand by Collins), Fall Guys, Notion stickers.
+**Use**: consumer apps, learning, games, kids/teen products.
+**Origin**: Memphis Group (Sottsass 1981), 90s Nickelodeon, early 2000s Flash web.
+**Trap**: becoming infantilizing. Keep *one* grown-up axis (typography craft or spacing rigor).
+
+### 4.5 Editorial / intellectual
+**Emotional signal**: depth, patience, authority of the written word.
+**Color**: ink on paper base, 1 accent (oxblood, mustard, teal).
+**Type**: serif for headlines (Cheltenham for NYT, Tiempos, Financier, GT Super) + workhorse sans for UI chrome.
+**Spacing**: wide measure control (60–70 char), generous leading (1.5–1.7), drop caps.
+**Motion**: near-zero; motion would break the reading contract.
+**Imagery**: black-and-white documentary photography; illustration by known illustrators (Christoph Niemann, Malika Favre).
+**Benchmarks**: NYT, The Atlantic, New Yorker, Medium, Are.na, Every, Pentagram's editorial work, Substack.
+**Use**: long-form content, thought leadership, journalism.
+**Origin**: 19th-century book typography + Swiss news design.
+**Trap**: overconfident serif choice that doesn't render at 14 px. Test body size first.
+
+### 4.6 Minimalist / Japanese / zen (*Ma* 間)
+**Emotional signal**: presence through absence; space as substance.
+**Color**: near-mono, often warm off-white (#F4F1EA) + near-black (#1A1817).
+**Type**: 1–2 weights, small sizes, humanist or neutral sans; occasionally Mincho-influenced serif.
+**Spacing**: radical — 60–80% of viewport can be whitespace.
+**Motion**: imperceptible or absent.
+**Imagery**: singular product, heavy negative space, still-life photography.
+**Effects**: none — the effect *is* restraint.
+**Benchmarks**: Muji, Apple (post-iPod-Shuffle era), iA Writer, Kenya Hara's writing/design, Monocle, Sou Fujimoto architecture sites.
+**Use**: premium consumer, writing tools, architecture, wellness-adjacent luxury.
+**Origin**: **Ma** (間) = the negative space/pause, **Kanso** (簡素) = simplicity, **Shibui** (渋い) = austere elegance, **Wabi-sabi** (侘寂) = beauty in imperfection/transience.
+**Trap**: empty for empty's sake. Minimalism requires *more* typographic craft, not less.
+
+### 4.7 Maximalist / expressive / bold
+**Emotional signal**: joy, confidence, "we have range."
+**Color**: clashing-on-purpose palettes, gradients that wouldn't agree in theory.
+**Type**: typographic collage — multiple families, huge display, kinetic/variable.
+**Spacing**: breaks grids intentionally; layered depth.
+**Motion**: expressive, kinetic type, big transitions.
+**Imagery**: photo + illustration + 3D + type mashed together.
+**Effects**: stickers, gradient meshes, noise, duotone.
+**Benchmarks**: Spotify Wrapped, Gucci (Alessandro Michele era), Instagram 2022 rebrand, Collins agency, Koto, Pentagram's Paula Scher work, MSCHF.
+**Use**: creative industry, fashion, annual hero campaigns, challenger brands.
+**Origin**: Memphis, David Carson's *Ray Gun* (1992–95), Paula Scher's Public Theater posters.
+**Trap**: incoherent when the system rules aren't hidden underneath. Maximalism looks anarchic but is tightly scaffolded.
+
+### 4.8 Warm / organic / natural
+**Emotional signal**: humanity, wellness, earthiness.
+**Color**: earth palette — terracotta (#C57558), sage (#A3B18A), cream (#F2E8D5), soil brown (#5A3E2B).
+**Type**: humanist serifs (Tiempos, Freight, Söhne Breit) + rounded sans (Canela, Söhne).
+**Spacing**: generous, soft, asymmetric.
+**Motion**: slow, organic easing (custom cubic-bezier with natural deceleration).
+**Imagery**: hand-drawn or gouache illustration, hands holding things, natural light.
+**Effects**: subtle paper/grain texture, imperfect brush strokes.
+**Benchmarks**: Airbnb, Oatly, Olipop, Headspace, Partake Foods, Aesop (overlap with luxury), Notion illustrations.
+**Use**: wellness, food, hospitality, sustainable brands.
+**Origin**: 1970s natural-foods movement + mid-century children's book illustration.
+**Trap**: "gentle millennial" sameness (beige + sans + noodle-limb illustration). Pick one ownable illustration partner.
+
+### 4.9 Dark / moody / cinematic
+**Emotional signal**: depth, stakes, cinema-quality attention.
+**Color**: near-blacks (#08090C, #0E0E10), single warm or cool accent (amber/teal), rim-lit imagery.
+**Type**: editorial serif display + mono-tight sans.
+**Spacing**: dense-ish, with dramatic lit focal points.
+**Motion**: slow fades, cross-dissolves, parallax, cinematic pacing.
+**Imagery**: low-key lighting, high contrast, grain.
+**Benchmarks**: Arcane, Death Stranding UI, Destiny, Alien: Isolation, Linear dark, FRAMED app, Vinyl.fm.
+**Use**: entertainment, gaming, content platforms, "serious tool" dark mode.
+**Origin**: film noir + HBO prestige television (Fincher, Villeneuve, Nolan).
+**Trap**: dark ≠ premium automatically. Without craft it reads as 2015 flat + black.
+
+### 4.10 Retro / nostalgic sub-genres
+
+| Sub-genre | Era mined | Palette | Type | Signals |
+|---|---|---|---|---|
+| **Vaporwave** | Late-80s Japanese commerce + 90s web | Lavender, cyan, hot pink, chrome | Kanji, Times New Roman, chrome | Dreamlike, ironic, A E S T H E T I C |
+| **Synthwave / Outrun** | 1980s sci-fi | Neon magenta + cyan + dark navy | Geometric + chrome | Action, driving, optimism |
+| **Y2K** | 1998–2003 | Frosted silver, pale blue, translucent plastic | Bubbly sans, metallic | Tech optimism, bling |
+| **80s revival** | *Stranger Things*-era | Black + magenta + teal + grid horizons | Chunky serif, condensed | Adventure, nostalgia |
+| **70s** | Disco + mod | Mustard, burnt orange, cocoa, avocado | Thick-thin serifs, groovy scripts | Warmth, analog |
+| **90s web revival** | Geocities | Magenta + cyan + lime, default blue hyperlinks | Times, Courier, Arial | Anti-polish, authenticity |
+
+**Trap**: pastiche without a contemporary lens. Best retro work *updates* grammar (Yves Tumor's cover work, Arcane's painterly 2D, Stranger Things' title).
+
+### 4.11 Brutalist / raw / anti-design
+**Emotional signal**: honesty, rejection of corporate polish.
+**Color**: system defaults, high contrast, often black/white/hyperlink-blue.
+**Type**: system fonts (Times, Arial, Courier), huge sizes, tight leading.
+**Spacing**: aggressive, crashing, deliberate misalignment.
+**Motion**: often none; when present, jarring.
+**Imagery**: unoptimized photos, screenshots, ASCII.
+**Benchmarks**: Bloomberg Businessweek covers (Richard Turley era), Balenciaga, Craigslist, Drudge Report, Are.na's early site, Jim Stoddart's Penguin Modern Classics, awwwards Brutalism category.
+**Use**: fashion's avant-garde, art/culture, challenger portfolios.
+**Origin**: architectural Brutalism (Le Corbusier, 1952 Unité d'habitation) + David Carson deconstruction + early web.
+**Trap**: ugly without the intellectual premise = just ugly.
+
+### 4.12 Surface styles — what each signals in 2026
+
+- **Skeuomorphism** (2007–2013): nostalgia, approachability, learnability. Returning cautiously via Apple Vision Pro's physically-inspired materials.
+- **Flat design** (iOS 7, 2013): rational, digital-native, systematic. Now baseline; alone it signals "did not invest in design."
+- **Material Design** (Google, 2014): systematic, democratic, approachable. Material 3 ("You") + dynamic color.
+- **Neumorphism** (Michal Malewicz, 2020): tactile but **fails WCAG contrast by definition** — signals "trying hard, missed the assignment." Use sparingly for ornamental moments only.
+- **Glassmorphism** (iOS Big Sur 2020, Vision Pro 2024, iOS 26 "Liquid Glass"): depth + futurism. Requires careful contrast handling.
+- **Claymorphism** (2021): soft, friendly, Instagrammable. Already dated outside kids/consumer.
+- **Aurora / mesh gradients** (Stripe 2017+, Linear, Figma, Arc): premium contemporary tech — **but now generic enough to feel "AI-generated."** Differentiate via hand-tuned gradient stops and grain.
+- **Bento grids** (Apple.com's 2022–24 signature, now everywhere): information-dense but breathable. Peak 2024; approaching saturation.
+
+### 4.13 Historical styles resurfacing
+- **Swiss / International** (Müller-Brockmann, Gerstner) → rigor, seriousness. Seen in AI-company landing pages aiming for credibility.
+- **Art Deco** (1920s–30s; Cassandre, Chrysler Building) → heritage luxury; gold, stepped forms, symmetry.
+- **Memphis** (Sottsass 1981) → 2019–2022 revival in consumer brands and emoji.
+- **Bauhaus** (1919–33; Moholy-Nagy, Bayer) → primary colors, geometric sans, functional clarity.
+- **Russian Constructivism** (Rodchenko, Lissitzky, 1920s) → red/black diagonals, photomontage; used by political/protest design.
+- **Psychedelia** (1965–70, Wes Wilson, Victor Moscoso) → cannabis, music festivals, countercultural products.
+- **Mid-century modern** (Paul Rand, Saul Bass, Lester Beall) → restrained geometric charm.
+
+### 4.14 Meta-trends 2024–2026
+- **The "AI-generated look"**: overly-smooth mesh gradients + generic geometric icons + sameish pastel palettes + bland stock-style illustration + "orb" hero visuals. Feels generic because LLM-generated design samples from the mean. **Escape route: typographic investment, proprietary illustration, specificity.**
+- **Noise/grain** overlays at 2–8% as *anti-digital* signal.
+- **Expressive / kinetic typography** (variable fonts + motion).
+- **Swiss revival** (Linear, Rauno's work, new AI-company landing pages).
+- **Maximalism against 2010s flattening** (Figma, Spotify Wrapped, MSCHF).
+- **Hand-crafted interfaces** (Arc, Raycast, Things) over template SaaS.
+
+---
+
+## Part 5 — Decision frameworks
+
+### 5.1 Brand personality models
+
+- **Jennifer Aaker, "Dimensions of Brand Personality"** (*JMR*, 1997). Five dimensions — **Sincerity, Excitement, Competence, Sophistication, Ruggedness** — with 42 traits. Rough visual translations:
+
+| Dimension | Color lean | Type lean | Vibe |
+|---|---|---|---|
+| Sincerity | warm, desaturated | humanist sans, soft serif | warm/organic |
+| Excitement | saturated, contrasting | bold sans, kinetic | energetic/playful |
+| Competence | blue family, neutral | neo-grotesque | calm/corporate |
+| Sophistication | desaturated, black, metallics | refined serif | premium/luxury |
+| Ruggedness | earth tones, dark | slab serif, condensed | rugged/outdoor |
+
+- **Mark & Pearson, *The Hero and the Outlaw* (2001)** — 12 Jungian archetypes mapped to visual codes:
+
+| Archetype | Example brand | Visual shorthand |
+|---|---|---|
+| Innocent | Dove, Coca-Cola | white, pastel, humanist, simple |
+| Sage | Google, BBC, NYT | neutral, serif, restrained |
+| Explorer | Patagonia, Jeep | earth, rugged, wide sans |
+| Outlaw | Harley-Davidson, Diesel | black, distressed, slab |
+| Magician | Disney, Tesla | mystical, gradients, unexpected |
+| Hero | Nike, FedEx | bold, saturated, momentum |
+| Lover | Chanel, Godiva | sensual, reds/blacks, serif |
+| Jester | Old Spice, Skittles | clashing, playful, rounded |
+| Everyman | IKEA, Target | friendly, simple, accessible |
+| Caregiver | Johnson's, UNICEF | soft, warm, rounded humanist |
+| Ruler | Rolex, Mercedes | gold/black, symmetric, serif |
+| Creator | Lego, Adobe | colorful, tool-like, system |
+
+- **Kapferer's Brand Identity Prism** (6 facets: physique, personality, culture, relationship, reflection, self-image) and **Keller's CBBE Pyramid** are deeper but rarely drive visual decisions directly.
+
+### 5.2 Canonical design principles documents
+
+**Dieter Rams' 10 Principles (verbatim, 1970s)**:
+1. Good design is **innovative**.
+2. Good design makes a product **useful**.
+3. Good design is **aesthetic**.
+4. Good design makes a product **understandable**.
+5. Good design is **unobtrusive**.
+6. Good design is **honest**.
+7. Good design is **long-lasting**.
+8. Good design is thorough down to the last detail.
+9. Good design is environmentally friendly.
+10. Good design is as little design as possible ("Weniger, aber besser" — less, but better).
+
+Use as an *audit lens*: score your design 1–5 against each.
+
+**Apple HIG (post-iOS 7)**: **Clarity, Deference, Depth**. Post-Vision Pro adds **Lifelike materials, Focus, Familiarity**.
+**Material 3 (Google)**: **Material is the metaphor, Bold/Graphic/Intentional, Motion Provides Meaning.**
+**IBM Design Language**: **Carbon** — *open, inclusive, rigorous*.
+**Airbnb**: **Unified, Universal, Iconic, Conversational**.
+**Atlassian**: **Bold, Optimistic, Practical**.
+**Shopify Polaris**: **Crafted, Efficient, Consistent, Trustworthy, Accessible**.
+**Microsoft Fluent**: **Light, Depth, Motion, Material, Scale**.
+
+### 5.3 The strategic/creative brief
+
+Classic lineage: Stephen King at JWT, then Jay Chiat, then Jon Steel (*Truth, Lies and Advertising*, 1998).
+
+Design-brief skeleton that actually drives decisions:
+1. **Business goal** (1 sentence, measurable).
+2. **Single-minded audience** (primary persona + JTBD).
+3. **Insight** (a truth about the audience that unlocks the work).
+4. **Positioning** (we are X, for Y, unlike Z).
+5. **Emotional promise** (what should the user feel in 50 ms and after 6 months).
+6. **3–5 adjective stack** ("confident, precise, warm — not corporate, not cold, not loud").
+7. **Three reference territories** (safe / expected / edgy).
+8. **Mandatories & constraints** (accessibility floor, platforms, legacy equities).
+9. **Deliverables and timing**.
+
+The **three-territory pitch** is industry standard (Pentagram, Collins, Koto, Work & Co, DIA). Presenting one direction looks like opinion; presenting three looks like strategy.
+
+### 5.4 Moodboarding methodology
+
+- Start with **a verbal moodboard** before images, to force strategic clarity: 10 adjectives, ranked.
+- Build three visual territories in parallel (don't serialize — you'll anchor).
+- Each territory should contain: **color strip, type specimens, imagery style, motion references (Dribbble/Reel clips), competitor contrast**.
+- **Style tiles** (Samantha Warren, 2011) bridge mood to UI without full comps — faster, cheaper iteration.
+- Convert to a **brand world** artifact (one page showing palette + type + imagery + voice + motion system).
+
+### 5.5 Audience → aesthetic mapping
+
+- **Personas (Alan Cooper, 1999)** + **Jobs-to-be-Done (Christensen/Ulwick/Moesta)**. JTBD has three layers: **functional, emotional, social**. Aesthetic primarily serves the *emotional* and *social* jobs.
+- Useful prompt: *"When someone pulls out their phone to use this in public, what do they want to be seen as?"* That answer picks between minimalist-premium and expressive-playful more cleanly than any persona demo does.
+- **Hofstede 6D** (power-distance, individualism, masculinity, uncertainty avoidance, long-term orientation, indulgence) — affects cultural design prefs: high uncertainty avoidance = more explicit labels and less whitespace; high power-distance = more explicit hierarchy and authority cues.
+- **Generational leans (2025–26)**: Gen Z → Y2K revival, maximalism, AI-skepticism illustration, proudly hand-made; Millennials → flat-minimal comfort; Boomers → explicit labels, larger type, trust via convention.
+
+### 5.6 Use-case → design language
+
+| Product type | Primary need | Design language |
+|---|---|---|
+| **Tool** (Figma, Linear, VS Code) | Speed, control, low friction | Dense, precise, keyboard-first, restrained palette, fast motion |
+| **Toy** (TikTok, games, Duolingo) | Delight, surprise, habit | Saturated, expressive motion, peak-shift characters |
+| **Utility** (banking, gov, health) | Trust, clarity, accessibility | Conventional, high-contrast, slow, familiar patterns |
+| **Content** (Netflix, Spotify, NYT) | Content is the product | UI chrome fades; typography leads; dark mode common |
+| **Community** (Discord, Reddit) | Identity expression | User-colored UI, density, text-first |
+| **Marketplace** (Airbnb, eBay) | Trust between strangers | Human photography, reviews, warm color |
+
+### 5.7 Emotional design mapping (Don Norman, 2004)
+
+Make explicit choices at each level:
+- **Visceral** — first 50 ms. Color, shape, motion. What should someone feel *before* they read anything?
+- **Behavioral** — during use. Does the product feel competent? Where is the peak-end moment?
+- **Reflective** — afterward. What story do they tell themselves about having used this? What does it say about them?
+
+Exercise: write one sentence per level, per persona. If any sentence is vague, the design direction is too.
+
+### 5.8 Agency processes that produce aesthetic decisions
+
+- **IDEO design thinking** — empathize, define, ideate, prototype, test. Best for solution framing; weak at aesthetic choice on its own.
+- **Google Ventures Design Sprint (Jake Knapp, 2016)** — 5-day condensed process.
+- **British Design Council Double Diamond (2005)** — discover, define, develop, deliver.
+- **Collins "creative leap"** — deliberately non-linear; strategy produces a provocation, design jumps.
+- **Koto's "brand-world"** process — verbal → visual in parallel tracks, then converge.
+
+### 5.9 Design tokens as the encoding of decisions
+
+Salesforce / Jina Anne (2014+) introduced "design tokens." Three-layer architecture:
+- **Primitive / core**: raw values (`blue-500: #3B82F6`).
+- **Semantic / alias**: meaning (`color-action-primary: blue-500`).
+- **Component**: scoped (`button-primary-bg: color-action-primary`).
+The semantic layer **is your brand strategy compiled into data**. Theming (light/dark, density, sub-brands) swaps at the semantic layer without touching primitives. DTCG (W3C Design Tokens Community Group) spec is the emerging standard; Figma Variables, Tokens Studio, and Style Dictionary (Amazon) are common implementations.
+
+### 5.10 Distinctiveness and trap-avoidance
+
+- **Marty Neumeier, *Zag* (2006)**: ask *"What do we have that nobody else has? Is it worth having?"* Build the brand on that asymmetry.
+- **Byron Sharp, *How Brands Grow* (2010)** and Ehrenberg-Bass research: growth comes from **mental & physical availability** and **Distinctive Brand Assets** (logo, color, shape, character). "Differentiation" is overrated; **distinctiveness** (being instantly recognizable) is what compounds.
+- **Category codes analysis**: list all competitors' visual codes (color, type, imagery). Choose consciously — obey (for trust in regulated categories) or invert (for challenger brands).
+
+---
+
+## Part 6 — Case studies, decoded
+
+### 6.1 Arcane (Fortiche Production, Riot Games, 2021 / 2024)
+The show is essentially a masterclass in **color as narrative**. Fortiche (Pascal Charrue, Arnaud Delord, Jerome Combe) developed a pipeline sometimes called the **Arcane Render Engine**: 3D character and environment geometry drives the composition, but painted 2D textures, hand-animated effects, and painted lighting are composited on top. Every frame looks like concept art because every frame *is* concept art.
+**Color scripts** (the Pixar-derived storyboard of palette per scene, see Lou Romano / Dice Tsutsumi writings) drive the show act-by-act: Piltover's rich oranges, topaz, teal shadows (Beaux-Arts wealth); Zaun's sulphurous greens, magenta chem-glow, noir blacks (industrial poisoning). Ekko's hopeful Firelights are introduced via warm saffron to break Zaun's palette. The credits sequence uses high-saturation primaries as emotional climax.
+**Lesson for UI**: *dedicate a palette to each mode/section, not just a brand palette.* Linear's focus-mode vs. command-palette subtly differs in hue; Arc browser differentiates profiles via theme color; this is color-script thinking ported.
+
+### 6.2 Linear
+Karri Saarinen (ex-Airbnb DLS lead) co-founded Linear with a thesis that *tools should feel like the work.* Near-black **#0B0B0F** base, high-precision typography (Inter, custom tweaks), purple accent #5E6AD2 reserved for state (selection, active). Motion is **<200 ms** almost everywhere — nothing bounces. The 8 px grid is religiously held. Dark is the default because serious builders work in low ambient light. Method > branding: Linear invested in *performance* (instant navigation, offline-first) before aesthetic; the aesthetic then cashed those performance checks as *credibility*.
+
+### 6.3 Stripe
+Stripe chose **#635BFF "blurple"** as its core — a hue that indexes tech (close to iCal blue) and invention (purple's semiotics). Custom typeface **Söhne** (Kris Sowersby, Klim Type Foundry) replaces the earlier Camphor. The illustration system from **Benjamin De Cock** (precision Pratt-lines + soft gradients) implies technical craft. The gradient hero backgrounds — often dismissed as "generic fintech" — were actually pioneered by Stripe and copied everywhere else. Stripe's design language says: *an engineer at this company noticed your API latency by 10 ms, so trust us with your billing.*
+
+### 6.4 Apple's design evolution
+- **Snow White era (Hartmut Esslinger, frog design, 1984)** — white plastic, subtle lines.
+- **Aqua (2000)** — skeuomorphic gloss, lickable buttons.
+- **Retina-era iOS 1–6 (Scott Forstall leadership)** — maximum skeuomorphism (Notes as legal pad, Game Center as green felt).
+- **iOS 7 (2013, Jony Ive post-Forstall)** — flat, deference, depth; Helvetica Neue then SF Pro (2015).
+- **iOS 16+ depth re-introduction** — materials, dynamic island.
+- **visionOS (2024) / iOS 26 "Liquid Glass"** — physically-lit materials, translucency, layered glass.
+The arc: realism → abstraction → controlled re-introduction of physicality. Apple keeps one thing constant: **the hardware is always the hero; UI recedes.**
+
+### 6.5 Spotify
+**#1DB954** green (earlier #2EBD59) picked to pop on dark; **Circular** by Lineto for human warmth in geometric sans; **Spotify Wrapped** (since 2016, in-house + Cactus / Antonio Cavedoni typography) deliberately *breaks* the restrained year-round system — a controlled maximalist moment that refreshes the brand annually without diluting equity.
+
+### 6.6 Duolingo
+**#58CC02 Feather Green** + **#1CB0F6 Macaw** + Duo the owl. The 2022 rebrand ("The World's Best Design System" by in-house team) doubled down on character-led peak-shift: Duo's features are exaggerated for maximum neural-target signal. Push/pull tension between cute mascot and genuinely effective spaced-repetition method is the whole brand.
+
+### 6.7 Pixar's color scripts
+Lou Romano, Dice Tsutsumi, Ralph Eggleston: sequences of small gouache paintings laid out as the film's emotional timeline, produced before animation. **Up** (Sinclair's) goes from warm-saturated childhood → gray-desaturated widowhood → saturated-South-American adventure. **Inside Out** assigns each emotion a saturated hue. **Soul** opposes muted Earth and maximalist Before World. *Every SaaS onboarding flow is secretly a color script* — walk through frame-by-frame and ask what emotion each screen owns.
+
+### 6.8 Studio Ghibli
+**Michiyo Yasuda** (1938–2016) led Ghibli color for 40 years alongside background painter **Kazuo Oga**. The palette is often limited per scene and saturated selectively; greens are warm and plant-specific, not "grass green." Miyazaki's environments feel real because color serves *feeling*, not realism. **Lesson**: resist the screen's temptation to use all 16.7 M colors. A limited palette per screen/section increases felt quality.
+
+### 6.9 Nintendo vs. PlayStation vs. Xbox
+- **Nintendo**: primary colors, rounded Nintendo Classic typography, mascot-led, joy-first. Hardware (Switch) continues the same thesis — bright Joy-Cons, approachable.
+- **PlayStation**: black + white restraint, *"For the Players"*, DualSense dimensional symbols (△○×□) as ownable distinctive asset per Sharp, cinematic hero imagery.
+- **Xbox**: **#107C10** Xbox Green as energy signal; Segoe family; Fluent materials on console UI; wider tent (casual + hardcore).
+Three variants of "we make games" that couldn't be confused for 10 ms.
+
+### 6.10 Luxury vs. budget encoding
+- **Luxury**: desaturation, macro whitespace, thin serif display, monogram repeat patterns, matte photography, very small logo size, typography-led hierarchy.
+- **Budget**: saturated, full-bleed imagery, bold condensed sans, yellow/red urgency, price prominence, busy composition, large logo, sticker-style callouts.
+The encoding works because luxury signals *"attention is not scarce for us"* and budget signals *"here is the deal, don't miss it."*
+
+---
+
+## Part 7 — The practical decision tree
+
+A seven-question interrogation that moves from strategy to pixels. Write answers down before opening Figma.
+
+### Q1 — What category codes exist?
+List the top 5 competitors. For each: dominant hue family, type classification, photography style, motion intensity. Now decide per axis: **obey** (for trust in regulated categories — fintech, health, gov) or **subvert** (for challenger differentiation — Liquid Death subverted water; Oatly subverted dairy; Monzo subverted banks). Never do both accidentally.
+
+### Q2 — Which archetype fits?
+From Mark & Pearson's 12, pick ONE primary and at most one secondary. If you can't choose one, the strategy upstream is broken; stop designing.
+
+### Q3 — Tool / toy / utility / content / community?
+The use-case table in §5.6 locks in motion intensity, density, color saturation range, and chrome-vs-content ratio before you touch a color.
+
+### Q4 — What is the audience's social job?
+What do users want to be *seen* as by others who see them using this? Put it in one sentence. That sentence picks between premium-minimal and expressive-playful more reliably than any other question.
+
+### Q5 — How do you score emotional-design levels?
+Write one concrete sentence per level for one primary user:
+- **Visceral** (first 50 ms, before they read): _____
+- **Behavioral** (during a key task): _____
+- **Reflective** (after a week of use, telling a friend): _____
+
+### Q6 — Which 3–5 adjectives, and what are the opposites?
+Force the polarity. "Confident *not* arrogant. Warm *not* folksy. Technical *not* cold. Calm *not* sleepy. Distinctive *not* trendy." The opposites are how you catch yourself drifting mid-project.
+
+### Q7 — Which three visual territories?
+Build three parallel moodboards: **safe** (conforming to category), **expected** (the obvious evolution), **edgy** (the provocation). Present all three to stakeholders. Choose one *primary*, potentially steal one detail from another. Document decisions so they survive new hires.
+
+### Mapping from answers to design tokens
+
+1. **Archetype + category codes** → **palette character** (desaturated luxury vs. saturated playful vs. muted trustworthy).
+2. **Use case** → **density, motion speed, chrome ratio**.
+3. **Social job + adjectives** → **typography family choice** (serif/sans/mono; humanist/geometric).
+4. **Emotional levels** → **hero moment, peak-end moment, identity signal**.
+5. **Territory choice** → **surface style** (flat / glass / bento / brutalist).
+
+Then build out:
+- **Color**: pick base (1 neutral scale), brand hue (1), accent (1), optionally one expressive second. Always design the *dark scale and light scale together*. Keep text on primary at ≥4.5:1; test color-blind sim.
+- **Typography**: pick 1 primary (body workhorse), optionally 1 display (for identity moments), optionally 1 mono (for data/code). Ratio: start at 1.250 for SaaS, 1.333 for marketing, 1.500+ for editorial.
+- **Spacing**: 8 px linear scale for SaaS; 4 px sub-grid allowed. Doubling scale (4/8/16/32/64) for marketing-heavy.
+- **Motion**: tokens for micro (120 ms), standard (220 ms), emphasized (400 ms), ceremonial (600 ms+). Always allow `prefers-reduced-motion`.
+- **Imagery**: photography style OR illustration system — commit to one, let the other support rarely.
+
+### Ten traps to avoid
+
+1. **Default Tailwind / Bootstrap look.** The primitives are excellent; the defaults are generic. Overwrite at the semantic token layer on day one.
+2. **"Just add a purple-to-pink gradient."** Was distinctive in 2017, was Stripe's by 2019, is AI-generic now. If you use gradients, hand-tune stops and add grain.
+3. **Rounded-card SaaS template.** Inter + card grid + one hero gradient + illustrated noodle-people. Escape via proprietary illustration OR ownable typographic moment OR distinct density.
+4. **Dark mode as premium.** Dark + craft = premium; dark alone = flat 2015.
+5. **Over-relying on hue.** Saturation × value drives more of perception than hue. Reshape lightness scales before trying new hues.
+6. **Mistaking aesthetic-usability for "beauty hides problems."** Tuch et al. (2012) showed beauty only buys tolerance for *minor* friction. Fix the broken flow first.
+7. **Ignoring processing fluency.** Prototypicality increases first-impression appeal (Reinecke et al. 2013). Innovation should be *selective* — don't reinvent the navigation pattern *and* the button shape *and* the color meaning simultaneously.
+8. **Miller-7 fetishism.** Working memory is 4 ± 1 (Cowan 2001), not 7. Chunk information into groups of 3–5, don't force "no more than 7 nav items."
+9. **Neumorphism / excessive glass without contrast care.** Looks clever; fails accessibility. WCAG 1.4.11 (3:1 for UI) catches this at audit.
+10. **Trend-chasing.** Every style becomes generic within 24 months of mass adoption. Timeless elements: typographic craft, spacing rigor, motion intentionality, photography quality, writing voice. Invest there first; apply surface trends lightly.
+
+### When to break the rules
+
+Rules are priors. Break them when:
+- **The brand's archetype demands it** (Outlaw archetypes *should* fail most design-system hygiene).
+- **You are differentiating inside a hyper-conventional category** (challenger in fintech, challenger in legal, etc.).
+- **You are making a ceremonial moment, not the everyday product** (Spotify Wrapped vs. Spotify player).
+- **Processing fluency is already high from convention** — then the "wrong" move becomes Von Restorff salience.
+- Never break them **to prove cleverness**. Never break them **on core flows** where errors cost users.
+
+---
+
+## Conclusion — What changes once you internalize this
+
+Good design isn't a taste, it's a **composition of testable priors**: processing fluency is real (so clean hierarchies literally reduce cognitive load); aesthetic-usability is real (so beauty buys friction tolerance — up to a point); Gestalt and Fitts and Hick describe the rails perception actually runs on; Valdez-Mehrabian tells you saturation outweighs hue emotionally; Aaker and Mark-Pearson give the strategic vocabulary; the vibe-spectrum gives the surface vocabulary; tokens are where strategy compiles to code.
+
+The gap between a portfolio-grade designer and a senior strategic designer is rarely craft — it is **the ability to defend every choice to the level of its upstream decision**. "I chose desaturated teal #1A6B7F because the Sophistication archetype reads saturation as loudness, the Tool use-case wants low-arousal chrome, our category codes are dominated by blue-saturated competitors we need to subvert, and Valdez-Mehrabian supports lower arousal at lower saturation" is the kind of sentence you can now write without strain.
+
+**Three non-obvious takeaways worth anchoring**:
+
+1. **Lightness × saturation outrank hue.** Most "brand color" debates should instead be spacing and lightness-scale debates.
+2. **Distinctiveness compounds; differentiation decays.** (Sharp, Ehrenberg-Bass.) Invest in ownable assets — color, shape, typography, character, sound — that survive aesthetic trend cycles.
+3. **Aesthetic is a cognitive tool, not a luxury.** Reber-Schwarz-Winkielman and Tractinsky show beauty does measurable work on trust, tolerance, and perceived usability. Treat it as infrastructure, fund it like infrastructure.
+
+Keep this document open alongside the next brief. Answer the seven questions in Part 7 before you open Figma, map the answers to tokens, and choose the vibe from Part 4 with the theory of Parts 1–3 to back the choice up. The output will be defensible, distinctive, and — because fluency works — quietly beautiful.