Expand Expression guidance and showcase richness checks

AGENTS.md

@@ -46,10 +46,12 @@ The remaining pattern, CSS, naming, token, checklist, and verification rules app
 
 Use this route when the task is to make a finished, expressive page (a landing page, brand study, or art-directed experiment) rather than to edit governed knowledge.
 
-- Read only [Showcase](showcase/README.md), one [Expression](expression/index.md) direction, and the Expression or [Motion techniques](motion/techniques/scroll-choreography.md) the page needs. Skip governance, lifecycle, provenance, and consumer-reference documents: a showcase work creates no governed record.
+- Read only [Showcase](showcase/README.md), the [Expression Direction Brief](expression/direction-brief.md), one [Expression](expression/index.md) direction, and the Expression or [Motion techniques](motion/techniques/scroll-choreography.md) the page needs. Skip governance, lifecycle, provenance, and consumer-reference documents: a showcase work creates no governed record.
+- Reuse existing assets first: inspect the reference site's media, supplied files, and project assets before building a visual. Create new assets only when the intended result is graphical or vector artwork (icons, diagrams, patterns, abstract graphics, or deliberately vector illustrations). Do not generate photos, video, or realistic product renders, or imitate them with CSS/SVG/canvas stand-ins. If the needed asset is missing, find an existing one or report the missing slot; do not fabricate a replacement to pass a richness check. See [Image Weight](expression/techniques/image-weight.md).
+- Meet the richness floor measured on 49 live homepages ([Measured Expression Benchmarks](expression/measured-benchmarks.md)): existing imagery, an intentional vector graphic, or a live product surface on every screen, never a headline alone on a gradient; a 100-320ms state change on every link, button, card, tab, and media frame; masks, rounded clips, and hairlines instead of soft shadows; display type 3.5-5.5 times the body, not larger.
 - Build in `showcase/<slug>/` with an `index.html` and a `brief.md`. The Layout CSS Authoring, CSS Scope, Class Naming, and Token rules do not apply there. Any property, selector, library, font, or WebGL is allowed.
 - Preview with `bun run showcase:serve`; over SSH, it prints the `ssh -L` command to run on the local machine. Add the work to the hub, `showcase/index.html`, creating the hub with the first work.
-- Layout remains the floor, checked by outcome: run `node scripts/check-showcase.mjs --work <slug>` and fix every failure (errors, overflow, focus, reduced motion, contrast, honest actions, hash navigation, short viewports, offscreen loops, offline and no-script reading; see [Showcase QA](showcase/QA.md)). Then review the settled screenshots in `.tmp/showcase/<slug>/` for taste, which the check does not judge.
+- Layout remains the floor, checked by outcome: run `node scripts/check-showcase.mjs --work <slug> --richness error` and fix every failure (errors, overflow, focus, reduced motion, contrast, honest actions, hash navigation, short viewports, offscreen loops, offline and no-script reading, empty screens, too few responsive elements, slow link transitions, missing masks or hairlines; see [Showcase QA](showcase/QA.md)). Then review the settled screenshots in `.tmp/showcase/<slug>/` for taste, which the check does not judge.
 - A brand study of a real brand must follow [Brand Studies](expression/brand-studies.md): name the subject, mark the page Unofficial, set `noindex`, and use no copied logos or verbatim copy.
 - Handoff: `consumer_reference: not_applicable` because a showcase work selects no consumer reference record.
 - Promote a value or technique out of a showcase work only by writing it into an Expression or Motion page. Never copy showcase CSS into `patterns/**`.

DOMAINS.md

