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

package/design-system/compositions/v2/mara-reading-room/components/study-mara-reading-room/styles.css

@@ -0,0 +1,2 @@
+.c-study-mara-reading-room{overflow-wrap:anywhere;max-width:100%;color:var(--color-text);font-family:var(--font-body)}.c-study-mara-reading-room h1,.c-study-mara-reading-room h2,.c-study-mara-reading-room h3{color:inherit;font-family:var(--font-display);font-weight:500}.c-study-mara-reading-room h1{font-size:clamp(2.6rem,6vw,6.5rem);line-height:1.06;letter-spacing:-.035em}.c-study-mara-reading-room h2{font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.2}.c-study-mara-reading-room p,.c-study-mara-reading-room li{max-width:64ch;line-height:1.65}.c-study-mara-reading-room a{color:inherit;text-underline-offset:.2em}.c-study-mara-reading-room a:focus-visible,.c-study-mara-reading-room summary:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}.c-study-mara-reading-room nav{display:flex;gap:1.5rem;flex-wrap:wrap}.c-study-mara-reading-room nav a{display:inline-flex;align-items:center;min-height:44px}.c-study-mara-reading-room img,.c-study-mara-reading-room svg{max-width:100%;height:auto}.c-study-mara-reading-room .intro{font-size:clamp(1.2rem,2vw,1.7rem);max-width:44ch}.c-study-mara-reading-room .teaching{font-size:.85rem;max-width:70ch}.c-study-mara-reading-room footer{margin-top:5rem;padding-block:2rem;border-top:1px solid var(--color-border)}.c-study-mara-reading-room dl div{margin-bottom:1.5rem}.c-study-mara-reading-room dt{font-weight:700}.c-study-mara-reading-room dd{margin:.25rem 0 0}.c-study-mara-reading-room ol{padding-left:1.5rem}.c-study-mara-reading-room section{scroll-margin-top:2rem}
+.c-study-mara-reading-room {padding:1rem clamp(1rem,6vw,6rem)}.c-study-mara-reading-room header{display:flex;justify-content:space-between;gap:2rem;align-items:center;border-bottom:1px solid var(--color-border)}.c-study-mara-reading-room .masthead{max-width:54rem;margin:5rem auto 6rem;text-align:center}.c-study-mara-reading-room .masthead p{margin-inline:auto}.c-study-mara-reading-room .masthead h1{font-size:clamp(3rem,6vw,7rem);font-weight:400}.c-study-mara-reading-room .feature{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:4rem;align-items:center}.c-study-mara-reading-room figure{margin:0}.c-study-mara-reading-room figcaption{font-size:.8rem;margin:1rem 0}.c-study-mara-reading-room .publication{max-width:40rem;margin:7rem auto;padding-left:2rem;border-left:3px solid var(--color-accent)}.c-study-mara-reading-room .essay{max-width:43rem;margin:4rem auto}.c-study-mara-reading-room .essay h1{text-align:center}.c-study-mara-reading-room .essay section{margin:4rem 0}.c-study-mara-reading-room .essay figure{margin:4rem -3rem}@media(max-width:800px){.c-study-mara-reading-room .feature{grid-template-columns:1fr;gap:1rem}.c-study-mara-reading-room .essay figure{margin:2rem 0}.c-study-mara-reading-room header{align-items:start;flex-wrap:wrap}.c-study-mara-reading-room .masthead{margin:3rem 0}}

package/design-system/compositions/v2/mara-reading-room/components/study-mara-reading-room/template.html

@@ -0,0 +1 @@
+<div class="c-study-mara-reading-room"><slot></slot></div>

package/design-system/compositions/v2/mara-reading-room/pages/detail/index.html

@@ -0,0 +1,5 @@
+---
+title: Mara Vale / editorial reading room Detail
+description: An editorial opening explains the reading practice, then pairs a feature diagram with a quiet publication index.
+---
+<study-mara-reading-room><header><p><a href="/">Mara Vale</a></p><a href="mailto:mara@example.test">Contact</a></header><article class="essay"><h1>Field Notes</h1><p class="intro">A fictional wayfinding study in reading hierarchy.</p><figure><svg viewBox="0 0 800 420" role="img" aria-label="Original reading hierarchy diagram: Field Notes title, route lines and destination labels"><rect width="800" height="420" fill="#faeee3"/><text x="40" y="90" font-size="64" font-family="serif" fill="#202f36">Field Notes</text><path d="M40 150H700M120 150V330M400 150V330M650 150V330" stroke="#315751" stroke-width="4" fill="none"/><text x="40" y="375" font-size="22" fill="#202f36">Arrive / Read / Find</text><circle cx="120" cy="150" r="10" fill="#c42f20"/><circle cx="400" cy="150" r="10" fill="#c42f20"/><circle cx="650" cy="150" r="10" fill="#c42f20"/></svg><figcaption>Original diagram for this teaching brief. No installed project is claimed.</figcaption></figure><section><h2>Collect the material</h2><p>Start with the words people need to read. Destinations, instructions and labels play different roles.</p></section><section><h2>Find the hierarchy</h2><p>The title establishes the subject. Routes connect it to destination labels. The diagram keeps each layer distinct without adding decorative evidence.</p></section><section><h2>Test the reading</h2><p>Read the sequence at different widths. The content must remain understandable when the visual field becomes narrow.</p><a href="mailto:mara@example.test">Discuss information design</a></section><section id="reading"><h2>Open Table</h2><p>A fictional publication study, 2026. The same reading method applies across printed and digital material.</p></section></article><footer><p class="teaching">Fictional Vitris teaching study. No services are offered or customer outcomes implied.</p><p>Mara Vale</p></footer></study-mara-reading-room>

