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 <section> 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 <div> + 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 <AnimatePresence> 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 (<img> 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 <SceneTransition> (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 <a> 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 <a href> 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 <mask>/clip-path frame around a <CountUp> 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.