stylegallery 0.1.7 → 0.1.9

package/consumer-reference/agent-native/v2/schema/admission-policy.schema.json

@@ -13,15 +13,15 @@
     "media_type": { "const": "text/markdown" },
     "allowed_materials": {
       "type": "array",
-      "minItems": 181,
-      "maxItems": 181,
+      "minItems": 180,
+      "maxItems": 180,
       "items": {
         "type": "object",
         "additionalProperties": false,
         "required": ["repository_path", "domain", "lifecycle"],
         "properties": {
           "repository_path": { "type": "string", "pattern": "^(?!/)(?!.*(?:^|/)\\.{1,2}(?:/|$))[A-Za-z0-9._ -]+(?:/[A-Za-z0-9._ -]+)*\\.md$" },
-          "domain": { "enum": ["layout", "motion", "design-engineering", "game-ui", "platform-guides", "design-terminology", "shared"] },
+          "domain": { "enum": ["layout", "motion", "design-engineering", "platform-guides", "design-terminology", "expression", "shared"] },
           "lifecycle": { "enum": ["draft", "stable", "deprecated", "experimental", "generated"] }
         }
       }

package/consumer-reference/agent-native/v2/schema/material-record.schema.json

@@ -15,6 +15,6 @@
     "source_sha256": { "type": "string", "pattern": "^[a-f0-9]{64}$" },
     "byte_length": { "type": "integer", "minimum": 0 },
     "lifecycle": { "enum": ["draft", "stable", "deprecated", "experimental", "generated"] },
-    "domain": { "enum": ["layout", "motion", "design-engineering", "game-ui", "platform-guides", "design-terminology", "shared"] }
+    "domain": { "enum": ["layout", "motion", "design-engineering", "platform-guides", "design-terminology", "expression", "shared"] }
   }
 }

package/design-engineering/state-management/index.md

@@ -49,7 +49,7 @@ Neither a reducer nor a state machine guarantees race freedom. No library is the
 
 ## Verification Contract
 
-A reader should find a pattern from a failure symptom, identify its owner and minimal implementation, compose it into a screen, and locate a repeatable acceptance sequence. Run `npm run test:state-management` for the 12 local examples; record browser and backend checks separately.
+A reader should find a pattern from a failure symptom, identify its owner and minimal implementation, compose it into a screen, and locate a repeatable acceptance sequence. Run `bun run test:state-management` for the 12 local examples; record browser and backend checks separately.
 
 ## Source, License, And Attribution
 

package/design-engineering/state-management/patterns/derived-state.md

@@ -31,7 +31,7 @@ Only source items and filter are writable. Visible items and total are computed.
 
 ### Minimal Executable Example
 
-Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `npm run test:state-management`. The assertions exercise the local model, not a browser or backend.
+Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `bun run test:state-management`. The assertions exercise the local model, not a browser or backend.
 
 ```js
 import assert from "node:assert/strict";

package/design-engineering/state-management/patterns/draft-and-baseline.md

@@ -31,7 +31,7 @@ The form owns a draft, persistence supplies the baseline, and dirty is derived u
 
 ### Minimal Executable Example
 
-Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `npm run test:state-management`. The assertions exercise the local model, not a browser or backend.
+Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `bun run test:state-management`. The assertions exercise the local model, not a browser or backend.
 
 ```js
 import assert from "node:assert/strict";

package/design-engineering/state-management/patterns/id-selection.md

@@ -31,7 +31,7 @@ The screen owns `selectedId`; the data owner supplies current entities. Detail i
 
 ### Minimal Executable Example
 
-Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `npm run test:state-management`. The assertions exercise the local model, not a browser or backend.
+Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `bun run test:state-management`. The assertions exercise the local model, not a browser or backend.
 
 ```js
 import assert from "node:assert/strict";

package/design-engineering/state-management/patterns/identity-reset.md

@@ -31,7 +31,7 @@ The screen owner stores identity and generation. Entering a new identity clears
 
 ### Minimal Executable Example
 
-Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `npm run test:state-management`. The assertions exercise the local model, not a browser or backend.
+Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `bun run test:state-management`. The assertions exercise the local model, not a browser or backend.
 
 ```js
 import assert from "node:assert/strict";

package/design-engineering/state-management/patterns/latest-request-wins.md