package/design-system/compositions/v2/mara-reading-room/pages/index.html

@@ -0,0 +1,5 @@
+---
+title: Mara Vale / editorial reading room Home
+description: An editorial opening explains the reading practice, then pairs a feature diagram with a quiet publication index.
+---
+<study-mara-reading-room><header><p><a href="/">Mara Vale</a></p><nav aria-label="Primary"><a href="/detail">Studies</a><a href="mailto:mara@example.test">Contact</a></nav></header><div class="masthead"><p>Independent information design</p><h1>A place for<br>clear reading.</h1><p class="intro">Collect the material. Find the hierarchy. Test the reading.</p></div><section class="feature"><figure><svg viewBox="0 0 800 420" role="img" aria-label="Original reading hierarchy diagram: Field Notes title, route lines and destination labels"><rect width="800" height="420" fill="#faeee3"/><text x="40" y="90" font-size="64" font-family="serif" fill="#202f36">Field Notes</text><path d="M40 150H700M120 150V330M400 150V330M650 150V330" stroke="#315751" stroke-width="4" fill="none"/><text x="40" y="375" font-size="22" fill="#202f36">Arrive / Read / Find</text><circle cx="120" cy="150" r="10" fill="#c42f20"/><circle cx="400" cy="150" r="10" fill="#c42f20"/><circle cx="650" cy="150" r="10" fill="#c42f20"/></svg><figcaption>Field Notes / Wayfinding study / 2025</figcaption></figure><div><h2>The words come first.</h2><p>Field Notes explores how routes, titles and destination labels help people find their way through information.</p><a href="/detail">Read the study →</a></div></section><section class="publication"><p>Also in the practice</p><h2>Open Table</h2><p>Publication study / 2026</p><a href="/detail#reading">Explore the reading method</a></section><footer><p class="teaching">Fictional Vitris teaching study. No services are offered or customer outcomes implied.</p><p>Mara Vale</p></footer></study-mara-reading-room>

package/design-system/compositions/v2/mara-reading-room/site.json

@@ -0,0 +1,7 @@
+{
+  "name": "Mara Vale / editorial reading room — fictional teaching study",
+  "slug": "mara-reading-room",
+  "motion": {
+    "strength": "off"
+  }
+}

package/design-system/compositions/v2/mara-reading-room/study.json

