stylegallery 0.1.6 → 0.1.8

package/design-terminology/token-semantics.md

@@ -0,0 +1,90 @@
+---
+type: Domain Guide
+title: Token Semantics And Resolution
+description: Compare semantic roles, references, groups, resolver contexts, and runtime values without treating their names as interchangeable.
+domain: design-terminology
+lifecycle: experimental
+provenance_kind: local
+reviewed_on: 2026-09-21
+---
+
+# Token Semantics And Resolution
+
+Primary role: source-specific token terminology comparison.
+
+## Repository Boundary
+
+This page compares vocabulary and the decisions obscured by ambiguous token names. It imports no token values, themes, or compiler behavior. [Consumer Reference](../consumer-reference/index.md) owns interchange/evidence infrastructure; consumer profiles own their values and implementation. Layout's token boundary remains unchanged.
+
+Canonical term and relation records live in [Cross-System Term Cases](conflict-cases.md). This guide explains their use; it does not establish a second term registry.
+
+## Reusable Method
+
+When a handoff says “alias,” “semantic,” or “theme,” identify whether it refers to design intent, a reference edge, organization, context selection, or a runtime representation. Record the named source before choosing an equivalence relation. Inspect the exported structure separately from the visual result.
+
+### Sources And Distinctions
+
+| Source | Source-backed distinction | Question for a handoff |
+| --- | --- | --- |
+| [Fluent 2 tokens](https://fluent2.microsoft.design/design-tokens) | Global tokens hold context-independent values; alias tokens add semantic meaning. | Does “alias” name a semantic layer in this system? |
+| [DTCG Format 2025.10](https://www.designtokens.org/tr/2025.10/format/) | A token value may reference another token; groups organize records. | Does “alias” name a reference relationship in an interchange document? |
+| [Carbon color overview](https://carbondesignsystem.com/elements/color/overview/) | Color tokens preserve roles across themes while assigned values can change. | Is the role stable across every theme being compared? |
+| [Carbon color usage](https://carbondesignsystem.com/elements/color/usage/) | Contextual color tokens depend on the layer where they are used. | Is the surrounding layer part of value resolution? |
+| [DTCG Resolver 2025.10](https://www.designtokens.org/tr/2025.10/resolver/) | Modifiers conditionally select sources through contexts; ordered resolution determines the resulting token set. | Where are the selected contexts and conflict order recorded? |
+| [CSS Custom Properties Level 1](https://www.w3.org/TR/css-variables-1/) | Custom properties participate in CSS runtime value substitution and the cascade. | Which original semantics and metadata remain after translation? |
+
+All six source surfaces were inspected on 2026-09-21. DTCG 2025.10 modules are Community Group reports, not W3C Recommendations. The Fluent and Carbon pages are dated system documentation, not guarantees about every package release.
+
+### Alias Is Not One Decision
+
+The recorded `fluent.alias-token` / `dtcg.alias` relation is `partial_overlap`. A semantic token may use a reference, but a reference edge does not itself prove a semantic role. A reference between two raw values illustrates the non-semantic region; a consumer's exported semantic value may be flattened and no longer retain its reference edge.
+
+The `fluent.alias-token` / `carbon.color-token` relation is also scoped overlap. Both can express role-oriented color decisions, but their vocabularies and non-color coverage differ. This is not permission to rename one system's tokens after another's or assert that their role sets are identical.
+
+### Grouping Is Not Context Selection
+
+The recorded `dtcg.resolver-modifier` / `dtcg.group` relation is `not_comparable` for organization-versus-resolution. Ask where a context is selected, where sources are ordered, and where a group is merely a path. A directory or group named `dark` does not independently explain how a consumer chooses dark appearance.
+
+This distinction also prevents confusing a token system's theme with a user's complete preference state. A selected theme does not determine text scaling, reduced motion, or every platform accessibility preference; those adaptation decisions belong to [Platform Guides](../platform-guides/preferences-and-accessibility.md).
+
+### Worked Handoff: Same Color, Different Meaning
+
+Two consumer roles happen to resolve to the same displayed color in one theme. Preserve the roles separately when their purposes differ. Equality of an output value is evidence of that output only; it does not justify merging source concepts.
+
+| Handoff field | Proposed content | Why it matters |
+| --- | --- | --- |
+| Source term | Source-qualified identifier and locator | Keeps a role name attached to its own vocabulary. |
+| Comparison scope | The particular translation being considered | Prevents a local mapping from becoming universal equivalence. |
+| Context | Theme, layer, or resolver inputs actually selected | Makes value resolution reproducible. |
+| Output representation | Target format and adapter version | Separates serialization from semantic intent. |
+| Retained/lost information | Role, reference edges, metadata, and unsupported structures | Exposes lossy translation. |
+| Verification | Structural check plus rendered state evidence if appearance is claimed | Avoids treating a valid file as a usable component. |
+
+The fields are a local analysis aid. They do not expand this repository's closed token adapter or admit arbitrary DTCG features into existing schemas.
+
+## Opinionated Guidance
+
+Prefer source-qualified names in cross-system discussions. Before merging tokens, compare responsibilities across contexts, not just matching values in a screenshot. Keep compiler inputs explicit enough that another consumer can explain how an output was obtained.
+
+## Platform-Specific Guidance
+
+An exported custom property, native resource, or tool variable can consume translated design information without preserving the full source contract. The concrete adapter owns unit conversion, missing features, and runtime context. Comparative vocabulary cannot certify that adapter.
+
+## Unsupported Absolutes
+
+A reference is not proof of semantic intent. A group is not automatically a theme selector. The same value is not the same role. A valid DTCG document is not a declaration that StyleGallery supports every feature in that document.
+
+## Verification Contract
+
+Recheck both source locators for each relied-on relation and record the scope and direction. Probe a matching value with different roles, a changed theme, a contextual layer change, and a flattened export. Inspect the actual adapter if making a round-trip or runtime claim.
+
+These are proposed checks. Only source readings and Markdown record consistency are claimed here; no token pipeline or product rendering was executed. Re-review when a vocabulary, module version, or adapter contract changes.
+
+## Source, License, And Attribution
+
+Locally authored synthesis; no source token values or upstream expression are copied. Terminology reliance: `fluent.alias-token`, `fluent.global-token`, `carbon.color-token`, `dtcg.alias`, `dtcg.token`, `dtcg.group`, `dtcg.resolver-modifier`, and `css.custom-property`. Relations used: `partial_overlap`, `implementation_representation`, and `not_comparable`. Named sources were rechecked 2026-09-21; local relations remain author judgments, not independent semantic approval. `consumer_reference: not_applicable` because no consumer profile or adapter record is selected.
+
+## IA Navigation
+
+Parent: [Design Terminology](index.md).
+Next: [Typography Semantics](typography-semantics.md).

package/design-terminology/typography-semantics.md

@@ -0,0 +1,86 @@
+---
+type: Domain Guide
+title: Typography Roles, Styles, And Representations
+description: Compare named type roles, native scaling behavior, composite token records, and CSS output without inventing universal size mappings.
+domain: design-terminology
+lifecycle: experimental
+provenance_kind: local
+reviewed_on: 2026-09-21
+---
+
+# Typography Roles, Styles, And Representations
+
+Primary role: typography vocabulary comparison.
+
+## Repository Boundary
+
+This guide compares source-specific meanings. It defines no StyleGallery type scale, font choice, size, density, or visual token. Product typography belongs to its consumer; Layout owns spatial behavior. [Term Cases](conflict-cases.md) is the canonical record for the term identifiers and relations used here.
+
+## Reusable Method
+
+Identify whether “style” means a semantic role, a bundle of values, a collection of role slots, a native scaling behavior, or a runtime declaration. Compare sources at that level. Then record what information is lost when the result is serialized or rendered elsewhere.
+
+### Source Findings
+
+| Source | Bounded meaning | Boundary to retain |
+| --- | --- | --- |
+| [Apple HIG typography](https://developer.apple.com/design/human-interface-guidelines/typography) | Text styles combine typographic attributes into a hierarchy and participate in system text-size adaptation. | A single exported size does not encode the complete native scaling behavior. |
+| [Fluent 2 typography](https://fluent2.microsoft.design/typography) | The type ramp supplies named styles and roles for a selected target platform. | A role label does not specify one universal font or numeric size across platforms. |
+| [Material 3 in Compose](https://developer.android.com/develop/ui/compose/designsystems/material3#typography) | The `Typography` class models the Material 3 type scale using named style slots. | This is the system's Compose implementation surface, not an interchange specification. |
+| [DTCG typography type](https://www.designtokens.org/tr/2025.10/format/#typography) | The composite record includes family, size, weight, letter spacing, and line height. | The record does not itself implement platform text scaling. |
+| [CSS font shorthand](https://www.w3.org/TR/css-fonts-4/#font-prop) | `font` is a runtime shorthand over defined font properties and line height. | It does not encode every typographic property or the original role metadata. |
+
+Read on 2026-09-21. Apple content was inspected through the official documentation JSON. Material and Fluent references are dated product documentation. DTCG Format 2025.10 is a Community Group report; CSS Fonts Level 4 is a standards-track publication. Actual font availability and rendering require target evidence.
+
+### Comparing A Style With A Record
+
+`apple.text-style` and `dtcg.typography` have `partial_overlap` for exchanging typographic attributes. Some attributes can be represented in both. Apple's style is also connected to native text-size behavior, while an interchange record can describe styles outside Apple's system. An exporter must explain the scope of a match.
+
+`css.font` → `dtcg.typography` is an `implementation_representation` relation scoped to partial typography output. A consumer must emit additional properties such as letter spacing separately when needed and retain provenance outside the shorthand. This relation does not promise a reversible conversion.
+
+### Comparing Role Collections
+
+`material3.typography` and `fluent.type-ramp` have `partial_overlap` for named typography roles. Both help organize hierarchy, but the role inventories, defaults, and implementation surfaces differ. Matching two names containing “body” does not prove equivalent intended use or visual results.
+
+A collection of styles and one style are different abstraction levels. Before declaring `broader_than`, demonstrate proper set containment with comparable instances; a class that contains fields is not automatically a broader semantic concept than those fields.
+
+### Worked Handoff: Dense Review Surface
+
+A consumer wants more records visible while retaining readable annotations and controls. Separate the density decision from typography translation. Density might change spacing, optional detail, or command presentation; it need not mean scaling every font down.
+
+| Decision | Evidence to request | Translation failure |
+| --- | --- | --- |
+| Role mapping | Task purpose and named source roles | Similar labels map headings to ordinary labels. |
+| Value representation | Output properties and units | A composite style loses a required property. |
+| Scaling | Target user setting and the resulting style behavior | A static export ignores larger-text settings. |
+| Font fallback | Actual fonts and representative scripts | A role looks acceptable only with a locally installed font. |
+| Reading hierarchy | Long and localized content on the target surface | Compact labels obscure the main task. |
+
+This is a proposed consumer investigation, not evidence that a particular type scale improves reading speed. For product adaptation, use [Preferences And Accessibility](../platform-guides/preferences-and-accessibility.md); for editing behavior, use [Text Input And Internationalization](../design-engineering/text-input-and-internationalization.md).
+
+## Opinionated Guidance
+
+Preserve semantic roles even when two styles currently share values. Judge a translation by the declared task, retained attributes, and target scaling behavior. Treat a visual match at one size as a narrow observation.
+
+## Platform-Specific Guidance
+
+Points, CSS pixels, and scale-aware native units must be interpreted by the selected runtime. Native text-style names do not become CSS breakpoints or shared Layout tokens. Font fallback and script shaping require actual rendering; a vocabulary comparison cannot establish them.
+
+## Unsupported Absolutes
+
+A type ramp is not a universal accessibility standard. A typography token is not a complete native text-style behavior. CSS `font` is not a lossless export of all typography information. More visible rows do not prove higher task efficiency.
+
+## Verification Contract
+
+Record source roles, relation scope, output representation, scaling inputs, and any omitted information. Probe default and enlarged text, missing fonts, long labels, multiple scripts, and the actual target's line metrics. Keep file validation separate from visual and user-task evidence.
+
+These probes are unexecuted. Source meaning was reviewed; runtime rendering and reading performance were not measured. Re-review when role definitions, format versions, platform scaling, or adapter behavior changes.
+
+## Source, License, And Attribution
+
+Locally authored synthesis without imported type values or source examples. Terminology reliance: `apple.text-style`, `fluent.type-ramp`, `material3.typography`, `dtcg.typography`, and `css.font`; relation types: `partial_overlap` and `implementation_representation`. Named sources were rechecked 2026-09-21; this is author review, not independent semantic approval. `consumer_reference: not_applicable` because no consumer typography record is selected.
+
+## IA Navigation
+
+Parent: [Design Terminology](index.md).
+Next: [Token Semantics And Resolution](token-semantics.md).

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).