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

package/design-system/knowledge/v3/lessons/cmp-collection-structure.md

@@ -0,0 +1,17 @@
+# Choose collections by how visitors inspect them
+
+ID: cmp-collection-structure. Source: [S18](https://www.nngroup.com/articles/cards-component/).
+
+Teach distinctions among scanning a known category, browsing varied objects, ranking options, and opening details. Select lists, grids, cards, indexes, or editorial groups accordingly. Cards are neither mandatory nor forbidden.
+
+Application A: comparable services align names and scope in a compact index. Application B: varied projects use image-and-text groups appropriate to different evidence.
+
+Counterexample: comparable attributes occupy unpredictable positions in decorative cards.
+
+Mobile: retain scan order, item boundaries, and understandable link behavior; avoid nested competing links.
+
+Storyboard: record the collection task, ordering, and equal or unequal emphasis. Review: find a specific item and compare relevant items. A novel arrangement earns no credit if it makes the task harder.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-comparison.md

@@ -0,0 +1,17 @@
+# Make comparisons explicit and fair
+
+ID: cmp-comparison. Sources: [S18](https://www.nngroup.com/articles/cards-component/), [S22](https://www.w3.org/WAI/WCAG22/Understanding/meaningful-sequence.html).
+
+Teach actual dimensions of a choice: scope, suitability, inclusions, supported timing, and next step. Use when comparable facts exist. Avoid invented tiers, superiority claims, or a default winner.
+
+Application A: a semantic table aligns shared attributes. Application B: a needs-based guide pairs situations with relevant services when tabular comparison would be artificial.
+
+Counterexample: equal plan cards contain incomparable claims, suggesting equivalence the evidence does not support.
+
+Mobile: preserve labels and row/column meaning. Appropriate accessible overflow or labeled sequences may work; neither is universal.
+
+Storyboard: state the decision and comparison dimensions. Review: answer the visitor's choice question and check that essential qualifications remain visible and understandable.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-contextual-action.md

@@ -0,0 +1,17 @@
+# Position actions at decision moments
+
+ID: cmp-contextual-action. Sources: [S06](https://design.google/library/expressive-material-design-google-research), [S24](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html).
+
+Teach actions as a reasonable next step with accurate labels and destinations. Placement and nearby evidence can provide emphasis. Use supported inquiry, call, visit, detail, or real booking behavior.
+
+Application A: a service scope ends with an inquiry carrying the relevant service choice. Application B: a visit page keeps contact options beside hours and location.
+
+Counterexample: repeated action pairs interrupt every paragraph; a sticky button hides the facts needed to decide. An inquiry must not promise confirmed scheduling.
+
+Mobile: test target spacing, focus, and overlap. Preserve explicit project preferences while labeling accessibility authority accurately.
+
+Storyboard: reuse action fields; add a located observation for significant placement decisions. Review: locate, understand, and execute the action. Distinguish mocked local success from a live integration outcome.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-contrastive-critique.md

@@ -0,0 +1,17 @@
+# Compare alternatives and critique outcomes
+
+ID: cmp-contrastive-critique. Pilot lesson. Sources: [S09](https://arxiv.org/abs/2403.11164), [S10](https://discovery.ucl.ac.uk/10195027/1/Generative%20AI%20enhances%20individual%20creativity%20but%20reduces%20the%20collective%20diversity%20of%20novel%20content.pdf), [S11](https://hci.stanford.edu/publications/2010/parallel-prototyping/ParallelPrototyping2010-final.pdf), [S29](https://playwright.dev/docs/test-snapshots).
+
+Teach bounded comparison of different organizations of identical evidence. Compare how each serves the visitor. Exact user directions and routine controls need no invented alternatives.
+
+Application A: project-first and needs-first arrangements use the same facts and media. Application B: sparse-media proposals differ in whether preparation or scope comparison carries the page.
+
+Counterexample: nearly identical split heroes receive different names and generic praise.
+
+Mobile: compare consequential narrow arrangements too. Larger exploration follows existing profile budgets.
+
+Storyboard: retain brief alternative rationales only where useful. Review: observe pixels before reading the author's explanation, then reconcile intent and outcome. Keep quality, distinctiveness, and factual correctness separate; preserve successful identity during repair.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-disclosure.md

@@ -0,0 +1,17 @@
+# Reveal optional detail without hiding the answer
+
+ID: cmp-disclosure. Sources: [S19](https://design-system.service.gov.uk/components/details/), [S20](https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/), [S28](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover).
+
+Teach essential explanation versus optional depth. Use disclosures for exceptional conditions, extra specifications, or annotations. Keep the core decision understandable without opening everything.
+
+Application A: visible service scope includes optional technical details. Application B: an annotated object offers clearly labeled explanatory notes with in-flow fallback.
+
+Counterexample: primary offer, important price qualifications, and all proof are hidden in accordions.
+
+Mobile: preserve labels, comfortable interaction, focus, and expanded content order. Reuse tested behavior or appropriate native elements.
+
+Storyboard: distinguish visible/revealed content and fallback. Review: inspect closed/open states and execute keyboard/touch paths. An initial screenshot cannot establish disclosure functionality.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-evidence-form.md

@@ -0,0 +1,17 @@
+# Derive form from a business relationship
+
+ID: cmp-evidence-form. Pilot lesson. Sources: [S07](https://www.pentagram.com/work/hiut), [S08](https://www.pentagram.com/work/isomorphic-labs).
+
+Teach a useful relationship in actual material: whole/detail, diagnosis/repair, source/result, local place/service reach, or preparation/meeting. Let it influence hierarchy across the page. Use verified facts and inspected assets; the visual metaphor remains a design hypothesis. Avoid imposing a metaphor on a straightforward task.
+
+Application A: connect a completed restoration to a detail and the intervention it illustrates. Application B: connect a visitor's advisory question to preparation and the supported consultation output. Scale, adjacency, and sequence differ between them.
+
+Counterexample: technical stamps and workshop textures imply manufacturing authority without evidence.
+
+Mobile: preserve the explanatory relationship when adjacent content becomes sequential.
+
+Storyboard: name the relationship and supporting facts/assets. Review: locate its visible effect and distinguish business meaning from interchangeable decoration.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-image-art-direction.md

@@ -0,0 +1,17 @@
+# Treat crop as a semantic decision
+
+ID: cmp-image-art-direction. Source: [S17](https://web.dev/learn/design/picture-element).
+
+Teach crop, focal point, framing, and copy placement according to what an image explains. Use approved media with a meaningful subject or context. Avoid enlarging weak assets or removing evidence needed for honest interpretation.
+
+Application A: a wide project view gains a narrower mobile crop that preserves the relevant subject. Application B: an entire product remains uncropped because its outline matters.
+
+Counterexample: the described feature disappears from the crop, or generic imagery is made to appear like customer proof.
+
+Mobile: select an appropriate existing asset or derivative, dimensions, and accurate alternative text; center-cropping is not automatically correct.
+
+Storyboard: keep media IDs and name the subject that must remain visible. Review: compare the rendered crop with its caption and supported claim; check loading and dimensions.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-image-sequence.md

@@ -0,0 +1,17 @@
+# Build an image sequence with a purpose
+
+ID: cmp-image-sequence. Sources: [S07](https://www.pentagram.com/work/hiut), [S17](https://web.dev/learn/design/picture-element).
+
+Teach editing across complementary images: context, detail, people, process, and outcome. Use actual inventory relationships. One good image can suffice; a mosaic does not justify redundant images.
+
+Application A: whole project, close detail, then a supported explanation. Application B: a product range uses consistent scale for comparison, with a material detail where useful.
+
+Counterexample: arbitrary tile sizes imply unsupported priority, or unordered images imply chronology.
+
+Mobile: retain sequence and captions. A carousel must not conceal the only significant proof; static sequences are valid.
+
+Storyboard: identify each asset's contribution and relationship to neighbors. Review: assess whether the sequence communicates more than its individual images, at actual reading scale rather than by image count.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-interactive-explanation.md

@@ -0,0 +1,17 @@
+# Let visitors investigate a real question
+
+ID: cmp-interactive-explanation. Sources: [S20](https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/), [S30](https://web.dev/articles/vitals), [S32](https://www.gov.uk/service-manual/technology/using-progressive-enhancement).
+
+Teach interaction as a way to compare supported options, inspect a real before/after, explore service reach, or understand a documented relationship. Define the model and its limits first.
+
+Application A: an authentic before/after pair offers an accessible control and static access to both images. Application B: a service guide maps stated needs to relevant explanations without pretending to diagnose or quote.
+
+Counterexample: a slider produces impressive estimates with no supported underlying model.
+
+Mobile: provide working controls, keyboard access, static equivalents, and responsive feedback.
+
+Storyboard: record question, inputs, mapping, fallback, and expected action. Review: test representative and edge inputs, factual boundaries, and actual outputs rather than visual polish alone.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-local-information.md

@@ -0,0 +1,17 @@
+# Make practical local information usable
+
+ID: cmp-local-information. Sources: [S03](https://www.nngroup.com/articles/gestalt-proximity/), [S19](https://design-system.service.gov.uk/components/details/).
+
+Teach address, hours, contact methods, service areas, directions, and access notes as a useful interface. Use verified facts that matter to the visit/contact task. Avoid invented availability, travel times, coordinates, or opening status.
+
+Application A: a venue groups arrival details and hours with a real directions link. Application B: a mobile service explains its coverage and inquiry expectations without implying a public storefront.
+
+Counterexample: a decorative map dominates while phone and hours are difficult to find.
+
+Mobile: keep practical information readable and actionable. Embedded maps need a text/link alternative.
+
+Storyboard: identify the visit question and referenced facts. Review: determine whether, where, and how to visit or inquire from the actual page.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-motion-continuity.md

@@ -0,0 +1,17 @@
+# Use motion to explain continuity
+
+ID: cmp-motion-continuity. Sources: [S25](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API), [S26](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), [S23](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html).
+
+Teach motion that explains a state change, progression, or relationship. Design the static experience first. Use consistent movement character where motion has a purpose.
+
+Application A: a project thumbnail transitions into its detail context. Application B: a process explanation highlights the current relationship while essential text stays available.
+
+Counterexample: parallax delays access to service scope, or a failed reveal keeps proof invisible.
+
+Mobile: preserve normal scrolling, reduced motion, static fallback, and focus. Verify specific feature support, interruption, and repeated navigation. Do not add effects solely to diversify output.
+
+Storyboard: state purpose, change, fallback, and expected observation. Review: execute motion states and inspect reduced-motion/no-enhancement behavior as well as stable captures.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-narrative-continuity.md

@@ -0,0 +1,17 @@
+# Let a narrative cross section boundaries
+
+ID: cmp-narrative-continuity. Sources: [S01](https://every-layout.dev/rudiments/composition/), [S04](https://www.ibm.com/design/language/layout/tips-and-techniques/).
+
+Teach that semantic sections need not appear as independent rectangular bands. A sustained story can connect an introduction, details, and action through a shared axis or annotation convention. Use when questions concern the same object; retain useful scanning boundaries.
+
+Application A: project context continues into detailed evidence without restarting the eyebrow-heading-button pattern. Application B: an in-page index accompanies a sustained reading column with modest subheadings.
+
+Counterexample: overlap hides headings or makes the route structure ambiguous.
+
+Mobile: put spanning or sticky material back into normal flow when necessary. Preserve headings and reading order.
+
+Storyboard: combine page intent with relationships that may cross adjacent sections. Review: decide whether continuity aids understanding or merely removes useful signposts.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-navigation.md

@@ -0,0 +1,17 @@
+# Make navigation express the visitor's choices
+
+ID: cmp-navigation. Sources: [S20](https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/), [S06](https://design.google/library/expressive-material-design-google-research).
+
+Teach orientation through labels, location, grouping, and useful actions. Geometry follows route complexity and direction. Avoid fixed item counts and industry-specific header templates.
+
+Application A: a small practice exposes essential routes and an inquiry path. Application B: a broad catalog uses route groups and contextual interior navigation.
+
+Counterexample: an unlabeled experimental menu conceals the service architecture, or an oversized menu overwhelms a simple site.
+
+Mobile: preserve labels, keyboard access, dismissal, and the primary task. A drawer is optional.
+
+Storyboard: record shared chrome at page/site scope, without adding artificial navigation sections. Review: execute route-finding tasks and inspect focus, overlay obstruction, and sticky behavior.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-page-rhythm.md

@@ -0,0 +1,17 @@
+# Shape rhythm across the page
+
+ID: cmp-page-rhythm. Source: [S04](https://www.ibm.com/design/language/layout/tips-and-techniques/).
+
+Teach pacing through information density, visual area, reading effort, and emphasis. Follow visitor questions rather than mechanically alternating backgrounds. Repeated directories can remain regular because scanning is a repeated task.
+
+Application A: an expansive project image leads into a compact explanation and detailed service choices. Application B: essential practical facts lead into a calm explanation and short inquiry.
+
+Counterexample: full-screen treatment makes minor facts as demanding as the main offer. Random layout variation is another failure.
+
+Mobile: reassess informational pacing and scroll length instead of preserving all desktop whitespace.
+
+Storyboard: connect transition, density, and emphasis fields to the page sequence. Review: inspect a full-page overview plus normal-size sections; locate excessive pauses or undifferentiated weight with a visitor consequence.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-process.md

@@ -0,0 +1,17 @@
+# Explain sequence, dependencies, and responsibility
+
+ID: cmp-process. Sources: [S22](https://www.w3.org/WAI/WCAG22/Understanding/meaningful-sequence.html), [S20](https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/).
+
+Teach the distinction among chronological stages, branches, parallel responsibilities, and simple lists. Numbers and connectors imply factual relationships. Use supported processes; do not turn every offer into an invented three-step sequence.
+
+Application A: a vertical narrative explains preparation, visit, and follow-up. Application B: a diagram distinguishes customer-supplied materials from provider work, with a text equivalent.
+
+Counterexample: equal step cards conceal dependencies or imply an unsupported completion time.
+
+Mobile: preserve order and ownership; diagrams may become labeled groups. Essential content stays available without animation.
+
+Storyboard: name the sequence and distinguish optional from required steps. Review: trace the process and compare visual, programmatic, and factual order.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-proof-adjacency.md

@@ -0,0 +1,17 @@
+# Put proof beside the proposition it supports
+
+ID: cmp-proof-adjacency. Pilot lesson. Sources: [S03](https://www.nngroup.com/articles/gestalt-proximity/), [S27](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning).
+
+Teach integration of captions, credentials, quotations, measurements, and project details with specific claims. Annotation may be inline, adjacent, below an image, or optional overlay. Use only factual associations supported by source evidence.
+
+Application A: a workmanship detail has a nearby explanation and relevant service link. Application B: a credential sits beside the scope it qualifies, without a detached badge wall.
+
+Counterexample: a general testimonial appears to endorse a specific project it never addressed.
+
+Mobile: essential overlay content becomes readable in-flow material. Optional annotations require suitable controls and fallback.
+
+Storyboard: express supports/annotates relationships while retaining fact/media references. Review: verify visible association and factual scope separately. A screenshot cannot establish the truth of a claim.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-responsive-recomposition.md

@@ -0,0 +1,17 @@
+# Recompose for available space and reading order
+
+ID: cmp-responsive-recomposition. Pilot lesson. Sources: [S12](https://web.dev/articles/baseline-in-action-container-queries), [S21](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html), [S22](https://www.w3.org/WAI/WCAG22/Understanding/meaningful-sequence.html).
+
+Teach preservation of meaning as geometry changes. Plan reading order, subject visibility, grouping, and action access before breakpoints. Local container width may differ from the viewport.
+
+Application A: side annotations become captions directly after an image. Application B: comparisons retain explicit attribute labels when columns no longer fit.
+
+Counterexample: visual reordering conflicts with keyboard sequence, or a sticky panel occupies most of the zoomed viewport.
+
+Mobile: test configured phone width, intermediate widths, reflow conditions, and relevant breakpoints. Simple wrapping may be enough; a stack is not automatically a failure.
+
+Storyboard: extend existing mobileTransformation with important element relations and observations. Review: confirm association, order, readability, and action access in renders and actual browser tasks.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-semantic-grouping.md

@@ -0,0 +1,17 @@
+# Group by meaning before drawing containers
+
+ID: cmp-semantic-grouping. Pilot lesson. Sources: [S01](https://every-layout.dev/rudiments/composition/), [S03](https://www.nngroup.com/articles/gestalt-proximity/).
+
+Teach grouping through proximity, shared alignment, whitespace, rules, or enclosure. Decide which items belong together before choosing a card or background. Use for labels, descriptions, captions, prices, actions, and proof. Avoid visually equating unrelated information.
+
+Application A: image, project location, note, and service link form one evidence group through caption alignment. Application B: service name and scope form an unboxed entry separated from neighbors by a rule.
+
+Counterexample: a quotation appears closer to the wrong project and seems to endorse it.
+
+Mobile: captions stay with referents; within-group spacing remains distinguishable from spacing between groups. Containers may disappear without losing meaning.
+
+Storyboard: identify meaningful element groups and their relationships. Review: determine which items appear associated and whether this matches the actual content.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-shared-alignment.md

@@ -0,0 +1,17 @@
+# Connect elements through shared alignment
+
+ID: cmp-shared-alignment. Pilot lesson. Sources: [S05](https://www.ibm.com/design/language/2x-grid/), [S13](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Subgrid).
+
+Teach a site-owned alignment system across local component boundaries: a label rail, nested tracks, aligned baselines, or shared image edge. Use for metadata, editorial sequences, and comparison. Avoid elaborate grids for simple content.
+
+Application A: titles, captions, and service labels share a rail while image spans vary. Application B: a centered introduction opens into aligned comparison columns. Symmetry remains valid when useful.
+
+Counterexample: label widths and image edges change between sections without a content reason.
+
+Mobile: collapse unused tracks into meaningful groups. Subgrid is optional; independent Grid/Flexbox arrangements remain valid.
+
+Storyboard: describe the shared alignment relationship. Review: inspect edges, baselines, narrow layouts, missing values, and long text. The grid is an implementation aid, not a requirement to fill every cell.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-sparse-media.md

@@ -0,0 +1,17 @@
+# Give sparse-media sites useful visual artifacts
+
+ID: cmp-sparse-media. Sources: [S01](https://every-layout.dev/rudiments/composition/), [S02](https://www.nngroup.com/articles/principles-visual-design/).
+
+Teach expressive organization of real content through checklists, scope ledgers, document structures, decision maps, timelines, and carefully set language. Use when photography cannot carry the page. These possibilities do not define a sparse-site template.
+
+Application A: a consultation page organizes preparation and meeting scope. Application B: a technical service distinguishes included and excluded work in a readable ledger.
+
+Counterexample: fabricated dashboards, results, logos, or portraits supply false credibility. Illustrative samples must not masquerade as actual deliverables.
+
+Mobile: simplify dense artifacts while preserving hierarchy and qualifications.
+
+Storyboard: state which uncertainty the artifact resolves and which facts support it. Review: assess clarity and specificity without penalizing absent photography or rewarding generic diagrams.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-surfaces-motifs.md

@@ -0,0 +1,17 @@
+# Derive surfaces and motifs from identity
+
+ID: cmp-surfaces-motifs. Sources: [S07](https://www.pentagram.com/work/hiut), [S08](https://www.pentagram.com/work/isomorphic-labs).
+
+Teach recurrence of geometry, rules, captions, texture, color relationships, or framing across different page purposes. Use when it clarifies identity or grouping. Avoid motif quotas and forced literal metaphors.
+
+Application A: a material practice uses detail framing and a recurring annotation convention. Application B: an information service uses measured rules and a consistent label hierarchy with entirely different colors and type.
+
+Counterexample: each section introduces a different decoration; alternatively, one repeated decorated box erases content distinctions.
+
+Mobile: motifs can simplify without losing the identity. They must not crowd content or rely on tiny details. Colors remain token-driven.
+
+Storyboard: reference direction decisions and identity invariants. Review: identify coherence across homepage/interior while allowing different layouts.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-text-shape.md

@@ -0,0 +1,17 @@
+# Compose with real language and text shape
+
+ID: cmp-text-shape. Source: [S14](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-wrap-style).
+
+Teach composition with real headline lengths, qualifications, and action labels. Adjust measure, wrapping, layout, and scale together. Approved meaning constrains copy changes. Avoid brittle manual breaks; deliberate editorial breaks are acceptable when tested.
+
+Application A: a concise statement uses a narrow measure beside an image. Application B: a longer precise offer spans above supporting facts without becoming an unsupported slogan.
+
+Counterexample: shrink all text or remove an important qualification to preserve a reference silhouette.
+
+Mobile: normal wrapping must remain legible when enhancements are unavailable. Test long names, translated text, and zoom.
+
+Storyboard: record information hierarchy rather than exact line counts. Review: locate clipping, awkward fragments, excessive measures, or changed meaning. Use the existing editorial revision path for copy changes.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-type-roles.md

@@ -0,0 +1,17 @@
+# Give typography distinct jobs
+
+ID: cmp-type-roles. Pilot lesson. Sources: [S15](https://design.google/library/google-sans-flex-font), [S16](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-optical-sizing).
+
+Teach roles for orienting labels, expressive statements, explanation, precise data, captions, and actions. Differentiate through width, weight, case, spacing, optical size, or family without requiring many fonts. Do not assign fonts by industry stereotype.
+
+Application A: compact labels support broad expressive headings and ordinary reading text. Application B: a quiet service page uses modest display contrast and tabular numerals for practical details.
+
+Counterexample: display styling spreads into descriptions and controls, reducing scanability.
+
+Mobile: preserve reading comfort, zoom, glyph coverage, and fallback metrics. Use only axes present in licensed fonts.
+
+Storyboard: describe consequential type roles and emphasis. Review: inspect actual copy at its displayed size, including loaded and fallback font behavior.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/lessons/cmp-unequal-emphasis.md

@@ -0,0 +1,17 @@
+# Allocate emphasis according to importance
+
+ID: cmp-unequal-emphasis. Pilot lesson. Sources: [S02](https://www.nngroup.com/articles/principles-visual-design/), [S06](https://design.google/library/expressive-material-design-google-research).
+
+Teach primary, supporting, and deliberately equal roles from visitor priorities. Adjust area, placement, contrast, type, image scale, and surrounding space together. Larger is not automatically better. Preserve equal treatment for neutral comparison and homogeneous indexes.
+
+Application A: an urgent service emphasizes a contact route beside essential scope. Application B: a considered purchase emphasizes work evidence, with a quieter action following explanation.
+
+Counterexample: every section repeats the same oversized heading, badge, image, and action pair.
+
+Mobile: preserve priority without letting decorative text displace the proposition or action.
+
+Storyboard: reuse emphasis and emphasisReason to state the choice. Review: compare visible attention cues with the intended priority. Do not require a focal point in every arbitrary screenshot crop.
+
+## Authority and use
+
+This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.

package/design-system/knowledge/v3/manifest.json

@@ -0,0 +1,117 @@
+{
+  "schemaVersion": 1,
+  "lessonRelease": "2026-09-28.1",
+  "standardsRelease": "2026-09-22",
+  "labeledPreferenceData": false,
+  "releaseStatus": "teaching-material; visual-demonstrations-pending",
+  "files": [
+    {
+      "path": "catalog.json",
+      "sha256": "b28eb3fbdf62b903eb0721c66f74b7f10eb9029600ef382d38993f54ce50edeb"
+    },
+    {
+      "path": "examples/catalog.json",
+      "sha256": "8e1a0ebe82757fb7aa9471318ff9263be4b78096b5d5d74640a448c93071f2fa"
+    },
+    {
+      "path": "lessons/cmp-collection-structure.md",
+      "sha256": "035ae2c98c57e40be808740bf9f32ea1264978042ce41beaa63445face668cc9"
+    },
+    {
+      "path": "lessons/cmp-comparison.md",
+      "sha256": "0a11390213b0289ff1b140b993bbe7b7cbd30be996e944259ff525875b321c27"
+    },
+    {
+      "path": "lessons/cmp-contextual-action.md",
+      "sha256": "22029993d56769d37d22627a79eb024e9ba20980e9c3d5108f3c6a5eaa53d8ad"
+    },
+    {
+      "path": "lessons/cmp-contrastive-critique.md",
+      "sha256": "255c3699d3d3aea5ede174f1054c419650b01972a37765cb3241de1c590f077a"
+    },
+    {
+      "path": "lessons/cmp-disclosure.md",
+      "sha256": "5ae12a63ff6cc25e338eba7022f23efaa7c21fc5c5d662600d802ffe0203c7cc"
+    },
+    {
+      "path": "lessons/cmp-evidence-form.md",
+      "sha256": "7806e4e83bca268ed28bd66cc7655a22083f88dec7da3229392ce721a481af79"
+    },
+    {
+      "path": "lessons/cmp-image-art-direction.md",
+      "sha256": "7ef0817c85ce8ba99335ccadbb4ddaf74e97fb174d3218d0b629293e0db41ef9"
+    },
+    {
+      "path": "lessons/cmp-image-sequence.md",
+      "sha256": "09fd19983aeea78a0896564d93906c4b6f3cc2df4d3249fa4f42f5fb87278280"
+    },
+    {
+      "path": "lessons/cmp-interactive-explanation.md",
+      "sha256": "92cb076a7ed636b1cb6fbd103bd000c9084f4a5f997aa731afdb9ac2a911c070"
+    },
+    {
+      "path": "lessons/cmp-local-information.md",
+      "sha256": "03d8168a9f76b8e7e7cbe1a5378b1c6d8c0221429d23485e6785e44ecfb8ea58"
+    },
+    {
+      "path": "lessons/cmp-motion-continuity.md",
+      "sha256": "94cdc0445b40e97d4fb99a7d1df8265cc1fb1b6d1cb091c2d202f5f9437109ce"
+    },
+    {
+      "path": "lessons/cmp-narrative-continuity.md",
+      "sha256": "701730c6686be2188c201daaf13c2b0446b5046a32036cb43d7ade60e9047a5c"
+    },
+    {
+      "path": "lessons/cmp-navigation.md",
+      "sha256": "3fc58464abae2e48725cd7e7c09b0c01d0c172d8ea6d41d3209103095d77e806"
+    },
+    {
+      "path": "lessons/cmp-page-rhythm.md",
+      "sha256": "c2ced0ab503b033c61c3283634e7bad9a55daf56977712230c8938b1fe25f1b1"
+    },
+    {
+      "path": "lessons/cmp-process.md",
+      "sha256": "972b258304aac27af7a882d93edbddca6eefbd8626b14ffba1c885ae5a576ce2"
+    },
+    {
+      "path": "lessons/cmp-proof-adjacency.md",
+      "sha256": "3c49560bcd5b98c8c6ba341bda25b404be6fa89da4f039fcb1b229465f42a83e"
+    },
+    {
+      "path": "lessons/cmp-responsive-recomposition.md",
+      "sha256": "9edf6a1227d0e571910eebdaad4afec134e01e6c9857176eae256c195e9686b1"
+    },
+    {
+      "path": "lessons/cmp-semantic-grouping.md",
+      "sha256": "5150a7d5aac832699eac3c0957182f45385a7f10427d11b5bf23a21e763b83b2"
+    },
+    {
+      "path": "lessons/cmp-shared-alignment.md",
+      "sha256": "ec2ed8b15016f073d035025fec52458d44c0b8a43bce55f0c84c31f343263ec2"
+    },
+    {
+      "path": "lessons/cmp-sparse-media.md",
+      "sha256": "46f738dab989b5847321a6fbd9556815ce2d51a84bce847f962af934ee411869"
+    },
+    {
+      "path": "lessons/cmp-surfaces-motifs.md",
+      "sha256": "614fd6700b55e4de6a57e6c1e15f3090517c9133bef237a1fe9b89344a3974a3"
+    },
+    {
+      "path": "lessons/cmp-text-shape.md",
+      "sha256": "37721184abe4b735d90888c68003d60ddd3e1047dd5fa37ed33569bd07491909"
+    },
+    {
+      "path": "lessons/cmp-type-roles.md",
+      "sha256": "d210ce42c39dd714b71936752f92bd7d118ecfef7cf997b8751800c4c5d70bdb"
+    },
+    {
+      "path": "lessons/cmp-unequal-emphasis.md",
+      "sha256": "eeda8f7da2bd3e073a3e11445587883e436d705099b0aeb605125c4f028bf493"
+    },
+    {
+      "path": "sources.json",
+      "sha256": "0b1b773be48760d85f6a5fa575d6350196f2fcf4ef443f2e80892951d6b97094"
+    }
+  ]
+}