@@ -33,7 +33,7 @@ The read owner stores a monotonically increasing identity, status, and last acce
 
 ### Minimal Executable Example
 
-Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `npm run test:state-management`. The assertions exercise the local model, not a browser or backend.
+Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `bun run test:state-management`. The assertions exercise the local model, not a browser or backend.
 
 ```js
 import assert from "node:assert/strict";

package/design-engineering/state-management/patterns/optimistic-overlay.md

@@ -32,7 +32,7 @@ The cache owns base; the operation owns an overlay and ID. The displayed value i
 
 ### Minimal Executable Example
 
-Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `npm run test:state-management`. The assertions exercise the local model, not a browser or backend.
+Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `bun run test:state-management`. The assertions exercise the local model, not a browser or backend.
 
 ```js
 import assert from "node:assert/strict";

package/design-engineering/state-management/patterns/single-flight.md

@@ -31,7 +31,7 @@ The operation owner holds one pending promise per declared scope. This example s
 
 ### Minimal Executable Example
 
-Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `npm run test:state-management`. The assertions exercise the local model, not a browser or backend.
+Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `bun run test:state-management`. The assertions exercise the local model, not a browser or backend.
 
 ```js
 import assert from "node:assert/strict";

package/design-engineering/state-management/patterns/single-owner.md

@@ -31,7 +31,7 @@ The owner stores `value`; controls receive it and emit an intent. Temporary text
 
 ### Minimal Executable Example
 
-Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `npm run test:state-management`. The assertions exercise the local model, not a browser or backend.
+Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `bun run test:state-management`. The assertions exercise the local model, not a browser or backend.
 
 ```js
 import assert from "node:assert/strict";

package/design-engineering/state-management/patterns/submitted-snapshot.md

@@ -33,7 +33,7 @@ The form owns draft and baseline; an active operation owns a copied snapshot and
 
 ### Minimal Executable Example
 
-Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `npm run test:state-management`. The assertions exercise the local model, not a browser or backend.
+Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `bun run test:state-management`. The assertions exercise the local model, not a browser or backend.
 
 ```js
 import assert from "node:assert/strict";

package/design-engineering/state-management/patterns/unsaved-navigation.md

@@ -33,7 +33,7 @@ The form owns dirty; the router integration owns a pending destination and guard
 
 ### Minimal Executable Example
 
-Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `npm run test:state-management`. The assertions exercise the local model, not a browser or backend.
+Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `bun run test:state-management`. The assertions exercise the local model, not a browser or backend.
 
 ```js
 import assert from "node:assert/strict";

package/design-engineering/state-management/patterns/url-state.md

@@ -31,7 +31,7 @@ The route owns committed query state; a text field may own an uncommitted buffer
 
 ### Minimal Executable Example
 
-Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `npm run test:state-management`. The assertions exercise the local model, not a browser or backend.
+Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `bun run test:state-management`. The assertions exercise the local model, not a browser or backend.
 
 ```js
 import assert from "node:assert/strict";

package/design-engineering/state-management/patterns/versioned-restore.md

@@ -32,7 +32,7 @@ The persistence adapter owns a versioned envelope and scope key. Decoding valida
 
 ### Minimal Executable Example
 
-Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `npm run test:state-management`. The assertions exercise the local model, not a browser or backend.
+Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `bun run test:state-management`. The assertions exercise the local model, not a browser or backend.
 
 ```js
 import assert from "node:assert/strict";

package/design-engineering/state-management/verification.md

@@ -31,7 +31,7 @@ Start with the selected pattern's invariant. Use controlled promises or an injec
 
 ### Executable Local Coverage
 
-From a repository checkout, `npm run test:state-management` extracts and executes the standalone `js` block from each of the 12 pattern pages in an isolated Node process. The examples assert model outcomes for ownership, projections, selection, drafts, save snapshots, navigation decisions, stale completions, duplicate effects, optimistic recovery, URL parsing, identity generations, and restore validation.
+From a repository checkout, `bun run test:state-management` extracts and executes the standalone `js` block from each of the 12 pattern pages in an isolated Node process. The examples assert model outcomes for ownership, projections, selection, drafts, save snapshots, navigation decisions, stale completions, duplicate effects, optimistic recovery, URL parsing, identity generations, and restore validation.
 
 The four recipes declare integration acceptance sequences; they are not runnable browser fixtures. Existing [Interaction Lab](../../examples/domain-interactions/README.md) is a separate prototype with its own evidence scope. New recipe acceptance remains unexecuted until adapted to a consumer.
 