@@ -0,0 +1,246 @@
+{
+  "id": "mara-reading-room",
+  "revision": 1,
+  "title": "Mara Vale / editorial reading room",
+  "primaryFamily": "editorial",
+  "assetMinimum": "one-image",
+  "fitSignals": [
+    "professional-service",
+    "type-content",
+    "real-copy",
+    "process",
+    "collection",
+    "sparse-media",
+    "action"
+  ],
+  "visitorTasks": [
+    "Evaluate a practice",
+    "Understand a process"
+  ],
+  "organizingIdea": "An editorial opening explains the reading practice, then pairs a feature diagram with a quiet publication index.",
+  "brief": {
+    "fictional": true,
+    "facts": {
+      "name": "Mara Vale",
+      "offer": "Independent information design",
+      "projects": [
+        {
+          "name": "Field Notes",
+          "type": "Wayfinding study",
+          "year": "2025"
+        },
+        {
+          "name": "Open Table",
+          "type": "Publication study",
+          "year": "2026"
+        }
+      ],
+      "method": [
+        "Collect the material",
+        "Find the hierarchy",
+        "Test the reading"
+      ],
+      "contact": "mara@example.test",
+      "media": [
+        "Original SVG reading diagram"
+      ]
+    },
+    "factsHash": "9545037fbd8c521a1bb28851165d50edb2cb39a42ddf48cf98dfa73d959bdf57",
+    "mediaHash": "67f1f059df254741da210de09c6b30d8a5073023a40c56d786e33b358a25af7f"
+  },
+  "provenance": {
+    "content": "Original fictional teaching content authored for Vitris; never customer facts",
+    "media": "Original authored SVG; no external assets or fonts",
+    "rights": "Original Vitris teaching source; customer reuse requires adapting facts"
+  },
+  "storyboard": {
+    "homepage": [
+      "A place forclear reading.",
+      "The words come first.",
+      "Open Table"
+    ],
+    "interior": [
+      "Field Notes",
+      "Collect the material",
+      "Find the hierarchy",
+      "Test the reading",
+      "Open Table"
+    ],
+    "mobile": "Content order is preserved; side navigation and supporting columns reflow into the document. No essential hover interactions."
+  },
+  "designDecisions": "An editorial opening explains the reading practice, then pairs a feature diagram with a quiet publication index.",
+  "lessonIds": [
+    "cmp-type-roles",
+    "cmp-page-rhythm",
+    "cmp-semantic-grouping"
+  ],
+  "referenceIds": [
+    "pangram-pangram",
+    "gov-uk"
+  ],
+  "sourcePath": "mara-reading-room",
+  "homepage": "/",
+  "interior": "/detail",
+  "status": "compiled, automated checks passed, assistant visual review recorded; human preference pending",
+  "humanPreference": null,
+  "renderEvidence": [
+    {
+      "route": "/",
+      "viewport": {
+        "width": 1440,
+        "height": 900
+      },
+      "capturedAt": "2026-10-05T15:53:22.106Z",
+      "browser": "153.0.8010.12",
+      "preview": {
+        "path": "previews/mara-reading-room-home-1440.png",
+        "sha256": "10becbd3cd86191681ab7b339d21f2294a5896c8d4f9b33f8e0b230e6335360e"
+      },
+      "compiledHash": "d6e61b142238664635d0fb9abc3330a9b24a7fa97ad957cda98f73c2d6a7397b",
+      "automated": {
+        "errors": [],
+        "axeViolations": [],
+        "metrics": {
+          "overflow": false,
+          "h1": 1,
+          "brokenImages": [],
+          "internalLinks": [
+            "/",
+            "/detail",
+            "/detail",
+            "/detail#reading"
+          ]
+        },
+        "firstFocus": {
+          "tag": "A",
+          "text": "Skip to content",
+          "outline": "solid",
+          "width": "2px"
+        }
+      },
+      "visualReview": {
+        "assessor": "assistant",
+        "reviewedAt": "2026-10-05T16:08:16.891949+00:00",
+        "scope": "desktop/mobile full-page contact-sheet inspection; text hierarchy, reading order, overflow and matched-pair distinction",
+        "assessment": "Clear organization and readable narrow layout; no visual collision observed. Functional checks are automated, human preference is pending."
+      }
+    },
+    {
+      "route": "/",
+      "viewport": {
+        "width": 390,
+        "height": 844
+      },
+      "capturedAt": "2026-10-05T15:53:23.136Z",
+      "browser": "153.0.8010.12",
+      "preview": {
+        "path": "previews/mara-reading-room-home-390.png",
+        "sha256": "628943d761b44a0ff9ea6f67438644088dd4aea25ab3f94d682253dd5b282374"
+      },
+      "compiledHash": "d6e61b142238664635d0fb9abc3330a9b24a7fa97ad957cda98f73c2d6a7397b",
+      "automated": {
+        "errors": [],
+        "axeViolations": [],
+        "metrics": {
+          "overflow": false,
+          "h1": 1,
+          "brokenImages": [],
+          "internalLinks": [
+            "/",
+            "/detail",
+            "/detail",
+            "/detail#reading"
+          ]
+        },
+        "firstFocus": {
+          "tag": "A",
+          "text": "Skip to content",
+          "outline": "solid",
+          "width": "2px"
+        }
+      },
+      "visualReview": {
+        "assessor": "assistant",
+        "reviewedAt": "2026-10-05T16:08:16.891949+00:00",
+        "scope": "desktop/mobile full-page contact-sheet inspection; text hierarchy, reading order, overflow and matched-pair distinction",
+        "assessment": "Clear organization and readable narrow layout; no visual collision observed. Functional checks are automated, human preference is pending."
+      }
+    },
+    {
+      "route": "/detail",
+      "viewport": {
+        "width": 1440,
+        "height": 900
+      },
+      "capturedAt": "2026-10-05T15:53:24.219Z",
+      "browser": "153.0.8010.12",
+      "preview": {
+        "path": "previews/mara-reading-room-interior-1440.png",
+        "sha256": "4c0e6792a4ea164e2508bd5f9effb2c6f5beb296ed5c204f6dfd5fbe4205e0f3"
+      },
+      "compiledHash": "334230bc6e564fccb2ead7487b90160cc85e9c906bb42c4b2b4726ad01fdb3df",
+      "automated": {
+        "errors": [],
+        "axeViolations": [],
+        "metrics": {
+          "overflow": false,
+          "h1": 1,
+          "brokenImages": [],
+          "internalLinks": [
+            "/"
+          ]
+        },
+        "firstFocus": {
+          "tag": "A",
+          "text": "Skip to content",
+          "outline": "solid",
+          "width": "2px"
+        }
+      },
+      "visualReview": {
+        "assessor": "assistant",
+        "reviewedAt": "2026-10-05T16:08:16.891949+00:00",
+        "scope": "desktop/mobile full-page contact-sheet inspection; text hierarchy, reading order, overflow and matched-pair distinction",
+        "assessment": "Clear organization and readable narrow layout; no visual collision observed. Functional checks are automated, human preference is pending."
+      }
+    },
+    {
+      "route": "/detail",
+      "viewport": {
+        "width": 390,
+        "height": 844
+      },
+      "capturedAt": "2026-10-05T15:53:25.285Z",
+      "browser": "153.0.8010.12",
+      "preview": {
+        "path": "previews/mara-reading-room-interior-390.png",
+        "sha256": "3ba40e8377097ea807292773529bc01ef6415f04367eaec62c10fbf711739ae7"
+      },
+      "compiledHash": "334230bc6e564fccb2ead7487b90160cc85e9c906bb42c4b2b4726ad01fdb3df",
+      "automated": {
+        "errors": [],
+        "axeViolations": [],
+        "metrics": {
+          "overflow": false,
+          "h1": 1,
+          "brokenImages": [],
+          "internalLinks": [
+            "/"
+          ]
+        },
+        "firstFocus": {
+          "tag": "A",
+          "text": "Skip to content",
+          "outline": "solid",
+          "width": "2px"
+        }
+      },
+      "visualReview": {
+        "assessor": "assistant",
+        "reviewedAt": "2026-10-05T16:08:16.891949+00:00",
+        "scope": "desktop/mobile full-page contact-sheet inspection; text hierarchy, reading order, overflow and matched-pair distinction",
+        "assessment": "Clear organization and readable narrow layout; no visual collision observed. Functional checks are automated, human preference is pending."
+      }
+    }
+  ]
+}

