@tryvitris/website-harness 0.0.0-stage → 0.1.0-beta.5

package/design-system/MASTER.md

@@ -0,0 +1,76 @@
+# Vitris public site design system
+
+Each site owns its art direction: typography, spacing, composition, imagery, surface treatment, and motion. Derive these from the business brief and selected theme in onboarding/direction.json. Kernel primitives are implementation defaults, not a house style.
+
+Operator knowledge: `agent/refs/*`, the compatible teaching collection at `design-system/knowledge/v1`, sourced requirements at `design-system/knowledge/v2`, and the opt-in composition teaching release at `design-system/knowledge/v3`. The block library at `blocks/` remains an optional implementation source. Composition lessons are advisory design hypotheses; applicable v2 requirements retain their separate authority. The calibration pack contains inspected references, not a preference model.
+
+Each site authors its own `components/` and `pages/*.html`. In `composition-v1`, design the relationships among the site's actual content elements, then implement site-owned markup and styles. In `blocks-v0`, the compatible block selection method remains available. The kernel compiles source to flat HTML/CSS/JS; it does **not** ship a runtime section catalog.
+
+## Contrast
+
+| Pair | Minimum |
+|------|---------|
+| `--color-text` on `--color-bg` | 4.5:1 |
+| `--color-muted` on `--color-bg` | 4.5:1 for body-length text |
+| `--color-accent-text` on `--color-accent` | 4.5:1 |
+| Focus ring (`--color-focus`) | Visible against background |
+
+Give color roles a clear purpose. Preserve readable contrast and identifiable actions within the selected direction.
+
+## Tokens
+
+- Colors: bg, surface, surface-2, text, muted, accent, accent-text, border, focus
+- Type: `--step-0` … `--step-5` (`clamp`), `--font-body`, `--font-display`
+- Space: `--space-1` … `--space-8`, `--section-y`
+- Layout: `--max-width`, `--radius`, `--radius-lg`, `--radius-pill`, `--tap-min`, `--header-h`
+- Elevation: `--shadow-1/2/3`, `--ring`, `--blur-header`
+
+**Radius:** choose geometry for the direction. Pill buttons and rounded cards are available defaults, not requirements.
+
+## Primitives
+
+Kernel `site.css` ships layout/surface helpers: `.section`, `.section__head`, `.grid`, `.split`, `.bento`, `.card`, `.badge`, `.stat`, `.avatar`, `.accordion`, `.tabs`, `.header--sticky`, `.nav-drawer`, form fields, ratios. Use these where they support the planned composition; site-owned CSS may replace them.
+
+Local dark bands: `.section--dark` remaps tokens inside that section only.
+
+## Type & focus
+
+- Headings may use `text-wrap: pretty` or `balance`; choose hero scale and body measure from actual language, hierarchy, and available width
+- Visible `:focus-visible` rings; never `outline: none` without a replacement
+- Forms: visible labels, correct `type` / `autocomplete`, no placeholder-only inputs
+- Nav: logo → `/`. Let verified routes and visitor tasks determine labels, grouping, and action placement.
+
+## Layout
+
+Use the storyboard to give each section a narrative purpose and appropriate visual emphasis. Evaluate rhythm in the rendered page; a fixed quota of layouts or images does not establish quality. Adapt breakpoints to content.
+
+## Motifs
+
+Choose motifs that support the business and recur coherently. Preserve conventional, usable controls. Avoid distracting motion and interactions that hide essential content.
+
+Judge originality by business fit and thoughtful composition, not the number of unconventional sections.
+
+## Scroll reveal and deliberate motion
+
+Operator-owned in `site.json` (`motion`) and per-instance attributes (`motion="whisper"`). Presets: `off` | `whisper` | `editorial` | `noticeable`. Header / footer / hero default `off`. Honor `prefers-reduced-motion`. New behavior opts in with `scrollMotion: {version:1, policy:"enabled"}` and explicit native/component `data-motion` targets; `policy:"off"` disables all motion. Legacy strength off remains a default with per-instance precedence. Use stage-scoped `agent/refs/motion.md`, business-specific scenes and quiet intervals. Review temporal behavior in normal/reduced/static modes; avoid whole-page reveals.
+
+New authored sites and reauthored routes compose the entire temporal journey with motionPlan v2. Every authored page has located opening/development/closing relationships, connected quiet intervals and immediate reading/actions; contact and short pages use appropriate subtle treatments. New scaffold policy enables explicit targets and requires all authored route coverage. Historical configurations remain unchanged by upgrade. Load stage-scoped motion-page guidance and review complete normal desktop/mobile journeys plus reduced/static readability; two effects in one section or an explained calm brand is insufficient. Numeric counts require supplied facts and canonical accessible final text. Agent judgments and human preference remain separate.
+
+## Components & pages
+
+- Source: `pages/**/*.html` + `components/<name>/{template.html,styles.css,island.js?}`
+- Authoring tags flatten at build; `variant` / `id` pass through to the root
+- Kernel islands via `data-island="header|carousel|tabs|before-after|counter|lightbox"`
+- One `h1` per page; skip link + `<main id="main">` from the compiler
+- Lead forms: `data-lead-form` → kernel `/api/leads`
+- Cookie page: kernel-owned `/cookie-compliance` — link from footer
+
+## Copy & images
+
+- `agent/refs/copy.md` / `agent/refs/media.md`. Use edited, supported claims and the complete media inventory. Choose assets by meaning and quality.
+
+## Performance
+
+Used-component CSS only, islands only when needed. Give the actual LCP image priority when there is one; lazy-load images outside the initial view. Avoid `transition: all`.
+
+New builds use original Vitris SVG icons through paired `<vitris-icon name="phone"></vitris-icon>` tags. Read `agent/refs/icons.md`; use `vitris-icons inspect NAME --json` for supported families and sizing. Choose by meaning, keep a coherent family and visible service labels, and verify actual desktop/mobile rendering. The compiler emits only the geometry used by each route, with no client catalog. Studio industry support is curated to eight symbols; never synthesize unavailable variants.

package/design-system/calibration/v2/accuracy.html

