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

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

@@ -0,0 +1,7 @@
+.c-hero-split__copy{display:grid;gap:var(--space-5);align-content:center}
+.c-hero-split__copy h1{max-width:18ch}
+.c-hero-split__copy .btn-group{margin-top:var(--space-2)}
+.c-hero-split__proof:empty{display:none}
+.c-hero-split--reverse .split > :first-child{order:2}
+.c-hero-split--dark{--color-bg:#141210;--color-text:#F7F4EF;--color-muted:#B8B0A4;--color-surface:#1E1B18;--color-surface-2:#2A2622;--color-border:#3A342E;--color-focus:#F7F4EF;background:var(--color-bg);color:var(--color-text)}
+.c-hero-split--dark .frame{box-shadow:none}

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

@@ -0,0 +1,11 @@
+<section class="c-hero-split section section--roomy">
+  <div class="wrap split">
+    <div class="c-hero-split__copy">
+      <slot name="eyebrow"></slot>
+      <slot></slot>
+      <div class="btn-group"><slot name="actions"></slot></div>
+      <div class="c-hero-split__proof"><slot name="proof"></slot></div>
+    </div>
+    <div class="c-hero-split__media frame ratio-4x3"><slot name="media"></slot></div>
+  </div>
+</section>

package/design-system/compositions/v1/tide-and-slate/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/tide-and-slate/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/tide-and-slate/components/project-evidence/styles.css

@@ -0,0 +1,12 @@
+.c-project-evidence__intro{display:grid;gap:var(--space-4);margin-bottom:var(--space-6)}
+.c-project-evidence__intro h2{max-width:18ch}
+.c-project-evidence__intro > p{max-width:56ch;color:var(--color-muted)}
+.c-project-evidence__body{display:grid;gap:var(--space-5)}
+.c-project-evidence__figure{margin:0;min-width:0}
+.c-project-evidence__figure img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
+.c-project-evidence__figure figcaption{font-size:var(--step-0);color:var(--color-muted);margin-top:var(--space-2);max-width:65ch}
+.c-project-evidence__facts{align-self:start;display:grid;border-top:2px solid var(--color-accent);margin:0}
+.c-project-evidence__facts > div{padding:var(--space-4) 0;border-bottom:1px solid var(--color-border);display:grid;gap:var(--space-2)}
+.c-project-evidence__facts dt{font-size:var(--step-0);color:var(--color-muted)}
+.c-project-evidence__facts dd{margin:0;font-weight:600}
+@media(min-width:900px){.c-project-evidence__intro{grid-template-columns:minmax(0,1fr) minmax(18rem,.75fr);align-items:end}.c-project-evidence__body{grid-template-columns:minmax(0,1.5fr) minmax(16rem,.55fr);gap:var(--space-7)}}

package/design-system/compositions/v1/tide-and-slate/components/project-evidence/template.html

@@ -0,0 +1 @@
+<section class="c-project-evidence section"><div class="wrap"><div class="c-project-evidence__intro"><div><slot name="eyebrow"></slot><slot name="heading"></slot></div><slot name="summary"></slot></div><div class="c-project-evidence__body"><figure class="c-project-evidence__figure"><slot name="media"></slot><figcaption><slot name="caption"></slot></figcaption></figure><dl class="c-project-evidence__facts"><slot name="facts"></slot></dl></div></div></section>

package/design-system/compositions/v1/tide-and-slate/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/tide-and-slate/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/tide-and-slate/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/tide-and-slate/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/tide-and-slate/direction.md

@@ -0,0 +1,5 @@
+# Direction: material before promise
+
+Fictional teaching brief. The business idea is a careful roof decision in a coastal setting. The images can show slate texture, installation, and context, but they cannot prove a real outcome. Use a cool mineral palette, restrained rust action color, and clear captions. The homepage moves from visible work to service scope to a closer project explanation to a phone action. The interior narrows to one illustrative project and the questions behind material choice.
+
+Alternative: If a real customer has no project photographs, lead with a text and specification treatment instead. Do not keep empty image frames or substitute synthetic teaching images for customer proof.

package/design-system/compositions/v1/tide-and-slate/fixture-brief.json

@@ -0,0 +1,10 @@
+{
+  "fictional": true,
+  "name": "Tide & Slate",
+  "businessType": "coastal slate roofing studio",
+  "visitorJobs": ["understand the service", "inspect material and project evidence", "start a roof conversation"],
+  "routes": ["/", "/project/"],
+  "factsPolicy": "All example business statements are fictional teaching copy. The two images are synthetic and must not be presented as completed customer work.",
+  "availableMedia": ["media/teaching/slate-roof-work.webp", "media/teaching/slate-roof-finished.webp"],
+  "requiredActions": ["open project detail", "call the fictional example number"]
+}

package/design-system/compositions/v1/tide-and-slate/media/teaching/slate-roof-finished.webp.provenance.json

@@ -0,0 +1,9 @@
+{
+  "kind": "synthetic-teaching-image",
+  "created": "2026-09-22",
+  "generator": "Codex imagegen built-in tool",
+  "sourceSha256": "3895ee1a2230c9aac6159aeb08143a2e7b8b59eb0c334f2d2d3646f3497782f6",
+  "artifactSha256": "263431d71685757fecd164e3f56fb87fbc64c836eae2e8dbf0ab641fd8191298",
+  "rights": "Original generated image for Vitris teaching examples",
+  "restriction": "Never treat as proof of a real customer project or copy into customer media inventory automatically."
+}

package/design-system/compositions/v1/tide-and-slate/media/teaching/slate-roof-work.webp.provenance.json

@@ -0,0 +1,9 @@
+{
+  "kind": "synthetic-teaching-image",
+  "created": "2026-09-22",
+  "generator": "Codex imagegen built-in tool",
+  "sourceSha256": "3835e66557ffd9dbfe9ddc271dfe51e0b275a651da3fba2a4fd9ff36975c66d2",
+  "artifactSha256": "b7975143d0fbd1e55363b0571c8d7f2284c16b576759ce17f7230d541168a29c",
+  "rights": "Original generated image for Vitris teaching examples",
+  "restriction": "Never treat as proof of a real customer project or copy into customer media inventory automatically."
+}

package/design-system/compositions/v1/tide-and-slate/media-inventory.json

@@ -0,0 +1,7 @@
+{
+  "purpose": "Teaching only, excluded from customer fact and media inventories",
+  "assets": [
+    {"path":"media/teaching/slate-roof-work.webp","role":"installation detail","provenance":"media/teaching/slate-roof-work.webp.provenance.json","synthetic":true},
+    {"path":"media/teaching/slate-roof-finished.webp","role":"finished roof context","provenance":"media/teaching/slate-roof-finished.webp.provenance.json","synthetic":true}
+  ]
+}

package/design-system/compositions/v1/tide-and-slate/pages/index.html

@@ -0,0 +1,10 @@
+---
+title: Tide & Slate Fictional teaching site
+description: A fictional slate roofing business used to teach evidence-led composition.
+---
+<nav-split variant="static"><span slot="brand">Tide &amp; Slate</span><a slot="links" href="/">Home</a><a slot="links" href="/project">Project</a><a slot="actions" class="btn" href="tel:+12075550128">Call us</a></nav-split>
+<hero-split motion="off"><p slot="eyebrow" class="eyebrow eyebrow--accent">Coastal roofing | fictional example</p><h1>Slate work shaped by the coast.</h1><p class="lede lede--lg">See how material, site conditions, and careful detailing belong in the same conversation.</p><a slot="actions" class="btn btn-lg" href="/project">Explore a project</a><a slot="actions" class="btn-outline btn-lg" href="tel:+12075550128">Call the studio</a><img slot="media" src="/media/teaching/slate-roof-work.webp" alt="Synthetic teaching image of roofers installing slate on a coastal house" width="1536" height="1024" fetchpriority="high"></hero-split>
+<services-priority><p slot="eyebrow" class="eyebrow eyebrow--accent">The work</p><h2 slot="heading">A material decision with a practical plan.</h2><p slot="intro" class="lede">A useful service page explains what is involved before it asks for an estimate.</p><article slot="featured"><p class="eyebrow">Primary service</p><h3>Slate roof installation</h3><p>Discuss the roof geometry, material availability, and details that affect the scope.</p><a class="btn" href="/project">See an example project</a></article><article slot="items"><h3>Roof assessment</h3><p>Start with a clear record of the existing roof and its concerns.</p><a class="btn-arrow" href="tel:+12075550128">Ask about an assessment</a></article><article slot="items"><h3>Repair planning</h3><p>Understand whether a targeted repair or a larger replacement is appropriate.</p><a class="btn-arrow" href="tel:+12075550128">Discuss repair</a></article></services-priority>
+<project-evidence><p slot="eyebrow" class="eyebrow eyebrow--accent">Illustrative project sequence</p><h2 slot="heading">Let the work carry the explanation.</h2><p slot="summary" class="lede">The image, caption, and fact list form one piece of evidence. In a real site, every detail would come from a verified project record.</p><img slot="media" src="/media/teaching/slate-roof-finished.webp" alt="Synthetic teaching image of a finished slate roof on a coastal house" width="1536" height="1024" loading="lazy"><span slot="caption">Synthetic teaching image; no real customer project is represented.</span><div slot="facts"><dt>Material shown</dt><dd>Dark slate</dd></div><div slot="facts"><dt>Example setting</dt><dd>Coastal house</dd></div></project-evidence>
+<contact-phone-first><p slot="eyebrow" class="eyebrow eyebrow--accent">Next step</p><h2 slot="heading">Start with a roof conversation.</h2><p slot="intro" class="lede">Tell the team what you know about the roof and what decision you need to make.</p><div slot="phone"><p class="eyebrow">Fictional example number</p><a href="tel:+12075550128">(207) 555-0128</a></div><p slot="details">This is a teaching site; no service is offered at this number.</p></contact-phone-first>
+<footer-compact><span slot="brand">Tide &amp; Slate | fictional example</span><a slot="links" href="/project">Project</a><a slot="legal" href="/cookie-compliance">Cookie compliance</a><span slot="legal">Synthetic images and fictional business details for teaching only.</span></footer-compact>

package/design-system/compositions/v1/tide-and-slate/pages/project.html

@@ -0,0 +1,10 @@
+---
+title: Illustrative slate project Tide & Slate
+description: A fictional project page showing how media and facts can work together.
+---
+<nav-split variant="static"><span slot="brand">Tide &amp; Slate</span><a slot="links" href="/">Home</a><a slot="links" href="/project">Project</a><a slot="actions" class="btn" href="tel:+12075550128">Call us</a></nav-split>
+<hero-page><a slot="breadcrumb" href="/">Home</a><span slot="breadcrumb" aria-current="page">Project</span><p slot="eyebrow" class="eyebrow eyebrow--accent">Illustrative project | fictional</p><h1>A coastal slate roof, from detail to whole.</h1><p slot="intro" class="lede">A project page should show the work, explain relevant choices, and distinguish observed facts from sales language.</p><div slot="media"><img src="/media/teaching/slate-roof-finished.webp" alt="Synthetic teaching image of the full roof on a coastal house" width="1536" height="1024" fetchpriority="high"></div></hero-page>
+<project-evidence><p slot="eyebrow" class="eyebrow eyebrow--accent">Closer view</p><h2 slot="heading">The material at the point of installation.</h2><p slot="summary" class="lede">A detailed image lets the visitor inspect texture and method. The copy should explain what is visible rather than claim a result the image cannot prove.</p><img slot="media" src="/media/teaching/slate-roof-work.webp" alt="Synthetic teaching image of roofers positioning slate tiles" width="1536" height="1024" loading="lazy"><span slot="caption">Synthetic teaching image showing slate placement. It is not a real job record.</span><div slot="facts"><dt>Visible material</dt><dd>Slate tiles</dd></div><div slot="facts"><dt>Visible work</dt><dd>Tile positioning</dd></div></project-evidence>
+<specification-ledger><p slot="eyebrow" class="eyebrow eyebrow--accent">What to ask</p><h2 slot="heading">Questions behind a material choice.</h2><p slot="intro" class="lede">This list is a conversation guide, not a specification for a real roof.</p><div slot="items"><dt>Pitch</dt><dd>How does the roof geometry affect the suitable system?</dd></div><div slot="items"><dt>Substrate</dt><dd>What existing conditions need inspection before work is scoped?</dd></div><div slot="items"><dt>Detailing</dt><dd>How will edges, valleys, and penetrations be handled?</dd></div></specification-ledger>
+<contact-phone-first><p slot="eyebrow" class="eyebrow eyebrow--accent">Discuss the work</p><h2 slot="heading">Have a roof in mind?</h2><p slot="intro" class="lede">A real project page would link to the business's actual assessment process.</p><div slot="phone"><p class="eyebrow">Fictional example number</p><a href="tel:+12075550128">(207) 555-0128</a></div><p slot="details">Teaching example only; no service is offered at this number.</p></contact-phone-first>
+<footer-compact><span slot="brand">Tide &amp; Slate | fictional example</span><a slot="links" href="/">Home</a><a slot="legal" href="/cookie-compliance">Cookie compliance</a><span slot="legal">Synthetic images and fictional business details for teaching only.</span></footer-compact>

package/design-system/compositions/v1/tide-and-slate/site.json

@@ -0,0 +1 @@
+{"name":"Tide & Slate (fictional teaching example)","slug":"tide-and-slate","motion":{"strength":"off"}}

package/design-system/compositions/v1/tide-and-slate/storyboard.md

@@ -0,0 +1,12 @@
+# Storyboard and adaptation notes
+
+| Route and section | Visitor question | Evidence and emphasis | Mobile transformation |
+| --- | --- | --- | --- |
+| Home opening | What kind of work is this? | Installation image and short offer; one project action. | Copy before image so the proposition stands alone. |
+| Service priority | Which service is central? | Lead slate service receives depth; assessments and repairs remain scannable. | Featured service stacks above the rows. |
+| Project evidence | Can I inspect the material? | Finished image, explicit synthetic caption, and a small fact ledger. | Image stays before facts and caption remains visible. |
+| Contact | What do I do next? | Phone is prominent; teaching-only qualifier remains visible. | Text and phone stack without a form dependency. |
+| Project opening | What is this page about? | A complete roof image establishes context. | Heading precedes the image. |
+| Project detail and specification | What can I see, and what should I ask? | Installation image is distinguished from the material decision checklist. | Fact rows and questions stack with readable labels. |
+
+The two routes share a mineral palette and type system. The project page uses the imagery for a narrower purpose; it does not repeat the homepage service pitch. A real project page would replace every synthetic image and example fact with a sourced project record.

package/design-system/compositions/v1/tide-and-slate/theme/defaults.json

@@ -0,0 +1 @@
+{"colorBg":"#F3F1EB","colorText":"#19262A","colorMuted":"#42575C","colorAccent":"#9B4C32","colorAccentText":"#FFFFFF","colorSurface":"#FFFFFF","colorSurface2":"#E3E6E3","colorBorder":"#BAC6C4","colorFocus":"#9B4C32","fontBody":"ui-sans-serif, system-ui, sans-serif","fontDisplay":"ui-serif, Georgia, serif","radius":"2px","radiusLg":"4px","radiusPill":"999px","maxWidth":"1180px"}