@@ -30,7 +30,7 @@ This manifest is the source of truth for top-level StyleGallery domains. A domai
 | Design Engineering | `design-engineering/index.md` | `design-engineering/interface-craft.md`, `design-engineering/consumer-migration-readiness.md`, `design-engineering/reference-profiles/index.md`, `design-engineering/reference-profiles/governed-local/index.md`, `design-engineering/reference-profiles/external-adaptation/index.md`, `design-engineering/decision-tree.md`, `design-engineering/component-contract.md`, `design-engineering/worked-examples.md`, `design-engineering/state-management/decision-tree.md`, `design-engineering/state-management/index.md`, `design-engineering/state-management/patterns/derived-state.md`, `design-engineering/state-management/patterns/draft-and-baseline.md`, `design-engineering/state-management/patterns/id-selection.md`, `design-engineering/state-management/patterns/identity-reset.md`, `design-engineering/state-management/patterns/latest-request-wins.md`, `design-engineering/state-management/patterns/optimistic-overlay.md`, `design-engineering/state-management/patterns/single-flight.md`, `design-engineering/state-management/patterns/single-owner.md`, `design-engineering/state-management/patterns/submitted-snapshot.md`, `design-engineering/state-management/patterns/unsaved-navigation.md`, `design-engineering/state-management/patterns/url-state.md`, `design-engineering/state-management/patterns/versioned-restore.md`, `design-engineering/state-management/recipes/delete-undo.md`, `design-engineering/state-management/recipes/index.md`, `design-engineering/state-management/recipes/multi-step-form.md`, `design-engineering/state-management/recipes/search-detail.md`, `design-engineering/state-management/recipes/settings-save.md`, `design-engineering/state-management/state-brief.md`, `design-engineering/state-management/verification.md`, `design-engineering/native-interaction-contracts.md`, `design-engineering/text-input-and-internationalization.md`, `design-engineering/loading-and-feedback.md` |
 | Platform Guides | `platform-guides/index.md` | `platform-guides/apple-interaction.md`, `platform-guides/adaptation-workflow.md`, `platform-guides/android-interaction.md`, `platform-guides/windows-interaction.md`, `platform-guides/compatibility-matrix.md`, `platform-guides/adaptive-navigation.md`, `platform-guides/preferences-and-accessibility.md`, `platform-guides/input-and-focus.md` |
 | Design Terminology | `design-terminology/index.md` | `design-terminology/source-kinds.md`, `design-terminology/source-vocabularies.md`, `design-terminology/concept-families.md`, `design-terminology/relation-types.md`, `design-terminology/conflict-cases.md`, `design-terminology/comparison-workflow.md`, `design-terminology/token-semantics.md`, `design-terminology/interaction-semantics.md`, `design-terminology/typography-semantics.md` |
-| Expression | `expression/index.md` | `expression/direction-brief.md`, `expression/brand-studies.md`, `expression/directions/nocturne-editorial.md`, `expression/directions/warm-print.md`, `expression/techniques/gradient-atmosphere.md`, `expression/techniques/grain-and-texture.md`, `expression/techniques/webgl-hero.md` |
+| Expression | `expression/index.md` | `expression/direction-brief.md`, `expression/brand-studies.md`, `expression/directions/nocturne-editorial.md`, `expression/directions/warm-print.md`, `expression/techniques/gradient-atmosphere.md`, `expression/techniques/grain-and-texture.md`, `expression/techniques/webgl-hero.md`, `expression/directions/fintech-clarity.md`, `expression/directions/hardware-catalogue.md`, `expression/directions/developer-tool.md`, `expression/directions/korean-service.md`, `expression/techniques/drawn-products.md`, `expression/techniques/live-product-demos.md`, `expression/techniques/canvas-3d.md`, `expression/study-atlas.md`, `expression/measured-benchmarks.md`, `expression/techniques/image-weight.md`, `expression/techniques/display-type-calibration.md`, `expression/techniques/surface-detail.md` |
 
 ## Shared Non-Domain Infrastructure
 

consumer-reference/policies/lifecycle-a2a-extension.json

@@ -94,8 +94,8 @@
         "scripts/test-lifecycle-disposition.mjs",
         "scripts/validate-lifecycle-disposition.mjs"
       ],