@@ -0,0 +1 @@
+<!doctype html><html><meta charset="utf-8"><style>body{margin:0;background:#f3efe5;color:#21312f;font:20px Georgia;padding:70px}small{font:16px Arial}h1{font-size:64px;max-width:12ch}p{max-width:42ch;line-height:1.6}a{display:inline-block;padding:16px;background:#21312f;color:white}</style><small>VITRIS · ORIGINAL FICTIONAL CALIBRATION</small><h1>Trusted legal help</h1><p>A synthetic reading test. This example supplies no customer facts, awards, ratings, or photographs.</p><a href="#details">Read the approach</a><h2 id="details">Clear decisions, considered advice.</h2></html>

package/design-system/calibration/v2/manifest.json

@@ -0,0 +1,88 @@
+{
+  "schemaVersion": 1,
+  "packVersion": "v2",
+  "purpose": "Original Vitris calibration examples for public redistribution under MIT. No third-party captures.",
+  "labeledCalibration": false,
+  "probe": {
+    "file": "probe.png",
+    "expectedToken": "2E6BFF",
+    "instruction": "Report the sRGB hex of the solid fill, without #."
+  },
+  "accuracyProbe": {
+    "file": "accuracy.png",
+    "expectedPhrase": "Trusted legal help",
+    "sourceUrl": "vitris:original-reading-probe"
+  },
+  "records": [
+    {
+      "name": "probe",
+      "role": "probe",
+      "file": "probe.png",
+      "sha256": "604789a72fd8f4b1bf930341db1f7b7b2b7ec56981c43524d2736e38f66bd9a3",
+      "notes": "Solid sRGB fill used as a visual capability token; not a design reference."
+    },
+    {
+      "name": "vitris-northline-counsel-home",
+      "role": "mobile-first-view",
+      "file": "vitris-northline-counsel-home-375-viewport.png",
+      "sha256": "c4ef72c7b99517c42b8822060b4b6b1b91239ba5965517ef5a0648f08fa4d922",
+      "notes": "Original fictional Vitris composition, production-compiled and cropped from the exact local capture. All business claims are teaching fiction."
+    },
+    {
+      "name": "vitris-northline-counsel-home",
+      "role": "desktop-first-view",
+      "file": "vitris-northline-counsel-home-1280-viewport.png",
+      "sha256": "0e1a0fdc5ccc9dd419525d69fea912ea51c74fcc8a19ed5c5f56e098afa62ad4",
+      "notes": "Original fictional Vitris composition, production-compiled and cropped from the exact local capture. All business claims are teaching fiction."
+    },
+    {
+      "name": "vitris-northline-counsel-planning",
+      "role": "mobile-first-view",
+      "file": "vitris-northline-counsel-planning-375-viewport.png",
+      "sha256": "2abfd50f2986ee44e1b8145a40640b4ad42af01605a11c8c44144cb93a3841b5",
+      "notes": "Original fictional Vitris composition, production-compiled and cropped from the exact local capture. All business claims are teaching fiction."
+    },
+    {
+      "name": "vitris-northline-counsel-planning",
+      "role": "desktop-first-view",
+      "file": "vitris-northline-counsel-planning-1280-viewport.png",
+      "sha256": "d77214942982edd1cf6a7156ec9b1eac1fd6815aa6f7e4c4954e3dc3e31311fa",
+      "notes": "Original fictional Vitris composition, production-compiled and cropped from the exact local capture. All business claims are teaching fiction."
+    },
+    {
+      "name": "vitris-tide-and-slate-home",
+      "role": "mobile-first-view",
+      "file": "vitris-tide-and-slate-home-375-viewport.png",
+      "sha256": "cdebe569f7414a78e8ecd72417b62e6912c50c2cb8b97865909de19b54a7776a",
+      "notes": "Original fictional Vitris composition, production-compiled and cropped from the exact local capture. All business claims are teaching fiction."
+    },
+    {
+      "name": "vitris-tide-and-slate-home",
+      "role": "desktop-first-view",
+      "file": "vitris-tide-and-slate-home-1280-viewport.png",
+      "sha256": "ee8c553e7e549e52fdd42e97b0733321729b12d53974568a769c391dbe3d5987",
+      "notes": "Original fictional Vitris composition, production-compiled and cropped from the exact local capture. All business claims are teaching fiction."
+    },
+    {
+      "name": "vitris-tide-and-slate-project",
+      "role": "mobile-first-view",
+      "file": "vitris-tide-and-slate-project-375-viewport.png",
+      "sha256": "e55b83b3f4d87ee54220f433511a9bbf3a7381c566f388ca9c40cbcd1ef7689d",
+      "notes": "Original fictional Vitris composition, production-compiled and cropped from the exact local capture. All business claims are teaching fiction."
+    },
+    {
+      "name": "vitris-tide-and-slate-project",
+      "role": "desktop-first-view",
+      "file": "vitris-tide-and-slate-project-1280-viewport.png",
+      "sha256": "6158501e6ebaa0847dc996743eb1f87d2a1c09b22c89c04507ebaa8a755163d5",
+      "notes": "Original fictional Vitris composition, production-compiled and cropped from the exact local capture. All business claims are teaching fiction."
+    },
+    {
+      "name": "vitris-reading-probe",
+      "role": "desktop-first-view",
+      "file": "accuracy.png",
+      "sha256": "052b46aaef7febbaccfb2dc1e69bda74aba0170909dea0ce984fdd801a7facbb",
+      "notes": "Original synthetic Vitris reading capability test, MIT. No third-party imagery."
+    }
+  ]
+}

package/design-system/compositions/v1/README.md

@@ -0,0 +1,13 @@
+# Composition teaching examples v1
+
+These are original, fictional, site-compatible examples. Each folder contains `site.json`, `theme/defaults.json`, `pages/`, `components/`, and any local media. Build with:
+
+```powershell
+node --experimental-strip-types src/build/cli.ts --site design-system/compositions/v1/tide-and-slate --out scratch/design-composition-previews/tide-and-slate --slug tide-and-slate
+node --experimental-strip-types src/build/cli.ts --site design-system/compositions/v1/northline-counsel --out scratch/design-composition-previews/northline-counsel --slug northline-counsel
+node --experimental-strip-types scripts/capture-composition-pairs.ts
+```
+
+The examples teach relationships among opening, evidence, practical information, and action. They are not required section stacks or sources of customer facts. All business names, contact details, projects, and service claims are fictional. The Tide & Slate images are synthetic teaching assets with individual provenance files; never add them automatically to a customer media inventory.
+
+The local capture manifest lives at `scratch/design-composition-captures/manifest.json`. The 2026-09-22 captures cover each homepage and interior at 320px, 375px, 768px, 1280px, and 1440px and record compiled HTML and screenshot hashes. Automated axe scans had no violations, and no page had broken images or document-level horizontal overflow. The six new blocks also passed 72 normal, long-copy, and 200% text-size reflow cases after scoped overflow repairs. Manual keyboard, screen-reader, and content-rights review remain separate checks.

package/design-system/compositions/v1/northline-counsel/components/contact-phone-first/styles.css

@@ -0,0 +1,11 @@
+.c-contact-phone-first{background:var(--color-surface-2)}
+.c-contact-phone-first__layout{display:grid;gap:var(--space-7)}
+.c-contact-phone-first__lead{display:grid;gap:var(--space-4);align-content:start}
+.c-contact-phone-first__lead h2{max-width:16ch}
+.c-contact-phone-first__lead .lede{max-width:48ch}
+.c-contact-phone-first__details{display:grid;gap:var(--space-5);border-top:2px solid var(--color-accent);padding-top:var(--space-5)}
+.c-contact-phone-first__phone{display:grid;gap:var(--space-2)}
+.c-contact-phone-first__phone a{font-family:var(--font-display);font-size:clamp(1.7rem,1rem + 2.3vw,3rem);line-height:1.1;overflow-wrap:anywhere;text-decoration-thickness:.06em;text-underline-offset:.12em}
+.c-contact-phone-first__secondary{display:grid;gap:var(--space-3)}
+.c-contact-phone-first__secondary > *{margin:0}
+@media(min-width:850px){.c-contact-phone-first__layout{grid-template-columns:minmax(0,1fr) minmax(18rem,.85fr);gap:var(--space-8)}}

package/design-system/compositions/v1/northline-counsel/components/contact-phone-first/template.html

@@ -0,0 +1 @@
+<section class="c-contact-phone-first section"><div class="wrap c-contact-phone-first__layout"><div class="c-contact-phone-first__lead"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="intro"></slot></div><div class="c-contact-phone-first__details"><div class="c-contact-phone-first__phone"><slot name="phone"></slot></div><div class="c-contact-phone-first__secondary"><slot name="details"></slot></div></div></div></section>

package/design-system/compositions/v1/northline-counsel/components/contact-visit/styles.css

@@ -0,0 +1,13 @@
+.c-contact-visit{overflow-wrap:anywhere}
+.c-contact-visit__head{display:grid;gap:var(--space-3);margin-bottom:var(--space-6)}
+.c-contact-visit__head h2{max-width:18ch}
+.c-contact-visit__head p{max-width:56ch}
+.c-contact-visit__layout{display:grid;gap:var(--space-5)}
+.c-contact-visit__place{background:var(--color-surface-2);padding:var(--space-6);display:grid;align-content:end;min-height:18rem;min-width:0}
+.c-contact-visit__place address{font-style:normal;font-family:var(--font-display);font-size:var(--step-2);line-height:1.25}
+.c-contact-visit__practical{border-top:2px solid var(--color-accent);display:grid;gap:var(--space-4);align-content:start;padding-top:var(--space-4);min-width:0}
+.c-contact-visit .btn,.c-contact-visit .btn-outline{white-space:normal;text-align:center;max-width:100%}
+.c-contact-visit__practical > *{margin:0}
+.c-contact-visit__practical h3{font-size:var(--step-1)}
+.c-contact-visit__practical .btn,.c-contact-visit__practical .btn-outline{justify-self:start}
+@media(min-width:800px){.c-contact-visit__layout{grid-template-columns:minmax(0,1.1fr) minmax(17rem,.7fr);gap:var(--space-7)}}

package/design-system/compositions/v1/northline-counsel/components/contact-visit/template.html

@@ -0,0 +1 @@
+<section class="c-contact-visit section"><div class="wrap"><div class="c-contact-visit__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="intro"></slot></div><div class="c-contact-visit__layout"><div class="c-contact-visit__place"><slot name="place"></slot></div><div class="c-contact-visit__practical"><slot name="hours"></slot><slot name="access"></slot><slot name="actions"></slot></div></div></div></section>

package/design-system/compositions/v1/northline-counsel/components/footer-compact/styles.css

@@ -0,0 +1,12 @@
+.c-footer-compact{border-top:1px solid var(--color-border);font-size:var(--step-0);color:var(--color-muted)}
+.c-footer-compact a:not([class*="btn"]){color:var(--color-muted);text-decoration:none}
+.c-footer-compact a:not([class*="btn"]):hover{color:var(--color-text)}
+.c-footer-compact .brand{color:var(--color-text)}
+.c-footer-compact__legal{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:center;padding-block:var(--space-4);border-top:1px solid var(--color-border)}
+.c-footer-compact__legal > span{margin-inline-start:auto}
+.c-footer-compact__social{display:flex;gap:var(--space-2)}
+.c-footer-compact__social a{display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-pill);border:1px solid var(--color-border)}
+.c-footer-compact__social a:hover{border-color:var(--color-text)}
+.c-footer-compact__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-6)}
+.c-footer-compact__links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
+.c-footer-compact__links:empty{display:none}

