stylegallery 0.1.7 → 0.1.8

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. 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.
+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 the rest from the source and screenshots: no copied logos, artwork, or verbatim copy.
+
+## 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,71 @@
+---
+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, WebGL, photography, illustration, or none
+motion_density: # entrance sequence count, scroll scenes, ambient loops
+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
+
+- 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.
+- 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.
+
+## 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 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`.
+
+## 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,80 @@
+---
+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(3.1rem, 11.5vw, 11rem)`, tracking -0.035em, line height 0.9, `text-wrap: balance` |
+| Section display | `--serif` 400, `clamp(2.6rem, 7vw, 7rem)`, tracking -0.03em, line height 0.95 |
+| 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) |
+| Motion density | One entrance sequence, three to four scroll scenes, one ambient loop. Easing `expo.out`, entrances 1.1-1.3s, 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 display type carry the contrast.
+
+## 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(3rem, 12vw, 12.5rem)`, tracking -0.05em, line height 0.85, uppercase optional |
+| Section display | `--grotesk` 700, `clamp(2.2rem, 6vw, 6rem)`, tracking -0.04em |
+| 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 | 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 |
+
+## Opinionated Guidance
+
+Light editorial pages die from timidity. Make the display type uncomfortably big, 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,40 @@
+# 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) |
+| 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).

package/expression/techniques/gradient-atmosphere.md

@@ -0,0 +1,107 @@
+---
+type: Domain Recipe
+title: Gradient Atmosphere
+description: Copy-ready blurred gradient fields, card glows, and gradient text for expressive product pages.
+domain: expression
+lifecycle: experimental
+provenance_kind: local
+---
+
+# Gradient Atmosphere
+
+Primary role: visual technique recipe.
+
+## Repository Boundary
+
+Product-layer CSS for `showcase/` works and consumer pages. Never add these declarations to reusable Layout pattern CSS.
+
+## Reusable Method
+
+### Aurora Field
+
+Three large radial gradients, blurred together and slowly drifting behind a section.
+
+```html
+<section class="hero">
+  <div class="aurora" aria-hidden="true"><span></span><span></span><span></span></div>
+  <!-- content -->
+</section>
+```
+
+```css
+.hero { isolation: isolate; overflow: clip; position: relative; }
+.aurora { filter: blur(70px) saturate(140%); inset: 0; opacity: 0.55; position: absolute; z-index: -2; }
+.aurora span { animation: drift 18s ease-in-out infinite alternate; border-radius: 50%; position: absolute; }
+.aurora span:nth-child(1) { background: radial-gradient(circle, #ff5a36, transparent 65%); block-size: 60vmax; inline-size: 60vmax; inset-block-start: -20vmax; inset-inline-end: -15vmax; }
+.aurora span:nth-child(2) { animation-duration: 24s; background: radial-gradient(circle, #7b5cff, transparent 65%); block-size: 55vmax; inline-size: 55vmax; inset-block-end: -25vmax; inset-inline-start: -10vmax; }
+.aurora span:nth-child(3) { animation-duration: 30s; background: radial-gradient(circle, #1f6fff, transparent 60%); block-size: 35vmax; inline-size: 35vmax; inset-block-start: 30%; inset-inline-start: 40%; }
+@keyframes drift { to { transform: translate3d(-6vmax, 4vmax, 0) scale(1.15); } }
+@media (prefers-reduced-motion: reduce) { .aurora span { animation: none; } }
+```
+
+`overflow: clip` on the section keeps the oversized blobs from widening the document; without it the page scrolls sideways at 320px.
+
+### Legibility Scrim
+
+When copy sits over the field, add a gradient between the atmosphere and the copy instead of dimming the atmosphere everywhere.
+
+```css
+.hero::after {
+  background: linear-gradient(to top, rgb(7 7 10 / 0.7), transparent 55%), linear-gradient(to right, rgb(7 7 10 / 0.55), transparent 60%);
+  content: ""; inset: 0; pointer-events: none; position: absolute; z-index: -1;
+}
+```
+
+### Card Glow
+
+Two corner radial gradients per card, colored by custom properties set on the card, so each card gets its own light without new classes.
+
+```css
+.card {
+  background:
+    radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--hue-a) 55%, transparent), transparent 60%),
+    radial-gradient(90% 80% at 0% 100%, color-mix(in oklab, var(--hue-b) 45%, transparent), transparent 60%),
+    #111118;
+}
+```
+
+```html
+<li class="card" style="--hue-a:#ff5a36; --hue-b:#7b5cff">...</li>
+```
+
+### Gradient Text
+
+```css
+.accent {
+  background: linear-gradient(100deg, #ff5a36, #ffb454 40%, #7b5cff);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  padding-inline-end: 0.06em; /* keeps italic overhang from being clipped */
+}
+```
+
+## Opinionated Guidance
+
+One atmosphere per viewport. An aurora behind the hero plus glowing cards plus gradient text in the same view reads as noise; stagger them down the page.
+
+## Platform-Specific Guidance
+
+`filter: blur()` on large layers costs GPU memory. Blur the container once, not each blob, and keep blob sizes in `vmax` so the effect scales without re-rasterizing at many sizes. `color-mix()` needs a current engine; provide a plain `rgb()` fallback if you target older browsers.
+
+## Unsupported Absolutes
+
+Blur radius, opacity, and drift duration here were tuned for one dark page. Light grounds need lower opacity and usually no `saturate()`.
+
+## Verification Contract
+
+In the showcase check, the page has no horizontal overflow at 320px, and under reduced motion no infinite drift animation is running. Review the screenshots for text contrast over the brightest part of the field.
+
+## Source, License, And Attribution
+
+Locally authored recipe. No upstream source.
+
+## IA Navigation
+
+Parent: [Expression](../index.md).
+Next: [Grain And Texture](grain-and-texture.md).