# Award Canon > The study library of the Awwwards record — 25 named patterns distilled from 32 Site-of-the-Year/SOTD-tier dossiers (2017–2026), the invariants that held across every year, the jury scoring model, and the dated-fashions list, with the per-site study bank and the archetype map in references/ (loaded on demand, never wholesale). A reference cited by principle and always subordinate to taste and the gates — never a mandate. Invoke whenever a build needs award-grade references or signature-move ideas ("which award winners", "reference sites", "how would an Awwwards winner do this", "what do juries reward", "signature-move ideas"), or when any skill cites "the canon" or a named pattern. - Skill: `blyatiful1/award-canon` (Agent Skill, multi-file: 6 files) - Install (CLI): `npx skillmds@latest add blyatiful1/award-canon` - Raw SKILL.md: https://api.skillmd.com/api/skills/blyatiful1/award-canon/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: AI & ML - Author: blyatiful1 (https://skillmd.com/u/blyatiful1) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/blyatiful1/award-canon --- # award-canon — the award record, distilled to principle The study library of what the Awwwards record proves. `taste` is what good means for us; this is the evidence. Winners are studied for their principle and never copied on the surface — **steal the principle, never the surface.** Every pattern is a way to express `taste`'s constants; none overrides them. **Stage:** consulted by `direction` in Phase 2 (references + signature-move precedent), cited by name from the motion/component skills, scored against by `design-judge` in Phase 11 - **Reads:** `references/ARCHETYPE-MAP.md` (the default Phase-2 load), `references/CANON.md` (per-site dossiers — only when a site is cited by name), `references/INVARIANTS.md` (what design-judge scores against), design/DIRECTION.md when a citation is resolved - **Writes:** nothing — a reference library like `taste`; its pattern names are cited into DIRECTION.md and the skills. ## Standard The prime directive: **transfer the principle, never the surface.** The surface (a neon grade, an exact grayscale, a literal drive-a-car) is the dated fashion; the principle is what transferred. The canon never overrides `taste`, the banned list, `showpiece`'s 60fps + static-fallback gate, or WCAG 2.2 AA — where a winner broke the constitution, that is logged as a risk, not a lesson. A pattern is a **20% multiplier on a sound base, never the base**: the jury weights Design + Usability at ~70% and Creativity at ~20%, so a spectacular-but-janky site loses more than a restrained-flawless one gains. ONE signature move per site (taste); the canon is the menu of moves and the discipline on each — never permission to stack them. ## How to read the canon - **Winners** cite the site + the *actual verified* award + year. Many are Category / SOTD / Users'-Choice / Developer wins, not grand prizes — the principle transfers regardless of the trophy. Cite the tier the dossier verifies; never inflate to "Site of the Year," and never retrofit a sub-score (e.g. an accessibility number) onto a site whose dossier doesn't publish one. Per-site scores, live status, and hedges live in `references/CANON.md`. - **Stack** names the cheapest correct tool first: CSS/tokens → Motion for React → CSS scroll-driven → (side branch, not a cheaper rung) a DIRECTION-commissioned anime.js SVG timeline for inherently vector moments (`ultraweb:animejs`) → WebGL/R3F behind `showpiece`'s gate. Only the SVG-timeline and 3D/shader/GPU-particle layers have no React-native equivalent. GSAP is deliberately not a rung here: it duplicates that SVG territory at far greater weight, and its effects are the most-copied on the web — argued once and rejected in `STACK.md`, cited everywhere else. Where a dossier records GSAP, `references/CANON.md` is reporting what that site shipped — history, not our ladder. **Native CSS scroll-driven animation (`animation-timeline: view()/scroll()`) is progressive enhancement, not a default** — cross-browser support landed late (Safari, late 2025) — so every use must be designed so the no-support state is *already* the correct static layout. - **Discipline** is load-bearing — it is the guardrail that keeps the pattern inside the constitution. - **Beyond Awwwards.** This bank is Awwwards-shaped, so it inherits Awwwards taste. Two technique-indexed complements keep the diet honest: **Hoverstat.es** (experimental layout and interaction, indexed by what was built rather than who won) and **Godly** (indexed by component — heroes, navs, footers, pricing). Search them for a *mechanic* against a named problem; every rule above still applies — principle not surface, and the gates outrank both. - **Reconstructed cohort.** Several pre-2021 winners are dead or replaced (Pioneer, Prometheus, Star Atlas, Umami, MA, Active Theory v4, the Cool Club, Simply Chocolate, Frans Hals, Orano, New Mobile Workforce). Their mechanics are *reconstructed from case studies, not live inspection* — teach specifics as reported, not verified. `references/CANON.md` flags each. ## The canon — 25 patterns ### Narrative & structure - **1. The Metaphor Engine** — one governing metaphor; make structure, nav, and motion *obey* it so the site performs the subject (container-as-argument). *Winners:* DARK/Netflix time-travel timeline (Users'-Choice SOTY 2020), Mammut Baikal documentary descent (E-commerce SOTY 2020), Bruno Simon drive-through portfolio (SOTY 2019). *Stack:* a pre-code content decision, ~0 JS — cascade it into section names, the one transition, the easing, the palette; CSS layout, not WebGL. *Discipline:* the metaphor never buries the task — keep a fast, boring path to the core action; ONE metaphor, stacking two is noise. - **2. Scroll-as-Journey** — a long page as one authored journey of named acts (rooms/worlds/phases) with density rhythm — dense walls alternating with rest — not a uniform stack. *Winners:* Noomo "rooms in a hallway" (Users'-Choice SOTY 2023), Mammut Baikal phases (E-commerce SOTY 2020), MA four worlds (SOTM 2019). *Stack:* semantic `
` acts, per-room `data-mode` token shifts, IntersectionObserver + `whileInView`; script the breathing with spacing tokens. *Discipline:* never a forced march — keep native scroll + anchor/scroll-spy so users can jump; suits one hero story, not a 200-SKU store. - **3. Archive-as-Toy** — turn a content library into a filterable, rewarding playground — browse by unexpected axes, "surprise me," reward exploration with progressive fidelity, lavish craft on the corners (404/footer/loader). *Winners:* Frans Hals Museum browse-by-mood/colour (SOTD 2018), Umami Land (Developer SOTY 2021), Mana footer platformer (E-commerce SOTY 2023). *Stack:* server-render the full grid (crawlable), Motion `layout` for filter reflow, quest state via IntersectionObserver → localStorage. *Discipline:* never gate essential content behind a game/search; the playground is the enhancement over a working, scannable list. ### Typography - **4. Type as the Image** — replace the hero photo with oversized display type broken into compositional blocks; the words are the pictures, imagery secondary or absent. *Winners:* Pangram Pangram (E-commerce SOTY 2021), Synchronized Studio (SOTD 2020, Independent of the Year), KPR/Resn manga-panel headlines (SOTY 2022). *Stack:* 100% CSS, zero JS — variable font + fluid `clamp()`, one heroic face, deliberate hard breaks, real DOM text always. *Discipline:* giant type must not starve scannable copy; the face degrades to a system fallback with no layout shift. - **5. Type as Evidence** — commit to ONE heroic face and let extreme scale contrast *alone* build hierarchy, so headlines read as documentary authority, not labels. *Winners:* The Other Side of Truth (SOTY 2022; exact face unverified), DARK/Netflix all-caps grotesk (2020), Lusion v3's deliberately-boring neo-grotesque (SOTY 2023). *Stack:* one display + one text face in `@theme`, hierarchy from a wide fluid scale (display `clamp(2.5rem,8vw,7rem)` vs body 1rem), CSS only. *Discipline:* all-caps/condensed is fashion-coded and readability-costing — earn it through subject gravity; verify AA on every pairing; never name a winner's exact face unless the dossier does (several are unverified). - **6. Kinetic Reveal Type** — animate the type itself as the signature moment — gradient text-wipe, char-scramble/stagger, or variable weight mapped to scroll; the animation is content, not ornament, over *real DOM text*. *Winners:* Opal Tadpole gradient `background-clip` wipe (E-commerce SOTY 2024; exact stack unverified), Igloo letter-scramble (SOTY 2024; SDF, canvas). *Cautionary:* Pioneer Corn (SOTD + Developer Award, Jul 2020; overall SOTY unconfirmed) rendered *all* type as canvas MSDF with **no DOM text at all** — beautiful, and inseparable from an accessibility failure (a11y 6.67). *Stack:* cheapest first — native CSS scroll-driven `@property` + `background-clip: text` + `animation-timeline: view()` (progressive enhancement); else Motion per-char stagger. *Discipline:* reduced-motion → text simply present and legible; never render body/nav type into a canvas as SDF/MSDF glyphs (breaks a11y/selection/SEO); headlines only. ### Color & imagery - **7. The Three-Token Contract** — lock the palette to 2–3 colors; keep chrome near-monochrome and let one accent own ALL emphasis, or let content/imagery supply all saturation. Scarcity makes every color loud. *Winners:* Pangram Pangram `#000/#9C9C9C/#FFF` (2021), Opal two-token paper + signal-yellow (2024), Lando Norris lime-on-near-black (SOTY 2025). The deeper discipline is *one authored, locked source for all color*: Messenger (Developer SOTY 2025) bakes its whole authored palette into one **16×16 texture atlas** — a unity + memory device (not content-derived), the texture-space form of the same idea. *Stack:* exactly 2–3 OKLCH `@theme` tokens, forbid a fourth; the accent maps to every interactive state; AA-checked at definition. *Discipline:* borrow the restraint, not the exact monochrome grayscale (a 2019–21 fashion); the accent must clear AA for text. - **8. Content-Derived Color** — derive the palette from the hero object/content *at build or runtime* so the site's color IS the product's color (distinct from Pattern 7's hand-authored palette). *Winners:* Active Theory v4 (scene lit by an averaged color pulled from each frame of the work shown — SOTY 2018; reconstructed), Lando Norris (palette drawn from the helmet designs, 2025). *Stack:* no WebGL for the idea — extract 2–3 OKLCH values from a hero image at build time or via a tiny canvas average, pipe to `--accent`, animate the swap with a spring; `data-world` per-route tokens. *Discipline:* keep derived colors AA-safe (backgrounds/accents, not body copy); sample once and cache. - **9. Invert the Genre Palette** — name the color story the category defaults to and commit to its credible opposite — a pure color decision, zero perf cost, maximum differentiation. *Winners:* Star Atlas (light/warm vs dark/neon sci-fi, Users'-Choice SOTY 2021), Prometheus Fuels (warm-analog energy startup, SOTY 2021), Nomadic Tribe (earthy gouache, SOTY 2019). *Stack:* entirely `@theme` OKLCH token work — name the cliché (fintech blue, sci-fi dark, luxury black/gold, wellness sage), pick the credible opposite, pair with Pattern 7's ceiling. *Discipline:* invert for a reason the brand can defend; still must pass AA (high-key can be lower-contrast than dark). ### Motion choreography - **10. Scroll-as-Camera** — bind scroll to one continuous choreographed spatial move — a dolly/scale/focus-rack through a single scene — so scrolling reads as travel, not paging. *Winners:* Lusion v3 Z-depth camera (SOTY 2023), Igloo scroll-as-dolly (2024), Opal pinned zoom/rotation reveal (2024; original's reduced-motion handling unverified). *Stack:* do the feel without an engine — Motion `useScroll`/`useTransform` on `translateZ`/`scale`/`blur()` over 2–3 `sticky` sections; escalate to R3F only behind `showpiece`'s gate — or, when the camera must travel across routes rather than through one section, behind `set-design`'s site-scale gate, which maps each route to a window of one authored camera clip and never takes native scroll away. *Discipline:* **the #1 scroll-jack hazard** — NEVER hijack scroll velocity or remove native scroll; reduced-motion collapses to plain stacked sections. Most older canvas-only winners here are dead or replaced — the semantic layer is what survives; the living exception is Messenger (canvas-only, Developer SOTY 2025), and even it scored lowest on Usability (7.46). - **11. One Physics** — choose ONE easing/motion personality that embodies the subject (speed, weight, bounce, bleed) and apply it to every transition/hover/reveal. Consistency, not variety, is the signature. *Winners:* Lando Norris racing momentum (2025), Lusion v3 inertial matter (2023), Synchronized weighted fluid (SOTD 2020). *Stack:* one shared Motion transition token site-wide (owned by `motion-language`) — speed `[0.22,1,0.36,1]`, weight spring `{60,18}`, play spring `{300,12}`. *Discipline:* reduced-motion → instant; one physics only; scale duration to the element's importance. - **12. Semantic Motion Only** — every animation encodes meaning (reveal, relationship, erasure, progress) or is cut; the only permitted ambient is disciplined low-amplitude **living idle**, always behind reduced-motion. *Winners:* The Other Side of Truth (messages dissolve to dramatize silencing, 2022), DARK/Netflix (hover = investigation, 2020), MA (sine-wave idle life, SOTM 2019). *Stack:* bind motion to intent (scroll/hover/state/load); living idle = `useTime`-driven `translateY(sin(t))` on ≤2 elements, transform-only. *Discipline:* ambient motion is award-style slop — resist it; living idle must be low-amplitude and disable-able; reduced-motion swaps to the end state so meaning is never lost. ### Interaction & cursor - **13. The Prove-It Gesture** — one intentional gesture (press-and-hold, drag-to-intensify) that reveals hidden depth or teaches the whole model by consequence. *Winners:* KPR press-and-hold lore layer (2022), Bruno Simon onboarding-by-consequence — first key-press knocks the 3D title over (2019), Nomadic hold-to-intensify (2019). *Stack:* `onPointerDown/Up` + Motion cross-fade, or a held pointer ramping a spring `useMotionValue`; owned by `physics`. *Discipline:* never the only path to key info — pair a visible affordance + a non-gesture route; keyboard-operable, touch fallback, reduced-motion instant. - **14. The Cursor as Narrator** — elevate the cursor from pointer to communicator — it labels affordance ("explore"/"watch"), points direction, or physically affects the scene. *Winners:* Synchronized grow+label cursor (SOTD 2020), Lusion reactive-momentum cursor (2023), Nomadic cursor-as-agent (2019). *Stack:* one pointer-following `
` + spring reading a `data-cursor` attribute, or pointer position fed into `--mx/--my` CSS props; owned by `physics`. *Discipline:* **pure enhancement only** — native cursor + real focus/hover + labels MUST exist underneath; disable on touch; never hide the system cursor without a working replacement. - **15. Interaction as Argument** — a single control (toggle/filter/switch) whose operation IS the site's core message — the user performs the argument by hand. *Winners:* The Other Side of Truth "world/russian TRUTH" toggle (SOTY 2022), DARK spoiler-gating filters (2020), Simply Chocolate unwrap (SOTY 2017; reconstructed). *Stack:* one state boolean driving `` cross-fades; **server-render both states** (crawlable, no-JS) then toggle client-side; zero WebGL. *Discipline:* only when the content is a genuine argument; both states reachable and legible without motion. ### 3D & showpiece - **16. The Persistent Hero Object** — anchor everything to ONE object that stays in frame and transforms through scroll — simultaneously the concept, the color system, and the tech story in one image. *Winners:* Lando helmet (2025), Opal pinned camera examined through scroll (2024), Lusion single weighted hero object (2023). *Stack:* static-first — an image-sequence/sprite-swap on scroll (`` frames, `srcset`) delivers ~80% of a rotatable 3D object at a fraction of the weight; pin with `sticky`, drive from `useScroll`; real WebGL only behind `showpiece`'s gate — or, when the object is the whole world the site lives inside rather than one hero, behind `set-design`'s, where the object is moved by an authored camera rather than re-mounted per page. *Discipline:* the object must not bury the message; high-res sequences can wreck LCP — budget the media, ship a static poster. - **17. One Material World** — commit every surface to a single visual primitive (ice, glass, points, watercolour, outline, grain) — medium = message. Cheap version: one motif + one post-stack (grain/vignette) site-wide, plus one human fingerprint. *Winners:* Igloo frozen world (2024), Star Atlas points of light (Users'-Choice SOTY 2021), Noomo glass/refraction (Users'-Choice SOTY 2023). *Stack:* a shared frosted-glass token system, or one grain + vignette + duotone wash site-wide (owned by `imagery`); reserve a real material shader for the hero only. *Discipline:* never apply the material to real text/nav (destroys a11y); the post-stack stays subliminal; inject one human fingerprint so the system reads made-by-people. - **18. Fake-Depth Before Real Depth** — achieve the look of 3D via layered 2D parallax, baked light, matcap/cel-shading — reach for a real engine only when the effect is genuinely impossible in 2D. *Winners:* Bruno Simon matcaps + blob shadows "no lights, just illusions" (2019), Prometheus collage-on-depth (2021; reconstructed), Star Atlas CSS depth-of-field (2021). *Stack:* Motion `useScroll` on `translateY`/`scale` per layer (compositor-only), baked lighting pre-rendered into assets, CSS `blur()` depth-of-field. *Discipline:* heavy parallax is dated + vestibular — keep it subtle, non-load-bearing, disabled under reduced-motion; budget the assets (not 4MB of PNGs). ### Transitions & loading - **19. The Loader is the Overture** — replace the spinner with a purposeful opening that IS the first scene — it masks real warm-up, sets tempo, and its final frame becomes the hero's first frame for a seamless handoff. *Winners:* Persepolis seamless preloader → intro → WebGL (Developer SOTY 2022), Igloo real-time intro as scene one (2024), Lando "Load Norris" (2025). *Stack:* a light Motion loader over Suspense/preload; its final keyframe equals the hero's initial state via `layoutId`/matched transform. *Discipline:* must be skippable + instant-cut under reduced-motion; on a light content site a loader is pure friction — only justified when it masks genuine warm-up in <1.5s. - **20. The Masked Cut** — cover every section/route transition with a brief full-bleed effect (color-flood, frost/aberration, dissolve, page-peel) so swaps are invisible and load happens behind the cover; a color-wipe doubles as wayfinding. *Winners:* MA color-wipe-as-wayfinding (SOTM 2019), Igloo aberration + frost (2024), Star Atlas particle dissolve (2021). *Stack:* a reusable `` (Motion `AnimatePresence` + full-cover overlay); fire the route/heavy swap inside the cover; prefer the View Transitions API for routes; owned by `page-transitions`. *Discipline:* requires DIRECTION.md justification (the full-bleed transition `page-transitions` gates); reduced-motion → plain crossfade/instant; keep it brief; ONE grammar reused, not a different effect per section. - **21. Instant Everything** — prefetch the *adjacent* few heavy pieces, keep them **mounted**, and opacity-crossfade instead of unmount/swap — the perceived instantaneousness IS the wow. *Winners:* Active Theory v4 5×5 preloaded-video grid, zero switch-stall (SOTY 2018; reconstructed), the Cool Club inertial roam across a resident card field (SOTD + Developer Award, Aug 2019; FWA Mobile Site of the Year 2019; reconstructed), Messenger "drip-in" state over frames (Developer SOTY 2025). *Stack:* Next.js `prefetch` the adjacent route(s), `priority` posters, keep the incoming media mounted (`opacity-0` + `pointer-events-none`) and Motion-crossfade — never unmount/remount the heavy node; cap to the adjacent 2–3 neighbors. *Discipline:* a **weight trap** if misread as "preload everything" — budget how many heavy nodes live at once; a not-ready neighbor shows a matched-dimension skeleton (no CLS), never a fake-instant blank; reduced-motion → instant swap. - **22. Shared-Element Lift** — model nav as two states with depth: a calm **Browse** field; pick one and it **Elevates** into focus (the same element scales/lifts) so you **Read** without a jarring cut. Companion: "endless field, bounded meaning" — a field may loop infinitely, but every slide stays a real crawlable `` with its own URL. *Winners:* the Cool Club browse→elevate→read across a looping card field (SOTD + Developer Award, Aug 2019; FWA Mobile Site of the Year 2019; reconstructed). *Stack:* a CSS grid/scroll-snap carousel of real `` cards; a Motion `layoutId` shared-element transition (or the View Transitions API) lifts the chosen card into a detail overlay; loop by duplicating head/tail. *Discipline:* the lift must never trap — a real close/back + browser Back returns to the field at position; every looping slide stays a real link (the Cool Club's live URL fetched empty for crawlers — do not repeat that); keyboard tab/Enter/Esc. ### Craft details - **23. Weight as a Feature** — treat total payload as a headline constraint set *before* adding richness — ruthless compression, baking, dedup, JIT loading, per-device tiers, and always a complete static/semantic layer underneath. *Winners:* Messenger 5.7MB multiplayer 3D (Developer SOTY 2025), Bruno Simon ~2.8MB drive-a-car world (2019), Orano 901KB gzipped for 30 models (Developer SOTY 2018). *Stack:* set a byte budget first; server-render HTML; CSS-first motion; `next/dynamic` + idle/Intersection loading; lazy the GL bundle after LCP; AVIF/WebP + Draco. Targets: LCP <1.5s, CLS <0.05, INP <100ms, 60fps, <3MB. *Discipline:* a hard rule — a 9MB/6s page will not win regardless of beauty; most older canvas-only winners are dead or replaced (Messenger is the living exception, and even it ships essentially no static/SEO path). The semantic layer is what survives. - **24. Progressive Spectacle Tiers** — design the experience as tiers — a complete static/semantic no-JS baseline, a CSS/Motion-enhanced tier, and an optional top-rung WebGL tier — identical content, selected by capability + reduced-motion preference. The operational form of the WebGL gate. *Winners:* DARK SVG/CSS baseline + WebGL desktop-only (2020), Mammut cinematic with NO WebGL (E-commerce SOTY 2020), Opal top-rung effect rebuilt in native CSS scroll-driven (2024). *Stack:* build the static tier first (complete without JS), layer CSS scroll-driven as enhancement, add Motion, gate the WebGL tier behind `matchMedia` + reduced-motion + a real static poster (owned by `showpiece`; at site scale `set-design` owns it, the static tier is a complete site rather than a poster, and each route's authored poster frame is re-exported as its OG image — separate JPEG encode, since the OG file convention takes no AVIF). *Discipline:* all tiers deliver the same content and meaning — never a degraded stub; test with JS off and reduced-motion on; no "please rotate your device" walls. - **25. Framed Data** — present a key statistic *inside a thematic SVG mask/clip-path frame* (bullet holes, a gauge, a filling vessel) and animate the number up within it, so the figure feels embodied; the framed static number is the fallback. *Winners:* The Other Side of Truth — war stats framed by bullet-hole vignettes so each number reads as evidence (SOTY 2022). Generalizes to social-proof/data-display: "99.99% uptime" in a gauge, "10,000+ customers" in a themed vessel. *Stack:* an inline SVG ``/`clip-path` frame around a `` number (Motion `useInView` + counting), zero canvas; the number is real DOM text with the full value in `aria-label`. *Discipline:* the frame decorates *around* the digits, never cuts into legibility (keep AA); real text, never a canvas glyph; reduced-motion → final number present; reserve it for hero figures, not every stat. ## A note on sound — the recurring layer ultraweb omits Audio is a first-class layer in many winners (New Mobile Workforce's synced transition whooshes, Igloo's ambient score, Messenger's per-zone spatial soundscapes). ultraweb **omits sound by default** — autoplay audio is an accessibility, bandwidth, and open-office/public-context hazard. If a brief genuinely demands it: **opt-in only** (a user gesture enables it), **muted by default** with a persistent visible mute control, and it **never gates progress, content, or a transition** — it enhances a site already complete and navigable in silence. ## The invariants and the jury model Moved to `references/INVARIANTS.md` — `design-judge` and `gate-visual` read that file directly and score against it verbatim; it is the anti-drift copy of record. ## Dated fashions — borrow the mechanic, never the skin - **2018 cyberpunk wet-neon grade** (RGB-shift, aberration shimmer) — period look; borrow content-reactive color, not the neon. - **Heavy parallax as the main idea** — vestibular/mobile/readability risk; light non-load-bearing sections only. - **Large autoplay background hero video** — obsolete: perf cost + intrusion. **The static stock hero image** — replaced by oversized kinetic type or a light interactive element. - **Soft UI / neumorphism / uniform heavy shadow + extreme radius** — replaced by sharp geometry, 1px borders, zero shadow. - **Muted "safe" palettes** — read as timid; near-monochrome + ONE acid accent instead. **Monochrome-agency grayscale as a whole identity** (2019–21) — borrow the restraint, not the gray. - **Gimmick 3D with no narrative purpose** — most older canvas-only winners in the corpus are dead or replaced (Messenger, Developer SOTY 2025, is the living exception, and even it has no real static path). - **Web3/crypto-hype aesthetic**; **12fps stepped hand-drawn cadence** — date fast; take the craft, not the framing. **Generic template / builder / AI-default layouts** — the strongest 2025–26 differentiator is visible human authorship. **Duplicate DOM for mobile / bloated JS** — a Developer-Award disqualifier. ## Using the canon in the pipeline - **`direction` (Phase 2)** reads `references/ARCHETYPE-MAP.md` — and ONLY that file, ~3KB — for the committed archetype: it names the reference winners (as *qualities to chase, never URLs*) and picks the canon pattern(s) whose *principle* the ONE signature move will borrow. Citations land in DIRECTION.md's References line by pattern name. - **motion & component skills** cite patterns by name instead of re-deriving them — `hero` → Type as the Image / The Persistent Hero Object; `typography` → Type as Evidence; `color` → Content-Derived Color / Invert the Genre Palette; `imagery` → One Material World; `scroll-motion` → Scroll-as-Journey / Scroll-as-Camera / Fake-Depth; `motion-language` → One Physics / Semantic Motion Only; `physics` → The Prove-It Gesture / The Cursor as Narrator; `page-transitions` → The Masked Cut / The Loader is the Overture; `showpiece` → Weight as a Feature / Progressive Spectacle Tiers; `set-design` → Scroll-as-Camera / The Persistent Hero Object / One Material World / The Loader is the Overture / Weight as a Feature / Progressive Spectacle Tiers; `data-display`/`social-proof` → Framed Data; `wireframe`/`navigation` → The Metaphor Engine / Scroll-as-Journey / Archive-as-Toy. - **`design-judge` (Phase 11)** scores Distinctiveness against the invariants — ONE signature move executed to an extreme (not five), principle not copied surface — and reads the 70/20 weighting as the reason a janky wow move is a net loss. ## Anti-patterns - **Copying a winner's surface** — the neon grade, the exact grayscale, the literal drive-a-car — instead of its principle. The surface is the dated fashion; the principle is what transferred. - **Stacking patterns** — three metaphors, two signature moves, a wall of effects. Two moves lower the score (invariant 1). One, finished. - **Citing the canon to justify breaking a gate or the banned list** — it never overrides `taste`, `showpiece`'s 60fps gate, or WCAG 2.2 AA. Each pattern's discipline note is the guardrail. - **Reaching for the WebGL rung when the pattern's own Stack line names a CSS/Motion route** that clears it (Opal's scroll-scale is native CSS scroll-driven, not R3F). - **Treating a winner's award label as gospel or a dead site's mechanics as verified** — several corpus entries were Category/SOTD/Users'-Choice wins, and the reconstructed cohort is *reported*, not live-inspected. Cite the tier the dossier verifies; never inflate. - **Pattern-picking before DIRECTION.md exists** — the canon serves a committed direction; it is references, not a shopping list to assemble a site from. ## Worked example — Studio Norra, Oslo agency portfolio Moved to `references/example.md` — read only when this build's case is genuinely ambiguous; the sections above are the decision material. ## Composes with Moved to `references/composes.md` — the handoff map; load it when orchestrating this skill against its neighbors.