package/design-system/compositions/v1/northline-counsel/components/footer-compact/template.html

@@ -0,0 +1 @@
+<footer class="c-footer-compact"><div class="wrap"><div class="c-footer-compact__row"><a class="brand" href="/"><slot name="brand"></slot></a><nav class="c-footer-compact__links" aria-label="Footer"><slot name="links"></slot></nav></div><div class="c-footer-compact__legal"><slot name="legal"></slot></div></div></footer>

package/design-system/compositions/v1/northline-counsel/components/hero-evidence/styles.css

@@ -0,0 +1,13 @@
+.c-hero-evidence{border-bottom:1px solid var(--color-border)}
+.c-hero-evidence{overflow-wrap:anywhere}
+.c-hero-evidence__layout{display:grid;gap:var(--space-7);align-items:end}
+.c-hero-evidence__main{display:grid;gap:var(--space-5);align-content:start;min-width:0}
+.c-hero-evidence__main h1{font-size:clamp(3rem,2rem + 4.2vw,6rem);line-height:1.02;max-width:15ch}
+.c-hero-evidence__main .lede{max-width:48ch}
+.c-hero-evidence__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
+.c-hero-evidence__actions .btn,.c-hero-evidence__actions .btn-outline{white-space:normal;text-align:center;max-width:100%}
+.c-hero-evidence__proof{border-top:2px solid var(--color-accent);padding-top:var(--space-4);display:grid;gap:var(--space-4)}
+.c-hero-evidence__proof > *{margin:0}
+.c-hero-evidence__proof ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
+.c-hero-evidence__proof li{padding-block:var(--space-2);border-bottom:1px solid var(--color-border)}
+@media(min-width:900px){.c-hero-evidence__layout{grid-template-columns:minmax(0,1.65fr) minmax(17rem,.7fr)}.c-hero-evidence__proof{margin-bottom:var(--space-2)}}