package/design-system/compositions/v2/mara-reading-room/theme/defaults.json

@@ -0,0 +1,16 @@
+{
+  "colorBg": "#ffffff",
+  "colorText": "#28262d",
+  "colorMuted": "#514d5c",
+  "colorAccent": "#5c3d7b",
+  "colorAccentText": "#ffffff",
+  "colorSurface": "#ffffff",
+  "colorSurface2": "#eaf4f0",
+  "colorBorder": "#9cb4ae",
+  "colorFocus": "#5c3d7b",
+  "fontBody": "ui-sans-serif, system-ui, sans-serif",
+  "fontDisplay": "ui-serif, Georgia, serif",
+  "radius": "0px",
+  "radiusLg": "0px",
+  "maxWidth": "1180px"
+}

package/design-system/compositions/v2/mara-specimen/components/study-mara-specimen/styles.css

@@ -0,0 +1,3 @@
+.c-study-mara-specimen{overflow-wrap:anywhere;max-width:100%;color:var(--color-text);font-family:var(--font-body)}.c-study-mara-specimen h1,.c-study-mara-specimen h2,.c-study-mara-specimen h3{color:inherit;font-family:var(--font-display);font-weight:500}.c-study-mara-specimen h1{font-size:clamp(2.6rem,6vw,6.5rem);line-height:1.06;letter-spacing:-.035em}.c-study-mara-specimen h2{font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.2}.c-study-mara-specimen p,.c-study-mara-specimen li{max-width:64ch;line-height:1.65}.c-study-mara-specimen a{color:inherit;text-underline-offset:.2em}.c-study-mara-specimen a:focus-visible,.c-study-mara-specimen summary:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}.c-study-mara-specimen nav{display:flex;gap:1.5rem;flex-wrap:wrap}.c-study-mara-specimen nav a{display:inline-flex;align-items:center;min-height:44px}.c-study-mara-specimen img,.c-study-mara-specimen svg{max-width:100%;height:auto}.c-study-mara-specimen .intro{font-size:clamp(1.2rem,2vw,1.7rem);max-width:44ch}.c-study-mara-specimen .teaching{font-size:.85rem;max-width:70ch}.c-study-mara-specimen footer{margin-top:5rem;padding-block:2rem;border-top:1px solid var(--color-border)}.c-study-mara-specimen dl div{margin-bottom:1.5rem}.c-study-mara-specimen dt{font-weight:700}.c-study-mara-specimen dd{margin:.25rem 0 0}.c-study-mara-specimen ol{padding-left:1.5rem}.c-study-mara-specimen section{scroll-margin-top:2rem}
+.c-study-mara-specimen {padding:1.5rem clamp(1rem,4vw,4rem)}.c-study-mara-specimen header{display:flex;justify-content:space-between;font-weight:700;gap:2rem}.c-study-mara-specimen header a{min-height:44px;display:flex;align-items:center}.c-study-mara-specimen .descriptor{margin:3rem 0}.c-study-mara-specimen .work-index>a{display:block;text-decoration:none;margin:4rem 0}.c-study-mara-specimen .work-index span{font-size:.9rem}.c-study-mara-specimen .work-index h1{font-family:var(--font-body);font-size:clamp(5rem,13vw,13rem);font-weight:800;line-height:.86;margin:1rem 0}.c-study-mara-specimen .work-index h2{font-family:var(--font-body);font-size:clamp(3rem,8vw,8rem);font-weight:800;line-height:1}.c-study-mara-specimen .work-index i{font-size:.6em;font-style:normal}.c-study-mara-specimen .method{display:flex;justify-content:space-between;gap:3rem;margin:6rem 0}.c-study-mara-specimen .method p{max-width:34rem}.c-study-mara-specimen .project{max-width:68rem;margin:5rem auto}.c-study-mara-specimen .project section{margin:4rem 0}.c-study-mara-specimen figure{margin:3rem 0}.c-study-mara-specimen figcaption{font-size:.8rem;margin-top:1rem}@media(max-width:700px){.c-study-mara-specimen .method{display:block}.c-study-mara-specimen .work-index h1{font-size:clamp(4rem,21vw,7rem)}.c-study-mara-specimen .project{margin-top:2rem}}
+.c-study-mara-specimen .project>h1{font-family:var(--font-body);font-weight:800;font-size:clamp(3rem,10vw,10rem)}.c-study-mara-specimen .project section{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);column-gap:4rem;align-items:start}.c-study-mara-specimen .project section h2{grid-row:span 2;font-family:var(--font-body);font-weight:800}.c-study-mara-specimen .project section a{grid-column:2}@media(max-width:700px){.c-study-mara-specimen .project section{display:block}}