package/design-terminology/conflict-cases.md

@@ -127,7 +127,7 @@ Query phrasing: `Dynamic Type typography token`, `Material Typography Fluent typ
 
 ## Platform-Specific Guidance
 
-When a case involves a platform guideline source, cite that platform's surface and route deeper convention comparison to [Platform Guides](../platform-guides/index.md); engine terms route to Game UI; motion terms to Motion.
+When a case involves a platform guideline source, cite that platform's surface and route deeper convention comparison to [Platform Guides](../platform-guides/index.md); motion terms route to Motion.
 
 ## Unsupported Absolutes
 

package/design-terminology/source-kinds.md

@@ -54,7 +54,7 @@ This guide classifies what kind of thing a vocabulary source is before any of it
 
 ## Platform-Specific Guidance
 
-Platform guideline sources are recorded here only for terminology. Bounded comparison of their interaction conventions belongs to [Platform Guides](../platform-guides/index.md); engine vocabulary belongs to Game UI.
+Platform guideline sources are recorded here only for terminology. Bounded comparison of their interaction conventions belongs to [Platform Guides](../platform-guides/index.md).
 
 ## Unsupported Absolutes
 

package/expression/brand-studies.md

@@ -0,0 +1,50 @@
+---
+type: Domain Policy
+title: Brand Studies
+description: Rules for unofficial reinterpretations of real brands in showcase works.
+domain: expression
+lifecycle: experimental
+provenance_kind: local
+---
+
+# Brand Studies
+
+Primary role: brand-study policy.
+
+## Repository Boundary
+
+A brand study reinterprets a real, named brand as an unofficial design exercise. It is allowed only in `showcase/`. It is not allowed in any governed domain page, Layout pattern, or reference profile. Platform Guides' prohibition on brand imitation still applies to Platform Guides.
+
+## Reusable Method
+
+1. Set `brand_study: true` and `subject: <brand name>` in the work's `brief.md`.
+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. 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
+
+A good study answers "what if this brand leaned harder into X?" rather than cloning the current site. Pick the X, write it in the brief's `signature` field, and let the page argue for it.
+
+## Platform-Specific Guidance
+
+`noindex` keeps search engines from ranking the study for the brand's name. It does not stop people from sharing a public URL, so deploy studies to preview hosts, not to a domain that could be mistaken for the brand's.
+
+## Unsupported Absolutes
+
+Following these steps reduces confusion and copying risk. It is not legal advice and does not create a license to any trademark.
+
+## Verification Contract
+
+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
+
+Locally authored policy. No upstream source.
+
+## IA Navigation
+
+Parent: [Expression](index.md).
+Next: [Showcase](../showcase/README.md).

package/expression/direction-brief.md

@@ -0,0 +1,83 @@
+---
+type: Domain Guide
+title: Expression Direction Brief
+description: Decide what a finished page should feel like, with concrete values, before building it.
+domain: expression
+lifecycle: experimental
+provenance_kind: local
+---
+
+# Expression Direction Brief
+
+Primary role: art-direction handoff template.
+
+## Repository Boundary
+
+This brief records one product page's direction. Its values belong to that page or to a named direction. They never become reusable Layout values, and they are not consumer-reference tokens.
+
+## Reusable Method
+
+A strong one-shot page comes from committing to a few specific choices. Fill every field with an actual value; "modern" or "clean" is not a value.
+
+```yaml
+subject: # what the page is for, in one sentence
+memory: # the one image or moment a visitor should remember
+reference: # a real site, film, print piece, or place, plus what to take from it
+register: # the voice of the copy, e.g. "late-night radio host, warm and dry"
+type:
+  display: # family, weight, tracking, line height, largest size
+  body: # family, weight, size, line height
+  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, 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
+consumer_reference_reason: A direction brief selects no consumer reference record.
+```
+
+### Choosing Values Fast
+
+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 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
+
+Write the `signature` field first. If you cannot name one move a template would not make, the page will read as a template no matter how polished it is.
+
+## Platform-Specific Guidance
+
+Variable and web fonts may fail to load. Name a system fallback with similar width so layout does not jump, and check the page with fonts blocked.
+
+## Unsupported Absolutes
+
+No palette, type pairing, or density is correct for every subject. A filled brief is a plan, not evidence that the page works.
+
+## Verification Contract
+
+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
+
+Locally authored template. No upstream source.
+
+## IA Navigation
+
+Parent: [Expression](index.md).
+Next: [Nocturne Editorial Direction](directions/nocturne-editorial.md).

package/expression/directions/nocturne-editorial.md

@@ -0,0 +1,81 @@
+---
+type: Domain Guide
+title: Nocturne Editorial Direction
+description: A dark, glowing, editorial direction with concrete type, color, texture, and motion-density values.
+domain: expression
+lifecycle: experimental
+provenance_kind: local
+---
+
+# Nocturne Editorial Direction
+
+Primary role: named art direction with starting values.
+
+## Repository Boundary
+
+These values are a starting point for product pages in `showcase/` or a consumer's own CSS. They are not tokens, defaults, or Layout inputs.
+
+## Reusable Method
+
+Mood: a city at 3am seen through glass. Dark ground, warm glowing accents, oversized serif display, and quiet mono labels.
+
+```css
+:root {
+  /* Ground and text */
+  --ink: #07070a;
+  --ink-2: #111118;           /* raised surfaces */
+  --paper: #efe9df;           /* primary text: warm, never pure white */
+  --paper-dim: rgb(239 233 223 / 0.62);
+  --line: rgb(239 233 223 / 0.14);
+  /* Accents: one hot, one cool, one highlight */
+  --ember: #ff5a36;
+  --violet: #7b5cff;
+  --haze: #9bd1ff;
+  /* Type */
+  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
+  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
+  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
+  /* Rhythm */
+  --gutter: clamp(1.25rem, 4vw, 3.5rem);
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+}
+```
+
+| Role | Value |
+| --- | --- |
+| Hero display | `--serif` 400, `clamp(2.8rem, 1.6rem + 4.4vw, 6.5rem)`, tracking -0.02em, line height 1.02, `text-wrap: balance`. Measured editorial and creative homepages top out at a median 88px; 11rem heroes read as a poster, not a page ([Display Type Calibration](../techniques/display-type-calibration.md)) |
+| Section display | `--serif` 400, `clamp(2rem, 1.3rem + 2.4vw, 3.6rem)`, tracking -0.02em, line height 1.08 |
+| Body | `--sans` 350, `clamp(1rem, 0.95rem + 0.25vw, 1.125rem)`, line height 1.55, dimmed to `--paper-dim` for secondary copy |
+| Labels | `--mono` 0.75rem, uppercase, tracking 0.14em |
+| Accent word | Italic serif with `linear-gradient(100deg, var(--ember), #ffb454 40%, var(--violet))` clipped to text, one word per headline |
+| Surfaces | `--ink-2` with 1px `--line` border, radius 1.5rem, two corner radial gradients from the card's own accent pair |
+| Buttons | Pill radius, primary is `--paper` on `--ink`, ghost is a `--line` border only |
+| Texture | [Grain](../techniques/grain-and-texture.md) at 0.22 opacity, `mix-blend-mode: overlay` |
+| Atmosphere | [Gradient aurora](../techniques/gradient-atmosphere.md) behind the hero, optional [WebGL field](../techniques/webgl-hero.md). Atmosphere sits behind content, never in place of it |
+| Imagery | A picture, drawn scene, or live product surface on every screen, framed with a rounded clip and an edge-fade mask where it bleeds into the ground ([Image Weight](../techniques/image-weight.md), [Masks, Clips, And Hairlines](../techniques/surface-detail.md)) |
+| Motion density | One entrance sequence, three to four scroll scenes, one ambient loop, and responsive states on every link, card, tab, and media frame at 150-300ms. Easing `expo.out`, entrances 0.6-0.9s, 0.06s word stagger |
+
+## Opinionated Guidance
+
+Use the gradient only on one italic word per headline; used on whole sentences it turns into a gaming UI. Keep body copy dim and let imagery and display type share the contrast. A dark page with only type and an aurora reads empty after the first screen; give every screen something to look at.
+
+## Platform-Specific Guidance
+
+`background-clip: text` still needs the `-webkit-` prefix in some engines; declare both. Large blurred gradients are expensive on low-end GPUs; keep them to three blobs and stop their animation under reduced motion.
+
+## Unsupported Absolutes
+
+These values produced one legible reference page. They are not proven for long-form reading, data-dense UI, or light-mode contexts.
+
+## Verification Contract
+
+A page using this direction passes `node scripts/check-showcase.mjs`. Check `--paper-dim` body text against the actual ground in its screenshots; over bright aurora areas it may need a darkening gradient layer, as the reference hero uses.
+
+## Source, License, And Attribution
+
+Locally authored direction. Font families are Google Fonts under the SIL Open Font License; no upstream prose or code is reproduced.
+
+## IA Navigation
+
+Parent: [Expression](../index.md).
+Next: [Warm Print Direction](warm-print.md).

package/expression/directions/warm-print.md

@@ -0,0 +1,73 @@
+---
+type: Domain Guide
+title: Warm Print Direction
+description: A light, warm, print-inspired direction with concrete type, color, texture, and motion-density values.
+domain: expression
+lifecycle: experimental
+provenance_kind: local
+---
+
+# Warm Print Direction
+
+Primary role: named art direction with starting values.
+
+## Repository Boundary
+
+These values are a starting point for product pages in `showcase/` or a consumer's own CSS. They are not tokens, defaults, or Layout inputs.
+
+## Reusable Method
+
+Mood: a well-made independent magazine. Off-white paper, heavy grotesk display, ink-black text, one saturated spot color, visible grid lines, halftone texture.
+
+```css
+:root {
+  --paper: #f4efe6;
+  --paper-2: #ebe4d6;          /* inset panels */
+  --ink: #141210;
+  --ink-dim: rgb(20 18 16 / 0.64);
+  --rule: rgb(20 18 16 / 0.18);
+  --spot: #1f4bff;             /* one spot color, used sparingly */
+  --spot-2: #ff4a1c;           /* optional second spot, never beside the first */
+  --grotesk: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
+  --text: "Newsreader", Georgia, serif;
+  --mono: "IBM Plex Mono", ui-monospace, monospace;
+  --gutter: clamp(1rem, 3vw, 2.5rem);
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+}
+```
+
+| Role | Value |
+| --- | --- |
+| Hero display | `--grotesk` 800, `clamp(2.8rem, 1.4rem + 5vw, 7rem)`, tracking -0.03em, line height 1.0, uppercase optional. Measured editorial and creative homepages top out at a median 88px ([Display Type Calibration](../techniques/display-type-calibration.md)) |
+| Section display | `--grotesk` 700, `clamp(2rem, 1.2rem + 2.8vw, 3.8rem)`, tracking -0.025em |
+| Body | `--text` 400, 1.125rem, line height 1.6, max 34rem measure |
+| Labels | `--mono` 0.72rem, uppercase, tracking 0.1em, preceded by a `--rule` hairline |
+| Grid | Visible 1px `--rule` column lines on a 12-column grid at 64rem and wider |
+| Surfaces | Flat `--paper-2`, no shadows, no radius or at most 0.25rem |
+| Images | One picture or drawn plate per spread and at least one per screen ([Image Weight](../techniques/image-weight.md)), duotone via `mix-blend-mode: multiply` over `--spot`, or grayscale plus [halftone](../techniques/grain-and-texture.md#halftone) |
+| Motion density | Few entrances, crisp: 0.6-0.8s, `--ease-out`, line-by-line reveals, one horizontal marquee of headlines, and underline or color responses on every link and card at 150-250ms |
+
+## Opinionated Guidance
+
+Light editorial pages die from timidity, but the cure is pictures and a strict grid, not size. Give every spread an image, let one headline break the grid, and keep everything else strictly on it.
+
+## Platform-Specific Guidance
+
+Multiply blending needs an opaque ancestor background to blend against; set `--paper` on the section, not only on `body`, or the effect disappears inside isolated stacking contexts.
+
+## Unsupported Absolutes
+
+No reference build exists yet for this direction; its values are proposals until a showcase work uses them and passes review.
+
+## Verification Contract
+
+A page using this direction passes `node scripts/check-showcase.mjs`. Check `--ink-dim` text contrast on `--paper-2` panels and confirm the grid lines disappear below 64rem.
+
+## Source, License, And Attribution
+
+Locally authored direction. Font families are Google Fonts under the SIL Open Font License; no upstream prose or code is reproduced.
+
+## IA Navigation
+
+Parent: [Expression](../index.md).
+Next: [Gradient Atmosphere](../techniques/gradient-atmosphere.md).

package/expression/index.md

@@ -0,0 +1,52 @@
+# Expression
+
+The Expression domain owns art direction for finished product pages: type pairing, palette, gradient and texture, WebGL atmosphere, copy register, and the density of expressive moments.
+
+## Scope Boundary
+
+In scope: art-direction briefs, named directions with concrete starting values, visual technique recipes with copy-ready code, and the policy for unofficial brand studies.
+
+Out of scope: layout mechanics and scroll ownership (Layout), timing, interruption, and motion review (Motion), component state contracts (Design Engineering), shared token schemas (consumer reference), and any decorative value inside reusable Layout pattern CSS.
+
+## Start Here
+
+| Task | Route |
+| --- | --- |
+| Decide what a page should feel like before building it. | [Expression Direction Brief](direction-brief.md) |
+| Start from a complete dark editorial system. | [Nocturne Editorial Direction](directions/nocturne-editorial.md) |
+| Start from a complete light, warm, print-like system. | [Warm Print Direction](directions/warm-print.md) |
+| Add glowing, drifting color behind content. | [Gradient Atmosphere](techniques/gradient-atmosphere.md) |
+| Add film grain, noise, or paper texture. | [Grain And Texture](techniques/grain-and-texture.md) |
+| Put a live WebGL field behind a hero. | [WebGL Hero Field](techniques/webgl-hero.md) |
+| Style a money product: one accent, big numerals, a working calculator. | [Fintech Clarity Direction](directions/fintech-clarity.md) |
+| Present physical products or vehicles one stage at a time. | [Hardware Catalogue Direction](directions/hardware-catalogue.md) |
+| Style a software tool in dark or light, with mono labels and a working mock. | [Developer Tool Direction](directions/developer-tool.md) |
+| Style a Korean service or commerce page with Pretendard and dense grids. | [Korean Service Direction](directions/korean-service.md) |
+| Make an intentionally vector product diagram, not a substitute for photography. | [Drawn Products](techniques/drawn-products.md) |
+| Add a small working product demo that answers honestly. | [Live Product Demos](techniques/live-product-demos.md) |
+| Put a pointer-reactive 3D object field on a page without WebGL. | [Canvas 3D Without WebGL](techniques/canvas-3d.md) |
+| Check a page against measured values from 49 live homepages, and see why the studies read as less expressive. | [Measured Expression Benchmarks](measured-benchmarks.md) |
+| Reuse existing assets, frame imagery, and restrict new assets to graphics/vectors. | [Image Weight](techniques/image-weight.md) |
+| Calibrate display size, weight, tracking, and leading so type reads confident, not loud. | [Display Type Calibration](techniques/display-type-calibration.md) |
+| Add the finishing detail of edge-fade masks, rounded clips, wipes, blur-in, and hairlines. | [Masks, Clips, And Hairlines](techniques/surface-detail.md) |
+| Find a finished brand study to learn from, and the lessons 54 studies taught. | [Study Atlas](study-atlas.md) |
+| Reinterpret a real brand as an unofficial study. | [Brand Studies](brand-studies.md) |
+
+Build the result in [Showcase](../showcase/README.md) and add motion from [Motion techniques](../motion/techniques/scroll-choreography.md).
+
+## How Expression Relates To Other Domains
+
+- Layout is the floor. An Expression direction never changes a Layout pattern; a page composes patterns and adds expression in its own product CSS.
+- Motion owns how things move. Expression names the motion density a direction wants, and Motion techniques implement it.
+- Design Engineering reference profiles are governed token fixtures. Expression directions are starting points for product work and are not validated tokens.
+
+These pages are experimental. Their values are proposals chosen for a mood, not measured outcomes. Review a direction when a showcase work built on it fails its outcome checks or reads poorly in its screenshots.
+
+## Domain Contract
+
+See [StyleGallery Domains](../DOMAINS.md) for lifecycle, provenance, page membership, and staleness rules.
+
+## IA Navigation
+
+Parent: [StyleGallery](../index.md).
+Next: [Expression Direction Brief](direction-brief.md).