package/design-system/compositions/v1/northline-counsel/components/hero-evidence/template.html

@@ -0,0 +1 @@
+<section class="c-hero-evidence section section--roomy"><div class="wrap c-hero-evidence__layout"><div class="c-hero-evidence__main"><slot name="eyebrow"></slot><slot></slot><div class="c-hero-evidence__actions"><slot name="actions"></slot></div></div><aside class="c-hero-evidence__proof" aria-label="Supporting evidence"><slot name="proof"></slot></aside></div></section>

package/design-system/compositions/v1/northline-counsel/components/hero-page/styles.css

@@ -0,0 +1,19 @@
+.c-hero-page{padding-block:calc(var(--section-y) - var(--space-4)) var(--section-y)}
+.c-hero-page__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-bottom:var(--space-6);font-size:var(--step-0);color:var(--color-muted)}
+.c-hero-page__crumbs:empty{display:none}
+.c-hero-page__crumbs > * + *::before{content:"/";margin-right:var(--space-2);color:var(--color-border)}
+.c-hero-page__crumbs a{color:inherit;text-decoration:none}
+.c-hero-page__crumbs a:hover{color:var(--color-text)}
+.c-hero-page__crumbs [aria-current]{color:var(--color-text)}
+.c-hero-page__grid{display:grid;gap:var(--space-5)}
+.c-hero-page__title{display:grid;gap:var(--space-4)}
+.c-hero-page h1{max-width:16ch}
+.c-hero-page__intro{display:grid;gap:var(--space-5);align-self:end;justify-items:start}
+.c-hero-page__intro .lede{max-width:34rem}
+.c-hero-page__media{margin-top:var(--space-7)}
+.c-hero-page__media:empty{display:none}
+@media(min-width:900px){.c-hero-page__grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-8);align-items:end}.c-hero-page__intro{padding-bottom:.35rem}}
+.c-hero-page--center .c-hero-page__crumbs{justify-content:center}
+.c-hero-page--center .c-hero-page__grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--space-5)}
+.c-hero-page--center h1{max-width:20ch}
+.c-hero-page--center .c-hero-page__intro{justify-items:center;padding:0}

package/design-system/compositions/v1/northline-counsel/components/hero-page/template.html

@@ -0,0 +1 @@
+<section class="c-hero-page section"><div class="wrap"><nav class="c-hero-page__crumbs" aria-label="Breadcrumb"><slot name="breadcrumb"></slot></nav><div class="c-hero-page__grid"><div class="c-hero-page__title"><slot name="eyebrow"></slot><slot></slot></div><div class="c-hero-page__intro"><slot name="intro"></slot></div></div></div><div class="wrap c-hero-page__media"><slot name="media"></slot></div></section>

package/design-system/compositions/v1/northline-counsel/components/nav-split/styles.css

@@ -0,0 +1,11 @@
+.c-nav-split__inner{display:flex;align-items:center;gap:var(--space-5);min-height:var(--header-h)}
+.c-nav-split__links{display:none;margin-inline:auto}
+.c-nav-split__actions{display:flex;align-items:center;gap:var(--space-2);margin-inline-start:auto}
+.c-nav-split__cta{flex-wrap:nowrap}
+.c-nav-split__cta > :not(:first-child){display:none}
+.c-nav-split--static{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--color-bg)}
+@media(min-width:900px){
+  .c-nav-split__links{display:flex}
+  .c-nav-split__cta > :not(:first-child){display:inline-flex}
+  .c-nav-split__toggle{display:none}
+}

package/design-system/compositions/v1/northline-counsel/components/nav-split/template.html

@@ -0,0 +1,11 @@
+<header class="c-nav-split header--sticky" data-island="header">
+  <div class="wrap c-nav-split__inner">
+    <a class="brand" href="/"><slot name="brand"></slot></a>
+    <nav class="nav-links c-nav-split__links" aria-label="Primary"><slot name="links"></slot></nav>
+    <div class="c-nav-split__actions">
+      <div class="btn-group c-nav-split__cta"><slot name="actions"></slot></div>
+      <button type="button" class="btn-ghost btn-icon c-nav-split__toggle" data-nav-toggle aria-expanded="false" aria-label="Open menu"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
+    </div>
+  </div>
+  <div class="nav-drawer"><div class="nav-drawer__panel"><nav aria-label="Mobile"><slot name="links"></slot></nav><div class="btn-group"><slot name="actions"></slot></div></div></div>
+</header>

package/design-system/compositions/v1/northline-counsel/components/services-priority/styles.css

@@ -0,0 +1,16 @@
+.c-services-priority{overflow-wrap:anywhere}
+.c-services-priority__head{display:grid;gap:var(--space-4);margin-bottom:var(--space-7)}
+.c-services-priority__head h2{max-width:15ch}
+.c-services-priority__head > p{max-width:52ch;color:var(--color-muted)}
+.c-services-priority__layout{display:grid;gap:var(--space-5)}
+.c-services-priority__featured{padding:var(--space-6);background:var(--color-surface-2);display:grid;align-content:space-between;min-height:24rem;min-width:0}
+.c-services-priority__featured > article{display:grid;gap:var(--space-4);align-content:start}
+.c-services-priority__featured h3{font-size:var(--step-3);max-width:16ch}
+.c-services-priority__featured p{max-width:48ch}
+.c-services-priority__others{border-top:1px solid var(--color-border);min-width:0}
+.c-services-priority .btn,.c-services-priority .btn-outline{white-space:normal;text-align:center;max-width:100%}
+.c-services-priority__others > article{display:grid;gap:var(--space-2);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border)}
+.c-services-priority__others h3{font-size:var(--step-1)}
+.c-services-priority__others p{color:var(--color-muted);margin:0}
+.c-services-priority__others a{justify-self:start}
+@media(min-width:850px){.c-services-priority__head{grid-template-columns:minmax(0,1fr) minmax(18rem,.75fr);align-items:end}.c-services-priority__layout{grid-template-columns:minmax(0,1.25fr) minmax(18rem,.75fr);gap:var(--space-8)}}