package/design-system/compositions/v2/mara-specimen/components/study-mara-specimen/template.html

@@ -0,0 +1 @@
+<div class="c-study-mara-specimen"><slot></slot></div>

package/design-system/compositions/v2/mara-specimen/pages/detail/index.html

@@ -0,0 +1,5 @@
+---
+title: Mara Vale / typographic index Detail
+description: Selected work is the introduction; large project titles function as a navigable index with quieter project metadata.
+---
+<study-mara-specimen><header><a href="/">← Work index</a><a href="mailto:mara@example.test">Inquiries ↗</a></header><article class="project"><h1>Field Notes</h1><p class="intro">A fictional wayfinding study in reading hierarchy.</p><figure><svg viewBox="0 0 800 420" role="img" aria-label="Original reading hierarchy diagram: Field Notes title, route lines and destination labels"><rect width="800" height="420" fill="#faeee3"/><text x="40" y="90" font-size="64" font-family="serif" fill="#202f36">Field Notes</text><path d="M40 150H700M120 150V330M400 150V330M650 150V330" stroke="#315751" stroke-width="4" fill="none"/><text x="40" y="375" font-size="22" fill="#202f36">Arrive / Read / Find</text><circle cx="120" cy="150" r="10" fill="#c42f20"/><circle cx="400" cy="150" r="10" fill="#c42f20"/><circle cx="650" cy="150" r="10" fill="#c42f20"/></svg><figcaption>Original diagram for this teaching brief. No installed project is claimed.</figcaption></figure><section><h2>Collect the material</h2><p>Start with the words people need to read. Destinations, instructions and labels play different roles.</p></section><section><h2>Find the hierarchy</h2><p>The title establishes the subject. Routes connect it to destination labels. The diagram keeps each layer distinct without adding decorative evidence.</p></section><section><h2>Test the reading</h2><p>Read the sequence at different widths. The content must remain understandable when the visual field becomes narrow.</p><a href="mailto:mara@example.test">Discuss information design</a></section><section id="reading"><h2>Open Table</h2><p>A fictional publication study, 2026. The same reading method applies across printed and digital material.</p></section></article><footer><p class="teaching">Fictional Vitris teaching study. No services are offered or customer outcomes implied.</p><p>Mara Vale</p></footer></study-mara-specimen>

package/design-system/compositions/v2/mara-specimen/pages/index.html

@@ -0,0 +1,5 @@
+---
+title: Mara Vale / typographic index Home
+description: Selected work is the introduction; large project titles function as a navigable index with quieter project metadata.
+---
+<study-mara-specimen><header><a href="/">Mara Vale</a><a href="mailto:mara@example.test">Inquiries ↗</a></header><p class="descriptor">Independent information design</p><div class="work-index"><a href="/detail"><span>Wayfinding study / 2025</span><h1>Field<br>Notes <i>↗</i></h1></a><a href="/detail#reading"><span>Publication study / 2026</span><h2>Open Table <i>↗</i></h2></a></div><section class="method"><h2>Collect. Order. Read.</h2><p>Collect the material, find the hierarchy and test the reading. A practice focused on making information understandable.</p></section><footer><p class="teaching">Fictional Vitris teaching study. No services are offered or customer outcomes implied.</p><p>Mara Vale</p></footer></study-mara-specimen>

package/design-system/compositions/v2/mara-specimen/site.json

@@ -0,0 +1,7 @@
+{
+  "name": "Mara Vale / typographic index — fictional teaching study",
+  "slug": "mara-specimen",
+  "motion": {
+    "strength": "off"
+  }
+}

package/design-system/compositions/v2/mara-specimen/study.json