-      "scanned_file_count": 508,
-      "scanned_paths_content_id": "sha256:6001abaaf98d0c71c82f8433818c411b74df09a34a759ae00305bf7c3ad8665b"
+      "scanned_file_count": 577,
+      "scanned_paths_content_id": "sha256:c69d6360956b021f58f3b4eeb4e10ce8a12543839564d0fa36119241d3bd1a3f"
     },
     "implementation": {
       "path": "scripts/agent-native/v2/extensions/a2a-projection.mjs",

consumer-reference/policies/lifecycle-ag-ui-extension.json

@@ -94,8 +94,8 @@
         "scripts/test-lifecycle-disposition.mjs",
         "scripts/validate-lifecycle-disposition.mjs"
       ],
-      "scanned_file_count": 508,
-      "scanned_paths_content_id": "sha256:6001abaaf98d0c71c82f8433818c411b74df09a34a759ae00305bf7c3ad8665b"
+      "scanned_file_count": 577,
+      "scanned_paths_content_id": "sha256:c69d6360956b021f58f3b4eeb4e10ce8a12543839564d0fa36119241d3bd1a3f"
     },
     "implementation": {
       "path": "scripts/agent-native/v2/extensions/agui-projection.mjs",
@@ -113,10 +113,10 @@
         "role": "repository_reference",
         "lines": {
           "start": 1,
-          "end": 178
+          "end": 180
         },
-        "file_sha256": "0dbd7b94dfcd52637d1bdfbd9eaee1e926c8d85693a0b78f23df46d8a2d2c428",
-        "content_id": "sha256:0dbd7b94dfcd52637d1bdfbd9eaee1e926c8d85693a0b78f23df46d8a2d2c428",
+        "file_sha256": "cfaf4332f20929f3a6e54b0aec9f40b365ccdf353c327868654ef8dfdf492aa3",
+        "content_id": "sha256:cfaf4332f20929f3a6e54b0aec9f40b365ccdf353c327868654ef8dfdf492aa3",
         "reference_lines": [
           22
         ],

expression/brand-studies.md

@@ -21,7 +21,7 @@ A brand study reinterprets a real, named brand as an unofficial design exercise.
 2. Add `<meta name="robots" content="noindex, nofollow">` to `index.html`.
 3. Show the word "Unofficial" in visible page text, typically in the title and footer, e.g. "Unofficial brand study".
 4. Study the brand's register, then write original copy in that register. Do not paste taglines, product copy, or press text.
-5. Do not use the brand's logo files, icon sets, trademarked artwork, or product photography. Draw an original wordmark in a web font, or use the plain brand name as text.
+5. Reuse existing photographs, videos, product renders, and other media from the reference or supplied/project assets; record their source in the brief. Do not replace them with generated pictures or CSS/SVG product stand-ins. Create assets only for intentionally graphical or vector work, following [Image Weight](techniques/image-weight.md). Keep the brand name as plain text rather than copying its logo as the study's identity.
 6. Run `node scripts/check-showcase.mjs --work <slug>`. The brief and page checks fail if steps 1-3 are missing.
 
 ## Opinionated Guidance
@@ -38,7 +38,7 @@ Following these steps reduces confusion and copying risk. It is not legal advice
 
 ## Verification Contract
 
-The showcase checker enforces the machine-checkable steps (subject, `noindex`, visible Unofficial text). A reviewer checks the rest from the source and screenshots: no copied logos, artwork, or verbatim copy.
+The showcase checker enforces the machine-checkable steps (subject, `noindex`, visible Unofficial text). A reviewer checks original copy, plain-text brand identity, recorded media sources, and whether newly created assets are intentionally graphical/vector rather than substitutes for photography or realistic renders.
 
 ## Source, License, And Attribution
 

expression/direction-brief.md

@@ -30,8 +30,13 @@ type:
   label: # family, case, tracking
 palette: # 3-6 hex values with roles: ground, text, accent, secondary accent
 texture: # grain, noise, paper, halftone, or none, with strength
-atmosphere: # gradient field, WebGL, photography, illustration, or none
+atmosphere: # gradient field, grain, or WebGL behind content; never in place of content
+imagery: # existing asset per slot: source URL/path, crop, focal point, and role; name any missing asset
+asset_creation: # none by default; only intentionally graphical/vector assets, never generated photos/video/realistic renders
+response: # what answers the pointer (links, cards, tabs, media frames) and how fast; 100-320ms states, 400-500ms reveals
+surface_detail: # edge-fade masks, rounded media clips, hairlines between panels
 motion_density: # entrance sequence count, scroll scenes, ambient loops
+length: # screens planned and the sequence each idea gets (setup, product, proof)
 signature: # the one unusual move this page makes that a template would not
 constraints: # performance budget, accessibility floor, brand rules
 consumer_reference: not_applicable
@@ -40,10 +45,17 @@ consumer_reference_reason: A direction brief selects no consumer reference recor
 
 ### Choosing Values Fast
 
-- Pair one expressive display face with one quiet body face and one mono or small-caps label face. Three families is the ceiling.
-- Set display type larger and tighter than feels safe: `clamp()` from about 3rem at 320px up to 9-13rem at 1440px, tracking around -0.03em, line height 0.85-0.95.
+These defaults come from [Measured Expression Benchmarks](measured-benchmarks.md), which compared 49 live homepages with StyleGallery studies built from the older advice. The studies read as empty and loud; the originals read as full and calm.
+
+- Select existing assets before writing the page: reference-site media, supplied files, then project assets. Reuse photographs, video, and product renders instead of making replacements. New asset creation is limited to intentional graphics/vectors: icons, diagrams, patterns, abstract graphics, and vector illustrations. SVG, canvas, WebGL, or an image generator is not a workaround for recreating a photographic scene.
+- Put existing imagery, an intentional vector graphic, or a live product surface on every screen. Implementing a working UI is page behavior, not permission to fabricate photographic product imagery. If an asset is missing, find an existing one or name the missing slot rather than filling it with a crude drawing. See [Image Weight](techniques/image-weight.md).
+- Size display type from the page's job, not bigger than feels safe: the largest text is 3.5-5.5 times the body (measured median 56px over 14px), tracking 0em on Korean and system faces and about -0.02em on Latin grotesks, line height 1.1-1.2. Only a campaign or editorial hero goes to 6-7 times. See [Display Type Calibration](techniques/display-type-calibration.md).
+- Pair one display face with one body face, plus a mono or small-caps label face only if the page needs it. Two families is the measured median; three is the ceiling.
+- Make many things answer the pointer: every link, button, card, tab, and media frame gets a 100-320ms state change on `opacity`, `color`, `transform`, or `background-color` (measured median: 76 responsive elements per page). Reserve 400-500ms for reveals.
+- Finish surfaces: edge-fade masks on anything that scrolls or bleeds, rounded clips on media, 1px hairlines between panels instead of soft shadows. See [Masks, Clips, And Hairlines](techniques/surface-detail.md).
+- Pace the page at 6-10 screens and give each idea a sequence (setup, product, proof) instead of one beat. Change the background band about every three screens, not every screen.
 - Pick a ground that is not pure black or pure white (`#07070a`, `#f4efe6`). Use one hot accent and at most one cool counter-accent.
-- Spend expression in a few places: one hero moment, one signature scroll scene, one closing moment. Leave the rest quiet so those land.
+- Spend the big moments in a few places: one hero moment, one signature scroll scene, one closing moment. Everywhere else stays calm but never empty: quiet sections still carry imagery and respond to the pointer.
 
 ## Opinionated Guidance
 
@@ -59,7 +71,7 @@ No palette, type pairing, or density is correct for every subject. A filled brie
 
 ## Verification Contract
 
-The brief is ready when every field has a concrete value and `signature` names a specific move. The built page is verified by `node scripts/check-showcase.mjs --work <slug>` and by reviewing its screenshots against `memory` and `signature`.
+The brief is ready when every field has a concrete value, `imagery` names a slot for every screen, and `signature` names a specific move. The built page is verified by `node scripts/check-showcase.mjs --work <slug> --richness error`, which fails an empty screen, too few responsive elements, slow link transitions, and missing masks or hairlines, and by reviewing its screenshots against `memory` and `signature`.
 
 ## Source, License, And Attribution