package/design-system/compositions/v1/northline-counsel/components/services-priority/template.html

@@ -0,0 +1 @@
+<section class="c-services-priority section"><div class="wrap"><div class="c-services-priority__head"><div><slot name="eyebrow"></slot><slot name="heading"></slot></div><slot name="intro"></slot></div><div class="c-services-priority__layout"><div class="c-services-priority__featured"><slot name="featured"></slot></div><div class="c-services-priority__others"><slot name="items"></slot></div></div></div></section>

package/design-system/compositions/v1/northline-counsel/components/specification-ledger/styles.css

@@ -0,0 +1,10 @@
+.c-specification-ledger__layout{display:grid;gap:var(--space-6)}
+.c-specification-ledger__intro{display:grid;gap:var(--space-3);align-content:start}
+.c-specification-ledger__intro h2{max-width:18ch}
+.c-specification-ledger__intro p{max-width:50ch}
+.c-specification-ledger__list{border-top:2px solid var(--color-text);margin:0}
+.c-specification-ledger__list > div{display:grid;grid-template-columns:minmax(7rem,.45fr) minmax(0,1fr);gap:var(--space-3);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border)}
+.c-specification-ledger__list dt{font-weight:600}
+.c-specification-ledger__list dd{margin:0;color:var(--color-muted);max-width:56ch}
+@media(max-width:420px){.c-specification-ledger__list > div{grid-template-columns:1fr;gap:var(--space-1)}}
+@media(min-width:900px){.c-specification-ledger__layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-8)}}

package/design-system/compositions/v1/northline-counsel/components/specification-ledger/template.html

@@ -0,0 +1 @@
+<section class="c-specification-ledger section"><div class="wrap c-specification-ledger__layout"><div class="c-specification-ledger__intro"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="intro"></slot></div><dl class="c-specification-ledger__list"><slot name="items"></slot></dl></div></section>

package/design-system/compositions/v1/northline-counsel/direction.md

@@ -0,0 +1,5 @@
+# Direction: useful distinctions without imagery
+
+Fictional teaching brief. The visitor needs to decide whether a planning conversation is relevant and what to bring. A type-led opening and narrow proof column create hierarchy without a stock portrait or invented credentials. Warm paper surfaces and a subdued green action color support clarity. Keep the page calm but not empty: service priority and preparation rows give the reader distinct tasks.
+
+Alternative: A practice with published credentials or real people photos could use a more personal opening, but those assets must come from its verified inventory.

package/design-system/compositions/v1/northline-counsel/fixture-brief.json

@@ -0,0 +1,10 @@
+{
+  "fictional": true,
+  "name": "Northline Counsel",
+  "businessType": "small professional legal practice",
+  "visitorJobs": ["understand practice focus", "prepare for a planning conversation", "contact the office"],
+  "routes": ["/", "/planning/"],
+  "factsPolicy": "All business and legal-service statements are fictional teaching copy. The example provides no legal advice and no verified credentials.",
+  "availableMedia": [],
+  "requiredActions": ["open planning detail", "call the fictional example number"]
+}

package/design-system/compositions/v1/northline-counsel/media-inventory.json

@@ -0,0 +1 @@
+{"purpose":"Sparse-media teaching example","assets":[],"policy":"No stock portrait, invented testimonial, metric, or generated office photo is used as proof."}

package/design-system/compositions/v1/northline-counsel/pages/index.html

@@ -0,0 +1,11 @@
+---
+title: Northline Counsel Fictional teaching site
+description: A sparse-media professional practice example built around useful service distinctions.
+---
+<nav-split variant="static"><span slot="brand">Northline</span><a slot="links" href="/">Home</a><a slot="links" href="/planning">Planning</a><a slot="actions" class="btn" href="tel:+12075550123">Call</a></nav-split>
+<hero-evidence><p slot="eyebrow" class="eyebrow eyebrow--accent">Legal guidance | fictional example</p><h1>Make a careful decision with a clear next step.</h1><p class="lede lede--lg">Northline Counsel is a fictional practice used to show how useful information can lead when no suitable photography exists.</p><a slot="actions" class="btn" href="/planning">Understand planning</a><a slot="actions" class="btn-outline" href="tel:+12075550123">Call the office</a><ul slot="proof"><li>Know which documents matter before a meeting</li><li>Discuss scope before work begins</li><li>Leave with a specific next step</li></ul></hero-evidence>
+<services-priority><p slot="eyebrow" class="eyebrow eyebrow--accent">Practice focus</p><h2 slot="heading">Start with the decision you face.</h2><p slot="intro" class="lede">The service hierarchy is deliberately unequal: planning leads, and the other topics remain easy to find.</p><article slot="featured"><p class="eyebrow">Primary focus</p><h3>Planning for family decisions.</h3><p>Understand the questions to bring to a first conversation and the documents that may help.</p><a class="btn" href="/planning">Explore planning</a></article><article slot="items"><h3>Probate questions</h3><p>Find out which process may apply after a death.</p><a class="btn-arrow" href="tel:+12075550123">Ask about probate</a></article><article slot="items"><h3>Business transitions</h3><p>Prepare the questions that come before a handover.</p><a class="btn-arrow" href="tel:+12075550123">Discuss a transition</a></article></services-priority>
+<specification-ledger><p slot="eyebrow" class="eyebrow eyebrow--accent">Before you call</p><h2 slot="heading">What helps the first conversation.</h2><p slot="intro" class="lede">Practical preparation can replace decorative proof when a business has no usable imagery or published outcomes.</p><div slot="items"><dt>Your question</dt><dd>Write down the decision you need to make and any deadline you know.</dd></div><div slot="items"><dt>Documents</dt><dd>Gather existing agreements, notices, or plans that may be relevant.</dd></div><div slot="items"><dt>People</dt><dd>Note who is affected and who may need to participate.</dd></div></specification-ledger>
+<contact-phone-first><p slot="eyebrow" class="eyebrow eyebrow--accent">Next step</p><h2 slot="heading">Speak to the office.</h2><p slot="intro" class="lede">Use a direct contact path when the visitor's next task is a conversation, with another channel available below.</p><div slot="phone"><p class="eyebrow">Fictional example number</p><a href="tel:+12075550123">(207) 555-0123</a></div><p slot="details">MondayFriday, 9 a.m.5 p.m. | fictional hours</p><p slot="details"><a href="mailto:hello@example.test">hello@example.test</a></p></contact-phone-first>
+<footer-compact><span slot="brand">Northline Counsel</span><a slot="links" href="/planning">Planning</a><a slot="legal" href="/cookie-compliance">Cookie compliance</a><span slot="legal">Teaching content only. No legal services are offered.</span></footer-compact>
+