@@ -0,0 +1,244 @@
+{
+  "id": "mara-specimen",
+  "revision": 1,
+  "title": "Mara Vale / typographic index",
+  "primaryFamily": "expressive-type",
+  "assetMinimum": "one-image",
+  "fitSignals": [
+    "professional-service",
+    "type-content",
+    "real-copy",
+    "process",
+    "collection",
+    "sparse-media",
+    "action"
+  ],
+  "visitorTasks": [
+    "Evaluate a practice",
+    "Understand a process"
+  ],
+  "organizingIdea": "Selected work is the introduction; large project titles function as a navigable index with quieter project metadata.",
+  "brief": {
+    "fictional": true,
+    "facts": {
+      "name": "Mara Vale",
+      "offer": "Independent information design",
+      "projects": [
+        {
+          "name": "Field Notes",
+          "type": "Wayfinding study",
+          "year": "2025"
+        },
+        {
+          "name": "Open Table",
+          "type": "Publication study",
+          "year": "2026"
+        }
+      ],
+      "method": [
+        "Collect the material",
+        "Find the hierarchy",
+        "Test the reading"
+      ],
+      "contact": "mara@example.test",
+      "media": [
+        "Original SVG reading diagram"
+      ]
+    },
+    "factsHash": "9545037fbd8c521a1bb28851165d50edb2cb39a42ddf48cf98dfa73d959bdf57",
+    "mediaHash": "67f1f059df254741da210de09c6b30d8a5073023a40c56d786e33b358a25af7f"
+  },
+  "provenance": {
+    "content": "Original fictional teaching content authored for Vitris; never customer facts",
+    "media": "Original authored SVG; no external assets or fonts",
+    "rights": "Original Vitris teaching source; customer reuse requires adapting facts"
+  },
+  "storyboard": {
+    "homepage": [
+      "FieldNotes ↗",
+      "Open Table ↗",
+      "Collect. Order. Read."
+    ],
+    "interior": [
+      "Field Notes",
+      "Collect the material",
+      "Find the hierarchy",
+      "Test the reading",
+      "Open Table"
+    ],
+    "mobile": "Content order is preserved; side navigation and supporting columns reflow into the document. No essential hover interactions."
+  },
+  "designDecisions": "Selected work is the introduction; large project titles function as a navigable index with quieter project metadata.",
+  "lessonIds": [
+    "cmp-type-roles",
+    "cmp-collection-structure",
+    "cmp-image-art-direction"
+  ],
+  "referenceIds": [
+    "pangram-pangram",
+    "big"
+  ],
+  "sourcePath": "mara-specimen",
+  "homepage": "/",
+  "interior": "/detail",
+  "status": "compiled, automated checks passed, assistant visual review recorded; human preference pending",
+  "humanPreference": null,
+  "renderEvidence": [
+    {
+      "route": "/",
+      "viewport": {
+        "width": 1440,
+        "height": 900
+      },
+      "capturedAt": "2026-10-05T15:54:36.097Z",
+      "browser": "153.0.8010.12",
+      "preview": {
+        "path": "previews/mara-specimen-home-1440.png",
+        "sha256": "870b84d710fb860f4574c28a34b7702816e3fc3bd673a45a76a8c87fc38b3f1a"
+      },
+      "compiledHash": "3550c2c0427190939af5e2c16fc3ca4b34e1cfaf580730b51f2e0034d60ed483",
+      "automated": {
+        "errors": [],
+        "axeViolations": [],
+        "metrics": {
+          "overflow": false,
+          "h1": 1,
+          "brokenImages": [],
+          "internalLinks": [
+            "/",
+            "/detail",
+            "/detail#reading"
+          ]
+        },
+        "firstFocus": {
+          "tag": "A",
+          "text": "Skip to content",
+          "outline": "solid",
+          "width": "2px"
+        }
+      },
+      "visualReview": {
+        "assessor": "assistant",
+        "reviewedAt": "2026-10-05T16:08:16.890952+00:00",
+        "scope": "desktop/mobile full-page contact-sheet inspection; text hierarchy, reading order, overflow and matched-pair distinction",
+        "assessment": "Clear organization and readable narrow layout; no visual collision observed. Functional checks are automated, human preference is pending."
+      }
+    },
+    {
+      "route": "/",
+      "viewport": {
+        "width": 390,
+        "height": 844
+      },
+      "capturedAt": "2026-10-05T15:54:37.062Z",
+      "browser": "153.0.8010.12",
+      "preview": {
+        "path": "previews/mara-specimen-home-390.png",
+        "sha256": "3d99a6e7ebed0e109a836fc666d2201288fe1978527cdcf9e368ef981bfc1fdd"
+      },
+      "compiledHash": "3550c2c0427190939af5e2c16fc3ca4b34e1cfaf580730b51f2e0034d60ed483",
+      "automated": {
+        "errors": [],
+        "axeViolations": [],
+        "metrics": {
+          "overflow": false,
+          "h1": 1,
+          "brokenImages": [],
+          "internalLinks": [
+            "/",
+            "/detail",
+            "/detail#reading"
+          ]
+        },
+        "firstFocus": {
+          "tag": "A",
+          "text": "Skip to content",
+          "outline": "solid",
+          "width": "2px"
+        }
+      },
+      "visualReview": {
+        "assessor": "assistant",
+        "reviewedAt": "2026-10-05T16:08:16.890952+00:00",
+        "scope": "desktop/mobile full-page contact-sheet inspection; text hierarchy, reading order, overflow and matched-pair distinction",
+        "assessment": "Clear organization and readable narrow layout; no visual collision observed. Functional checks are automated, human preference is pending."
+      }
+    },
+    {
+      "route": "/detail",
+      "viewport": {
+        "width": 1440,
+        "height": 900
+      },
+      "capturedAt": "2026-10-05T15:54:38.097Z",
+      "browser": "153.0.8010.12",
+      "preview": {
+        "path": "previews/mara-specimen-interior-1440.png",
+        "sha256": "4226936502a7e3a66d3583c8ad9a0ffe52a0eb95cd8cb95c145f7e5db72778a6"
+      },
+      "compiledHash": "0c529b140a31111b9ea69d9885a5ab579f061eecb9e0e1cacad1c8642dfe602d",
+      "automated": {
+        "errors": [],
+        "axeViolations": [],
+        "metrics": {
+          "overflow": false,
+          "h1": 1,
+          "brokenImages": [],
+          "internalLinks": [
+            "/"
+          ]
+        },
+        "firstFocus": {
+          "tag": "A",
+          "text": "Skip to content",
+          "outline": "solid",
+          "width": "2px"
+        }
+      },
+      "visualReview": {
+        "assessor": "assistant",
+        "reviewedAt": "2026-10-05T16:08:16.890952+00:00",
+        "scope": "desktop/mobile full-page contact-sheet inspection; text hierarchy, reading order, overflow and matched-pair distinction",
+        "assessment": "Clear organization and readable narrow layout; no visual collision observed. Functional checks are automated, human preference is pending."
+      }
+    },
+    {
+      "route": "/detail",
+      "viewport": {
+        "width": 390,
+        "height": 844
+      },
+      "capturedAt": "2026-10-05T15:54:39.130Z",
+      "browser": "153.0.8010.12",
+      "preview": {
+        "path": "previews/mara-specimen-interior-390.png",
+        "sha256": "8f4946d321695e6ad527752a34242ea3dc28668d70a9016b30218e5fa685a437"
+      },
+      "compiledHash": "0c529b140a31111b9ea69d9885a5ab579f061eecb9e0e1cacad1c8642dfe602d",
+      "automated": {
+        "errors": [],
+        "axeViolations": [],
+        "metrics": {
+          "overflow": false,
+          "h1": 1,
+          "brokenImages": [],
+          "internalLinks": [
+            "/"
+          ]
+        },
+        "firstFocus": {
+          "tag": "A",
+          "text": "Skip to content",
+          "outline": "solid",
+          "width": "2px"
+        }
+      },
+      "visualReview": {
+        "assessor": "assistant",
+        "reviewedAt": "2026-10-05T16:08:16.890952+00:00",
+        "scope": "desktop/mobile full-page contact-sheet inspection; text hierarchy, reading order, overflow and matched-pair distinction",
+        "assessment": "Clear organization and readable narrow layout; no visual collision observed. Functional checks are automated, human preference is pending."
+      }
+    }
+  ]
+}