package/design-system/compositions/v1/northline-counsel/pages/planning.html

@@ -0,0 +1,11 @@
+---
+title: Planning questions Northline Counsel
+description: A fictional interior service page showing practical guidance without invented proof.
+---
+<nav-split variant="static"><span slot="brand">Northline</span><a slot="links" href="/">Home</a><a slot="links" href="/planning">Planning</a><a slot="actions" class="btn" href="tel:+12075550123">Call</a></nav-split>
+<hero-page><a slot="breadcrumb" href="/">Home</a><span slot="breadcrumb" aria-current="page">Planning</span><p slot="eyebrow" class="eyebrow eyebrow--accent">Planning | fictional example</p><h1>Begin with the people and decisions that matter.</h1><p slot="intro" class="lede">This page answers a narrower question than the homepage: what to prepare before a planning conversation.</p></hero-page>
+<specification-ledger><p slot="eyebrow" class="eyebrow eyebrow--accent">Preparation</p><h2 slot="heading">Bring what you already know.</h2><p slot="intro" class="lede">A useful interior page can be precise without claiming a universal legal process.</p><div slot="items"><dt>Existing plans</dt><dd>Bring current documents if you have them, even when they need updating.</dd></div><div slot="items"><dt>People involved</dt><dd>Think about who may need information, support, or authority.</dd></div><div slot="items"><dt>Questions</dt><dd>Write down what you are trying to decide and what remains unclear.</dd></div></specification-ledger>
+<contact-visit><p slot="eyebrow" class="eyebrow eyebrow--accent">Meeting details</p><h2 slot="heading">Check the practical details first.</h2><p slot="intro" class="lede">A real practice would publish its verified address, hours, and accessibility information here.</p><address slot="place">Northline Counsel<br>12 Sample Street<br>Portland, ME 04101<br><small>Fictional address</small></address><div slot="hours"><h3>Example hours</h3><p>MondayFriday, 9 a.m.5 p.m.</p></div><div slot="access"><h3>Before you travel</h3><p>Call to confirm the meeting location and access arrangements.</p></div><a slot="actions" class="btn-outline" href="tel:+12075550123">Call the office</a></contact-visit>
+<contact-phone-first><p slot="eyebrow" class="eyebrow eyebrow--accent">Questions remain?</p><h2 slot="heading">Talk through what comes next.</h2><p slot="intro" class="lede">A conversation can establish whether this is the right service for your situation.</p><div slot="phone"><p class="eyebrow">Fictional example number</p><a href="tel:+12075550123">(207) 555-0123</a></div><p slot="details">Teaching content only. No legal advice or services are offered.</p></contact-phone-first>
+<footer-compact><span slot="brand">Northline Counsel</span><a slot="links" href="/">Home</a><a slot="legal" href="/cookie-compliance">Cookie compliance</a><span slot="legal">Teaching content only. No legal services are offered.</span></footer-compact>
+

package/design-system/compositions/v1/northline-counsel/selection-receipt.json

@@ -0,0 +1,36 @@
+{
+  "schemaVersion": 1,
+  "scope": "Teaching example authoring review, not a normal harness stage receipt or independent design review.",
+  "reviewer": "Codex active agent",
+  "reviewedOn": "2026-09-22",
+  "libraryProfile": "slice-v1",
+  "decisions": [
+    {
+      "section": "home opening",
+      "visitorJob": "Understand the practice focus and find a conversation path without a supplied photo",
+      "eligibleCompared": ["hero/hero-evidence", "hero/hero-editorial"],
+      "hardRejected": [],
+      "selected": "hero/hero-evidence",
+      "inspectedPreviews": [
+        {"id": "hero/hero-evidence", "sourceHash": "a6e4e590acd369d516d3d67301ff5b0bd1383850ec797a3826e713ae0e380099", "mobileImageHash": "2673677aa220d93f0df285eadbf0ae17955fac6aeb31b8ff76087eb83f66a480", "desktopImageHash": "5b4a6350de71179ff4a251e0449929d2a14a4cdd882ebf77a0cba09148001a6b"},
+        {"id": "hero/hero-editorial", "sourceHash": "c7523f6b19a0b7643a08fbb15054906ef4d53d0acec527dc7582519e00a5f0b0", "mobileImageHash": "12da60f01d0142ec939dfe9625851c9b38867a01a6723d27541c3f3da475ed6b", "desktopImageHash": "98eaaec876a66bf6839bc5f94ff003b2d28425e23f979ff1a6f5db287a939629"}
+      ],
+      "reason": "The evidence column gives the visitor a concrete explanation beside the offer without implying a photograph or testimonial. The editorial alternative is viable only after replacing its placeholder media area; it gives less room for the documented scope facts.",
+      "adaptation": "Copy and tokens were adapted for this fictional practice; no customer credentials or portraits were invented."
+    },
+    {
+      "section": "home service index",
+      "visitorJob": "Distinguish the primary planning offer from two supporting services",
+      "eligibleCompared": ["services/services-priority", "services/services-list"],
+      "hardRejected": [],
+      "selected": "services/services-priority",
+      "inspectedPreviews": [
+        {"id": "services/services-priority", "sourceHash": "538a84d99d4dc98cf0e725ccfba0749f71d254cabe70be9015354c017bc674a6", "mobileImageHash": "9fda078b68d0a5d4bbc5541ee7ed71f707595115b6b2ddb3a614752912b79ec0", "desktopImageHash": "fa64a0c1466c8b5034758f335bd20d7b29f90d6518f750a778635b435205087e"},
+        {"id": "services/services-list", "sourceHash": "5b26a7c187d49a5ffe6d79fc5c099f6846529a748bc7b0a5127831fa3e132732", "mobileImageHash": "6cdf4bafcb9ffe42c158bfa45b49c64ea9d7b23a7b03de43126b09773c5e2d87", "desktopImageHash": "9fbfe24fa5ef7419482022a4e185c833e225de12a73686f113086d0f14ec4cd7"}
+      ],
+      "reason": "The unequal hierarchy matches the fixture's one primary offer. The numbered list is a good alternative when each practice area deserves equal weight. The selected block changes to a vertical narrative on mobile.",
+      "adaptation": "The primary item received the longer explanation; supporting items retain distinct next actions."
+    }
+  ],
+  "limitations": ["Structural previews use fictional copy and default tokens", "This is an example authoring decision, not a measured customer preference", "No independent human design review was performed"]
+}

package/design-system/compositions/v1/northline-counsel/site.json

@@ -0,0 +1 @@
+{"name":"Northline Counsel (fictional teaching example)","slug":"northline-counsel","motion":{"strength":"off"}}

package/design-system/compositions/v1/northline-counsel/storyboard.md

@@ -0,0 +1,12 @@
+# Storyboard and adaptation notes
+
+| Route and section | Visitor question | Evidence and emphasis | Mobile transformation |
+| --- | --- | --- | --- |
+| Home opening | Is this practice relevant to my decision? | Type-led proposition; process facts in a subordinate column. | Proof follows the main message. |
+| Service priority | Which topic should I open? | Planning is primary, other topics stay visible as rows. | One featured service followed by compact alternatives. |
+| Preparation ledger | What can I do before calling? | Concrete preparation replaces decorative proof. | Labels stack above descriptions at narrow width. |
+| Contact | How do I start? | Phone, hours, and email are visible without a form. | Phone remains a usable `tel:` link. |
+| Planning opening | What is this page specifically for? | Long title and concise purpose; no empty photo area. | Heading and intro remain in reading order. |
+| Planning detail and visit | What should I bring, and where would I go? | Preparation rows followed by practical visit information. | Place and access details stack. |
+
+The interior does not repeat the home offer. It answers a specific preparation task, then offers a contact path. The address and hours are visibly fictional and must be replaced with verified details in a customer site.

package/design-system/compositions/v1/northline-counsel/theme/defaults.json

@@ -0,0 +1 @@
+{"colorBg":"#F9F7F2","colorText":"#26231F","colorMuted":"#59534C","colorAccent":"#355C58","colorAccentText":"#FFFFFF","colorSurface":"#FFFFFF","colorSurface2":"#E8EDE9","colorBorder":"#C9CEC8","colorFocus":"#355C58","fontBody":"ui-sans-serif, system-ui, sans-serif","fontDisplay":"ui-serif, Georgia, serif","radius":"0px","radiusLg":"0px","radiusPill":"999px","maxWidth":"1080px"}

package/design-system/compositions/v1/source-ledger.json

@@ -0,0 +1,18 @@
+{
+  "created": "2026-09-22",
+  "policy": "This ledger precedes any external capture corpus. Only original Vitris code and assets are used in examples. Textual inspection does not establish visual layout. No third-party screenshots are stored or redistributed.",
+  "references": [
+    {"url":"https://www.shadcnblocks.com/blocks","author":"Shadcnblocks.com","industry":"component catalog","inspected":"2026-09-22","viewport":null,"inspection":"planning text only","observedPrinciple":"Section alternatives need discoverable previews and source handles","relevance":"catalog information architecture","permittedUse":"abstract catalog principle only; no components, derivatives, or assets","captureRedistribution":"not permitted under this plan"},
+    {"url":"https://www.shadcnblocks.com/license","author":"Shadcnblocks.com","industry":"license","inspected":"2026-09-22","viewport":null,"inspection":"published terms","observedPrinciple":"Published restrictions cover component derivatives in builders and AI generators","relevance":"material sourcing boundary","permittedUse":"read terms and link; do not ingest components","captureRedistribution":"not permitted under this plan"},
+    {"url":"https://design-system.service.gov.uk/patterns/","author":"GOV.UK Design System","industry":"public service","inspected":"2026-09-22","viewport":null,"inspection":"text and page structure","observedPrinciple":"Organize patterns around user tasks and explain adaptation","relevance":"visitor-job metadata","permittedUse":"abstract guidance with attribution","captureRedistribution":"not assessed"},
+    {"url":"https://every-layout.dev/rudiments/axioms/","author":"Every Layout","industry":"layout education","inspected":"2026-09-22","viewport":null,"inspection":"text and page structure","observedPrinciple":"Content-aware layout rules can avoid brittle fixed dimensions","relevance":"responsive authoring","permittedUse":"abstract principle with attribution; no source copying","captureRedistribution":"not assessed"},
+    {"url":"https://www.patagonia.com/home/","author":"Patagonia","industry":"outdoor retail","inspected":"2026-09-22","viewport":null,"inspection":"text and page structure","observedPrinciple":"Product, repair, and activism are separate visitor paths in one navigation system","relevance":"multi-purpose navigation","permittedUse":"abstract observation only","captureRedistribution":"not assessed"},
+    {"url":"https://www.aesop.com/","author":"Aesop","industry":"beauty retail","inspected":"2026-09-22","viewport":null,"inspection":"partial text; source reported offline/server error","observedPrinciple":null,"relevance":"candidate for beauty and tactile treatment","permittedUse":"none until inspected successfully","captureRedistribution":"not assessed"},
+    {"url":"https://themodernhouse.com/","author":"The Modern House","industry":"property editorial","inspected":"2026-09-22","viewport":null,"inspection":"text and page structure","observedPrinciple":"Property discovery and editorial content are distinct visitor paths","relevance":"portfolio and project navigation","permittedUse":"abstract observation only","captureRedistribution":"not assessed"},
+    {"url":"https://www.nps.gov/index.htm","author":"U.S. National Park Service","industry":"public information","inspected":"2026-09-22","viewport":null,"inspection":"text and page structure","observedPrinciple":"Practical visit information is a first-class task","relevance":"hours, access, and location blocks","permittedUse":"abstract observation only","captureRedistribution":"not assessed"},
+    {"url":"https://stripe.com/","author":"Stripe","industry":"technical B2B","inspected":null,"viewport":null,"inspection":"candidate only","observedPrinciple":null,"relevance":"product evidence and dense explanation","permittedUse":"none until inspected","captureRedistribution":"not assessed"},
+    {"url":"https://linear.app/","author":"Linear","industry":"software","inspected":null,"viewport":null,"inspection":"candidate only","observedPrinciple":null,"relevance":"technical rhythm","permittedUse":"none until inspected","captureRedistribution":"not assessed"},
+    {"url":"https://www.basecamp.com/","author":"37signals","industry":"business software","inspected":null,"viewport":null,"inspection":"candidate only","observedPrinciple":null,"relevance":"type-led service explanation","permittedUse":"none until inspected","captureRedistribution":"not assessed"},
+    {"url":"https://www.noma.dk/","author":"Noma","industry":"hospitality","inspected":null,"viewport":null,"inspection":"candidate only","observedPrinciple":null,"relevance":"reservation and practical information","permittedUse":"none until inspected","captureRedistribution":"not assessed"}
+  ]
+}