package/design-system/compositions/v2/mara-specimen/theme/defaults.json

@@ -0,0 +1,16 @@
+{
+  "colorBg": "#e9f54c",
+  "colorText": "#203033",
+  "colorMuted": "#405053",
+  "colorAccent": "#203033",
+  "colorAccentText": "#ffffff",
+  "colorSurface": "#e9f54c",
+  "colorSurface2": "#f9fce2",
+  "colorBorder": "#9cb4ae",
+  "colorFocus": "#a43415",
+  "fontBody": "ui-sans-serif, system-ui, sans-serif",
+  "fontDisplay": "ui-serif, Georgia, serif",
+  "radius": "0px",
+  "radiusLg": "0px",
+  "maxWidth": "1180px"
+}

package/design-system/compositions/v2/margin-journal/components/study-margin-journal/styles.css

@@ -0,0 +1,2 @@
+.c-study-margin-journal{color:var(--color-text);font-family:var(--font-body);overflow-wrap:anywhere}.c-study-margin-journal h1,.c-study-margin-journal h2,.c-study-margin-journal h3{font-family:var(--font-display);color:inherit}.c-study-margin-journal p,.c-study-margin-journal li{line-height:1.6}.c-study-margin-journal a{color:inherit;text-underline-offset:.2em}.c-study-margin-journal a:focus-visible,.c-study-margin-journal summary:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}.c-study-margin-journal img,.c-study-margin-journal svg{max-width:100%;height:auto}.c-study-margin-journal table{border-collapse:collapse;width:100%}.c-study-margin-journal th,.c-study-margin-journal td{text-align:left;padding:.8rem;border-bottom:1px solid var(--color-border)}.c-study-margin-journal .teaching{font-size:.85rem;line-height:1.5}.c-study-margin-journal nav a{display:inline-flex;align-items:center;min-height:44px}
+.c-study-margin-journal {padding:2rem 4rem;max-width:1300px;margin:auto}.c-study-margin-journal header{display:grid;grid-template-columns:1fr 1fr auto;gap:2rem;align-items:start;border-bottom:1px solid var(--color-border);padding-bottom:1.5rem}.c-study-margin-journal header>a:first-child{font-weight:800;letter-spacing:.12em;font-family:var(--font-body);text-decoration:none}.c-study-margin-journal header p{margin:0;font-size:.9rem}.c-study-margin-journal .issue{display:grid;grid-template-columns:1fr 1.3fr;gap:5rem;margin:5rem 0}.c-study-margin-journal h1{font-size:clamp(2.8rem,5vw,5rem);line-height:1.1;letter-spacing:-.035em;font-weight:400}.c-study-margin-journal .issue aside>p{max-width:30ch}.c-study-margin-journal .contents>a{display:block;margin:0 0 3rem;text-decoration:none}.c-study-margin-journal .contents span{font-family:var(--font-body);font-size:.8rem}.c-study-margin-journal .contents h2{font-weight:400;font-size:clamp(1.8rem,3vw,3rem);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em;margin:.5rem 0}.c-study-margin-journal .colophon{font-size:.85rem;max-width:70ch;border-top:1px solid var(--color-border);padding:2rem 0}.c-study-margin-journal .essay-title{margin:4rem 0 3rem;text-align:center}.c-study-margin-journal .reading{display:grid;grid-template-columns:1fr 3fr;gap:4rem;max-width:950px;margin:0 auto 5rem}.c-study-margin-journal .reading aside{font-family:var(--font-body);font-size:.85rem;padding-top:1rem}.c-study-margin-journal article{font-size:1.15rem;max-width:58ch;font-family:var(--font-display)}.c-study-margin-journal .lead{font-size:1.6rem;line-height:1.5}.c-study-margin-journal article p{margin-bottom:1.5rem}.c-study-margin-journal article h2{font-size:1.8rem;font-weight:400;margin-top:3rem}.c-study-margin-journal blockquote{margin:2rem 0;padding:1rem 0 1rem 2rem;border-left:2px solid var(--color-accent);font-style:italic}@media(max-width:750px){.c-study-margin-journal {padding:1.5rem 1rem}.c-study-margin-journal header{grid-template-columns:1fr 1fr;gap:1rem}.c-study-margin-journal header>a:last-child{grid-column:1/3}.c-study-margin-journal .issue,.c-study-margin-journal .reading{display:block;margin:3rem 0}.c-study-margin-journal .contents{margin-top:3rem}.c-study-margin-journal .reading aside{max-width:38ch;border-left:2px solid var(--color-border);padding:0 0 0 1rem;margin-bottom:2rem}.c-study-margin-journal .essay-title{text-align:left}.c-study-margin-journal article{font-size:1.05rem}.c-study-margin-journal .lead{font-size:1.3rem}}