package/design-system/compositions/v1/tide-and-slate/components/contact-phone-first/styles.css

@@ -0,0 +1,11 @@
+.c-contact-phone-first{background:var(--color-surface-2)}
+.c-contact-phone-first__layout{display:grid;gap:var(--space-7)}
+.c-contact-phone-first__lead{display:grid;gap:var(--space-4);align-content:start}
+.c-contact-phone-first__lead h2{max-width:16ch}
+.c-contact-phone-first__lead .lede{max-width:48ch}
+.c-contact-phone-first__details{display:grid;gap:var(--space-5);border-top:2px solid var(--color-accent);padding-top:var(--space-5)}
+.c-contact-phone-first__phone{display:grid;gap:var(--space-2)}
+.c-contact-phone-first__phone a{font-family:var(--font-display);font-size:clamp(1.7rem,1rem + 2.3vw,3rem);line-height:1.1;overflow-wrap:anywhere;text-decoration-thickness:.06em;text-underline-offset:.12em}
+.c-contact-phone-first__secondary{display:grid;gap:var(--space-3)}
+.c-contact-phone-first__secondary > *{margin:0}
+@media(min-width:850px){.c-contact-phone-first__layout{grid-template-columns:minmax(0,1fr) minmax(18rem,.85fr);gap:var(--space-8)}}

package/design-system/compositions/v1/tide-and-slate/components/contact-phone-first/template.html

@@ -0,0 +1 @@
+<section class="c-contact-phone-first section"><div class="wrap c-contact-phone-first__layout"><div class="c-contact-phone-first__lead"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="intro"></slot></div><div class="c-contact-phone-first__details"><div class="c-contact-phone-first__phone"><slot name="phone"></slot></div><div class="c-contact-phone-first__secondary"><slot name="details"></slot></div></div></div></section>

package/design-system/compositions/v1/tide-and-slate/components/footer-compact/styles.css

@@ -0,0 +1,12 @@
+.c-footer-compact{border-top:1px solid var(--color-border);font-size:var(--step-0);color:var(--color-muted)}
+.c-footer-compact a:not([class*="btn"]){color:var(--color-muted);text-decoration:none}
+.c-footer-compact a:not([class*="btn"]):hover{color:var(--color-text)}
+.c-footer-compact .brand{color:var(--color-text)}
+.c-footer-compact__legal{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:center;padding-block:var(--space-4);border-top:1px solid var(--color-border)}
+.c-footer-compact__legal > span{margin-inline-start:auto}
+.c-footer-compact__social{display:flex;gap:var(--space-2)}
+.c-footer-compact__social a{display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-pill);border:1px solid var(--color-border)}
+.c-footer-compact__social a:hover{border-color:var(--color-text)}
+.c-footer-compact__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-6)}
+.c-footer-compact__links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
+.c-footer-compact__links:empty{display:none}

package/design-system/compositions/v1/tide-and-slate/components/footer-compact/template.html

@@ -0,0 +1 @@
+<footer class="c-footer-compact"><div class="wrap"><div class="c-footer-compact__row"><a class="brand" href="/"><slot name="brand"></slot></a><nav class="c-footer-compact__links" aria-label="Footer"><slot name="links"></slot></nav></div><div class="c-footer-compact__legal"><slot name="legal"></slot></div></div></footer>

package/design-system/compositions/v1/tide-and-slate/components/hero-page/styles.css

@@ -0,0 +1,19 @@
+.c-hero-page{padding-block:calc(var(--section-y) - var(--space-4)) var(--section-y)}
+.c-hero-page__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-bottom:var(--space-6);font-size:var(--step-0);color:var(--color-muted)}
+.c-hero-page__crumbs:empty{display:none}
+.c-hero-page__crumbs > * + *::before{content:"/";margin-right:var(--space-2);color:var(--color-border)}
+.c-hero-page__crumbs a{color:inherit;text-decoration:none}
+.c-hero-page__crumbs a:hover{color:var(--color-text)}
+.c-hero-page__crumbs [aria-current]{color:var(--color-text)}
+.c-hero-page__grid{display:grid;gap:var(--space-5)}
+.c-hero-page__title{display:grid;gap:var(--space-4)}
+.c-hero-page h1{max-width:16ch}
+.c-hero-page__intro{display:grid;gap:var(--space-5);align-self:end;justify-items:start}
+.c-hero-page__intro .lede{max-width:34rem}
+.c-hero-page__media{margin-top:var(--space-7)}
+.c-hero-page__media:empty{display:none}
+@media(min-width:900px){.c-hero-page__grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-8);align-items:end}.c-hero-page__intro{padding-bottom:.35rem}}
+.c-hero-page--center .c-hero-page__crumbs{justify-content:center}
+.c-hero-page--center .c-hero-page__grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--space-5)}
+.c-hero-page--center h1{max-width:20ch}
+.c-hero-page--center .c-hero-page__intro{justify-items:center;padding:0}

package/design-system/compositions/v1/tide-and-slate/components/hero-page/template.html

@@ -0,0 +1 @@
+<section class="c-hero-page section"><div class="wrap"><nav class="c-hero-page__crumbs" aria-label="Breadcrumb"><slot name="breadcrumb"></slot></nav><div class="c-hero-page__grid"><div class="c-hero-page__title"><slot name="eyebrow"></slot><slot></slot></div><div class="c-hero-page__intro"><slot name="intro"></slot></div></div></div><div class="wrap c-hero-page__media"><slot name="media"></slot></div></section>