package/design-system/compositions/v2/margin-journal/components/study-margin-journal/template.html

@@ -0,0 +1 @@
+<div class="c-study-margin-journal"><slot></slot></div>

package/design-system/compositions/v2/margin-journal/pages/detail/index.html

@@ -0,0 +1,5 @@
+---
+title: Margin / annotated reading Detail
+description: An issue contents list introduces the publication; interior marginal notes support a sustained reading column.
+---
+<study-margin-journal><header><a href="/">MARGIN<br>JOURNAL</a><p>Issue 01 / Essay 01</p><a href="/">Contents</a></header><div class="essay-title"><p>Reading the ordinary</p><h1>A room for<br>a paragraph</h1></div><div class="reading"><aside><p>Reading note / 01</p><p>A measure gives a sentence somewhere to arrive.</p></aside><article><p class="lead">A paragraph asks for a little space. It needs enough width to carry a thought and enough quiet around it to let that thought settle.</p><p>Imagine a table beside a window. The page is small, the light changes, and there is time to return to the first line. The setting does not supply the meaning. It makes the meaning easier to hold.</p><h2 id="caption">What a caption holds</h2><p>A caption stays near the thing it names. It can explain what a reader is looking at, where it belongs in the argument, or why a detail matters. When it drifts away, the reader must make that connection alone.</p><blockquote>A useful margin supports a thought without competing for the first word.</blockquote><p>Notes have another rhythm. They interrupt softly and let the main sentence continue. Their smaller measure gives them a supporting role; their position makes the relationship visible.</p><h2 id="pause">The pause between pages</h2><p>A heading is a place to breathe. It names the change before the next paragraph asks for attention. The space around it can tell the reader that a new part has begun.</p><p>On a narrow page, the margin returns to the document. A note follows the passage it belongs to. The order of the thought matters more than the original geometry.</p><p>The page ends by returning to its contents. Another essay may carry the question further; this one has made a small room for it.</p><a href="/">Return to issue contents →</a></article></div><div class="colophon"><p class="teaching">Fictional Vitris teaching study. Names, offers and project details are invented; no customer outcomes are implied.</p></div></study-margin-journal>

package/design-system/compositions/v2/margin-journal/pages/index.html

@@ -0,0 +1,5 @@
+---
+title: Margin / annotated reading Home
+description: An issue contents list introduces the publication; interior marginal notes support a sustained reading column.
+---
+<study-margin-journal><header><a href="/">MARGIN<br>JOURNAL</a><p>Issue 01<br>Reading the ordinary</p><a href="/detail">Read the lead essay</a></header><div class="issue"><aside><p>From the editor</p><h1>Make room<br>for reading.</h1><p>A small publication about the places where words and daily life meet.</p></aside><div class="contents"><p>In this issue</p><a href="/detail"><span>01 / Essay</span><h2>A room for a paragraph</h2></a><a href="/detail#caption"><span>02 / Note</span><h2>What a caption holds</h2></a><a href="/detail#pause"><span>03 / Reflection</span><h2>The pause between pages</h2></a></div></div><div class="colophon"><p>Words first. Illustrations only where they explain a relationship.</p><p class="teaching">Fictional Vitris teaching study. Names, offers and project details are invented; no customer outcomes are implied.</p></div></study-margin-journal>

package/design-system/compositions/v2/margin-journal/site.json

@@ -0,0 +1,7 @@
+{
+  "name": "Margin / annotated reading \u2014 fictional teaching study",
+  "slug": "margin-journal",
+  "motion": {
+    "strength": "off"
+  }
+}