@hegemonart/get-design-done 1.42.0 → 1.44.0

package/reference/variable-fonts-loading.md

@@ -82,7 +82,7 @@ h1 {
 ```
 
 **Do:** Set `font-variation-settings` on a parent and let children inherit.
-**Don't:** Override `font-variation-settings` on a child while expecting inherited axes to persist — the property does not merge; it replaces entirely.
+**Don't:** Override `font-variation-settings` on a child while expecting inherited axes to persist - the property does not merge; it replaces entirely.
 
 ```css
 /* WRONG — child loses 'wght' axis set on parent */
@@ -151,9 +151,9 @@ body { font-optical-sizing: auto; }
 
 | Value | Block period | Swap period | Best for |
 |-------|-------------|-------------|----------|
-| `auto` | Browser default (usually same as `block`) | Varies | Avoid — unpredictable |
+| `auto` | Browser default (usually same as `block`) | Varies | Avoid - unpredictable |
 | `block` | ~3s invisible | Infinite swap | Icon fonts where letters must match |
-| `swap` | ~0ms invisible | Infinite swap | Body copy, headings — text visible immediately |
+| `swap` | ~0ms invisible | Infinite swap | Body copy, headings - text visible immediately |
 | `fallback` | ~100ms invisible | ~3s swap | Performance-sensitive text; graceful if font is slow |
 | `optional` | ~100ms invisible | 0s (no swap) | Decorative fonts, hero text; skip swap if font not cached |
 
@@ -224,7 +224,7 @@ Preload only the subset(s) used above the fold. Preloading unused fonts wastes b
 - **1–2 font files maximum** as a general rule. More preloads compete with images, scripts, and CSS.
 - Preload the **regular weight** (400) of the primary typeface first.
 - Preload a **bold weight** (700) only if it appears above the fold in a critical heading.
-- Never preload fonts with `font-display: optional` — the browser will skip the swap anyway on slow connections.
+- Never preload fonts with `font-display: optional` - the browser will skip the swap anyway on slow connections.
 
 ```html
 <!-- Minimal correct preload for a typical site -->
@@ -278,7 +278,7 @@ Preload only the subset(s) used above the fold. Preloading unused fonts wastes b
 
 ### Subsetting Tools
 
-**pyftsubset** (part of fonttools — Python):
+**pyftsubset** (part of fonttools - Python):
 
 ```bash
 # Install
@@ -300,7 +300,7 @@ pyftsubset inter-variable.ttf \
   --retain-gids
 ```
 
-**glyphhanger** (Node.js — analyzes a live URL and generates subset):
+**glyphhanger** (Node.js - analyzes a live URL and generates subset):
 
 ```bash
 # Install
@@ -379,8 +379,8 @@ print(f"descent-override: {descent:.0f}%")
 print(f"line-gap-override: {line_gap:.0f}%")
 ```
 
-**Do:** Tune `size-adjust` first — it has the largest visual impact. Then fine-tune ascent/descent.
-**Don't:** Use `ascent-override: 100%` blindly — 100% is the fallback default; only override when you have real metric data.
+**Do:** Tune `size-adjust` first - it has the largest visual impact. Then fine-tune ascent/descent.
+**Don't:** Use `ascent-override: 100%` blindly - 100% is the fallback default; only override when you have real metric data.
 
 ---
 
@@ -388,7 +388,7 @@ print(f"line-gap-override: {line_gap:.0f}%")
 
 ### GRAD Axis (Grade)
 
-The Grade axis (`GRAD`) adjusts apparent weight without changing the advance widths of any glyphs. This means **no layout reflow** when switching between light and dark modes — unlike changing `font-weight`, which can alter character widths.
+The Grade axis (`GRAD`) adjusts apparent weight without changing the advance widths of any glyphs. This means **no layout reflow** when switching between light and dark modes - unlike changing `font-weight`, which can alter character widths.
 
 In dark mode, light text on dark backgrounds appears heavier due to irradiation/halation. Lowering `GRAD` compensates for this optical effect.
 
@@ -427,7 +427,7 @@ body {
 
 ### Fonts with a GRAD Axis
 
-Notable typefaces: Roboto Flex, Google Fonts variable fonts from 2022+, Amstelvar. Check if a font has `GRAD` using `font-variation-settings: 'GRAD' 0` — if it has no effect the font lacks the axis.
+Notable typefaces: Roboto Flex, Google Fonts variable fonts from 2022+, Amstelvar. Check if a font has `GRAD` using `font-variation-settings: 'GRAD' 0` - if it has no effect the font lacks the axis.
 
 ---
 
@@ -446,8 +446,8 @@ System fonts load instantly (zero network request) and match the platform's nati
 | Windows 10+ | Segoe UI | 2006 |
 | Windows 11 | Segoe UI Variable | 2021 |
 | Android 4.0+ | Roboto | 2011 |
-| Linux (GNOME) | Cantarell | — |
-| Linux (KDE) | Noto Sans | — |
+| Linux (GNOME) | Cantarell | - |
+| Linux (KDE) | Noto Sans | - |
 
 ### Modern System Font Stack
 
@@ -523,9 +523,9 @@ For maximum compatibility with older browsers and to ensure San Francisco on mac
 | Mistake | Fix |
 |---------|-----|
 | `font-variation-settings` on child loses parent axes | Use CSS custom properties to compose all axes in one declaration |
-| Preloading without `crossorigin` attribute | Always add `crossorigin` — font fetches are CORS requests |
-| Using `font-display: block` on body text | Use `swap` — block causes FOIT, text invisible for up to 3s |
-| Changing `font-weight` between light/dark modes | Use `GRAD` axis — changes weight appearance without layout shift |
+| Preloading without `crossorigin` attribute | Always add `crossorigin` - font fetches are CORS requests |
+| Using `font-display: block` on body text | Use `swap` - block causes FOIT, text invisible for up to 3s |
+| Changing `font-weight` between light/dark modes | Use `GRAD` axis - changes weight appearance without layout shift |
 | Missing `font-weight` range in `@font-face` for variable font | Declare `font-weight: 100 900` so browser knows full range |
 | Subsetting variable font without `--retain-gids` | Add `--retain-gids` to pyftsubset to preserve axis interpolation |
 | Setting `font-optical-sizing: auto` alongside manual `opsz` in `font-variation-settings` | Set `font-optical-sizing: none` first, then set `'opsz'` manually |

package/reference/visual-hierarchy-layout.md

@@ -2,13 +2,13 @@
 
 <!-- Source: nextlevelbuilder/ui-ux-pro-max-skill (MIT) — data/landing.csv -->
 
-Visual hierarchy is the system by which a design communicates importance before the user consciously processes it. Every element in a layout has a perceived rank — determined by size, contrast, position, spacing, and depth — and that rank tells the eye where to go and in what order. A layout without deliberate hierarchy forces the user to negotiate with the design rather than work through it. The principles in this file apply to screens, components, and marketing pages equally.
+Visual hierarchy is the system by which a design communicates importance before the user consciously processes it. Every element in a layout has a perceived rank - determined by size, contrast, position, spacing, and depth - and that rank tells the eye where to go and in what order. A layout without deliberate hierarchy forces the user to negotiate with the design rather than work through it. The principles in this file apply to screens, components, and marketing pages equally.
 
 ---
 
 ## Z-Order and Depth Cues
 
-Shadow is the primary depth signal in modern flat design, because it mimics the physical relationship between surfaces at different altitudes. Shadows do not decorate — they locate. A surface with more shadow sits higher in the visual stack, which means it is more foregrounded and more important.
+Shadow is the primary depth signal in modern flat design, because it mimics the physical relationship between surfaces at different altitudes. Shadows do not decorate - they locate. A surface with more shadow sits higher in the visual stack, which means it is more foregrounded and more important.
 
 ### Three-Layer Shadow System
 
@@ -21,7 +21,7 @@ The standard three-layer system maps to real UI altitude needs:
 | Floating (elevation 2) | `box-shadow: 0 8px 16px rgba(0,0,0,0.12)` | Dropdowns, tooltips, popovers |
 | Overlay (elevation 3) | `box-shadow: 0 16px 32px rgba(0,0,0,0.18)` | Modals, drawers, sheets |
 
-Using only these four levels prevents visual noise from competed shadows and keeps the depth hierarchy readable. An element should never sit at the same shadow level as an element it is meant to overlay — that collapses the depth relationship.
+Using only these four levels prevents visual noise from competed shadows and keeps the depth hierarchy readable. An element should never sit at the same shadow level as an element it is meant to overlay - that collapses the depth relationship.
 
 ### Blur-as-Scrim for Modal Depth
 
@@ -33,7 +33,7 @@ A consistent z-index scale prevents the stacking context chaos that makes UI deb
 
 | Level | Value | Purpose |
 |-------|-------|---------|
-| Base | 0 | Static page content — no stacking context needed |
+| Base | 0 | Static page content - no stacking context needed |
 | Sticky | 100 | Sticky headers and footers that must stay above scrolled content |
 | Dropdown | 200 | Menus and autocomplete dropdowns that overlay adjacent content |
 | Modal | 300 | Dialogs and drawers that overlay the entire page |
@@ -45,19 +45,19 @@ Gaps of 100 between levels exist so intermediate values can be inserted without
 
 ## Whitespace as Design Element
 
-Whitespace is not empty space — it is the space that gives meaning to what surrounds it. Without whitespace, elements cannot be perceived as distinct objects; they collapse into visual noise. With intentional whitespace, proximity becomes a communication tool: elements that are close together are related, and elements that are far apart are not.
+Whitespace is not empty space - it is the space that gives meaning to what surrounds it. Without whitespace, elements cannot be perceived as distinct objects; they collapse into visual noise. With intentional whitespace, proximity becomes a communication tool: elements that are close together are related, and elements that are far apart are not.
 
 ### Micro-Spacing (Related Elements)
 
-Elements that belong together — a label and its input, an icon and its caption, a list item and its supporting text — should be separated by 4–8px. This distance signals "these are one thing" without fusing them visually. Tighter than 4px feels merged; looser than 8px starts to break the association.
+Elements that belong together - a label and its input, an icon and its caption, a list item and its supporting text - should be separated by 4–8px. This distance signals "these are one thing" without fusing them visually. Tighter than 4px feels merged; looser than 8px starts to break the association.
 
 ### Macro-Spacing (Section Separation)
 
-Distinct content sections — hero to features, features to testimonials, nav to page content — benefit from 32–64px of separation. This spacing creates visual "chapters" in the layout, giving the eye a moment to land before beginning the next section. Without this spacing, the page feels like one undifferentiated mass regardless of the visual variation within it.
+Distinct content sections - hero to features, features to testimonials, nav to page content - benefit from 32–64px of separation. This spacing creates visual "chapters" in the layout, giving the eye a moment to land before beginning the next section. Without this spacing, the page feels like one undifferentiated mass regardless of the visual variation within it.
 
 ### Premium vs. Compact
 
-More whitespace signals premium and confidence: the brand is not anxious about showing off everything at once. Less whitespace signals density and efficiency: the product respects the user's time and assumes they have a specific goal. Neither is universally correct — a data dashboard should be compact because users came to see data, while a luxury product landing page should be expansive because users came to be immersed.
+More whitespace signals premium and confidence: the brand is not anxious about showing off everything at once. Less whitespace signals density and efficiency: the product respects the user's time and assumes they have a specific goal. Neither is universally correct - a data dashboard should be compact because users came to see data, while a luxury product landing page should be expansive because users came to be immersed.
 
 The rule of thumb: **match whitespace density to the pace at which users should move through the content.** Fast task completion → compact. Consideration and exploration → generous.
 
@@ -65,15 +65,15 @@ The rule of thumb: **match whitespace density to the pace at which users should
 
 ## Asymmetry and Rhythm
 
-Symmetric layouts feel stable, balanced, and trustworthy — which makes them appropriate for institutional, financial, and governmental contexts where those qualities matter. They also feel static, because perfect balance has no direction and creates no tension.
+Symmetric layouts feel stable, balanced, and trustworthy - which makes them appropriate for institutional, financial, and governmental contexts where those qualities matter. They also feel static, because perfect balance has no direction and creates no tension.
 
-Asymmetric layouts create tension and visual interest by violating the expectation of balance. When used purposefully, asymmetry directs the eye along a path — a large element on the left creates pressure toward the right, a heavy top creates pressure downward. This directed attention is why most effective marketing layouts use asymmetry: the imbalance leads the user's eye toward the CTA.
+Asymmetric layouts create tension and visual interest by violating the expectation of balance. When used purposefully, asymmetry directs the eye along a path - a large element on the left creates pressure toward the right, a heavy top creates pressure downward. This directed attention is why most effective marketing layouts use asymmetry: the imbalance leads the user's eye toward the CTA.
 
-The key discipline is intentionality. Asymmetry that emerges from neglect — uneven margins, inconsistent column widths — reads as incompetence, not dynamism. Asymmetry that is designed — a deliberate large/small pairing, a grid that breaks at one exact point — reads as craft. Always be able to explain why a layout is asymmetric in terms of what attention it is directing.
+The key discipline is intentionality. Asymmetry that emerges from neglect - uneven margins, inconsistent column widths - reads as incompetence, not dynamism. Asymmetry that is designed - a deliberate large/small pairing, a grid that breaks at one exact point - reads as craft. Always be able to explain why a layout is asymmetric in terms of what attention it is directing.
 
 ### Rhythm
 
-Rhythm in layout means that repetition creates a predictable visual beat that the eye can lock onto and traverse quickly. A card grid has rhythm. A consistent heading-body-space pattern has rhythm. Rhythm is not uniformity — it is the reliable expectation that similar content will appear in similar visual form. Break rhythm only to signal importance: a featured item in a grid that is twice the size says "this one matters."
+Rhythm in layout means that repetition creates a predictable visual beat that the eye can lock onto and traverse quickly. A card grid has rhythm. A consistent heading-body-space pattern has rhythm. Rhythm is not uniformity - it is the reliable expectation that similar content will appear in similar visual form. Break rhythm only to signal importance: a featured item in a grid that is twice the size says "this one matters."
 
 **See:** [`./composition.md`](./composition.md) §Visual-Weight Calculus for the `size × contrast × isolation × complexity` formula that quantifies why an asymmetric large/small pairing directs the eye toward the heavier element.
 
@@ -81,7 +81,7 @@ Rhythm in layout means that repetition creates a predictable visual beat that th
 
 ## Compositional Grids
 
-Grids are not aesthetic choices — they are coordination mechanisms. A grid aligns elements to invisible reference lines, which means users can scan a layout without actively negotiating where each element sits.
+Grids are not aesthetic choices - they are coordination mechanisms. A grid aligns elements to invisible reference lines, which means users can scan a layout without actively negotiating where each element sits.
 
 ### Responsive Column Grid
 
@@ -96,7 +96,7 @@ Grids are not aesthetic choices — they are coordination mechanisms. A grid ali
 
 ### Baseline Grid
 
-A baseline grid aligns text and element heights to a consistent vertical increment — typically 4px or 8px. Every element's height, padding, and margin should be a multiple of this increment. The baseline grid is what makes a layout feel "settled" rather than arbitrarily positioned, because every vertical decision relates to a shared rhythm. In practice, use 8px as the primary increment and 4px for sub-increments only (e.g., within a component's internal padding).
+A baseline grid aligns text and element heights to a consistent vertical increment - typically 4px or 8px. Every element's height, padding, and margin should be a multiple of this increment. The baseline grid is what makes a layout feel "settled" rather than arbitrarily positioned, because every vertical decision relates to a shared rhythm. In practice, use 8px as the primary increment and 4px for sub-increments only (e.g., within a component's internal padding).
 
 **See:** [`./composition.md`](./composition.md) §Golden Ratio and Root Rectangles + §Focal-Point Construction for the pre-Gestalt compositional foundations (φ-grid, root rectangles, rule-of-thirds intersections) that complement the responsive-column / baseline-grid coordinations above.
 
@@ -113,13 +113,13 @@ The primary tools for establishing figure-ground relationships are:
 - **Shadow:** Elements with elevation shadows read as physically in front of flat elements.
 - **Blur:** Blurred elements recede perceptually, making sharp elements read as foreground.
 
-Never rely on a single cue alone — a foreground element established only by shadow may become invisible in certain display contexts. Combining contrast + shadow + position creates a robust figure-ground relationship.
+Never rely on a single cue alone - a foreground element established only by shadow may become invisible in certain display contexts. Combining contrast + shadow + position creates a solid figure-ground relationship.
 
 ---
 
 ## Reading-Order Scoring
 
-Users do not read UIs — they scan them. Understanding the scan pattern users will apply to a layout allows designers to place information where the eye will naturally encounter it in the intended order.
+Users do not read UIs - they scan them. Understanding the scan pattern users will apply to a layout allows designers to place information where the eye will naturally encounter it in the intended order.
 
 ### F-Pattern
 
@@ -129,7 +129,7 @@ Users scan the top horizontally, then move down the left side, occasionally scan
 
 ### Z-Pattern
 
-Users scan the top-left, move horizontally to the top-right, then diagonally across to the bottom-left, then horizontally to the bottom-right. This pattern dominates sparse layouts with clear visual anchors — marketing pages with a headline, an image, and a CTA. The Z traces through the key moments of the layout, which is why placing a CTA at the Z-terminal (bottom-right) is effective for conversion-optimized pages.
+Users scan the top-left, move horizontally to the top-right, then diagonally across to the bottom-left, then horizontally to the bottom-right. This pattern dominates sparse layouts with clear visual anchors - marketing pages with a headline, an image, and a CTA. The Z traces through the key moments of the layout, which is why placing a CTA at the Z-terminal (bottom-right) is effective for conversion-optimized pages.
 
 **Implication:** In Z-pattern contexts, place the brand/logo at top-left, the most compelling claim at top-right, the value summary along the diagonal, and the CTA at bottom-right.
 
@@ -145,9 +145,9 @@ The layout starts wide at the top (a full-width headline), narrows through suppo
 
 Progressive disclosure is the principle that interface complexity should be revealed in proportion to user readiness and need. Showing all complexity at once overwhelms; hiding complexity aggressively creates friction. The correct level of disclosure depends on what the user is trying to do right now.
 
-**Accordion:** Use for dense but not immediately required information. FAQs, advanced settings, and multi-section forms benefit from accordions because users can navigate to the section they need without reading everything. Never hide primary actions behind an accordion — only secondary and contextual content belongs there.
+**Accordion:** Use for dense but not immediately required information. FAQs, advanced settings, and multi-section forms benefit from accordions because users can navigate to the section they need without reading everything. Never hide primary actions behind an accordion - only secondary and contextual content belongs there.
 
-**Tooltip:** Use for inline definitions and contextual help that would interrupt reading flow if placed in line. Tooltips are appropriate for technical terms, icon meanings, and field constraints. They should appear on hover (not click) for desktop, and on tap for mobile. Tooltip copy must be brief — if the explanation requires more than two sentences, it belongs in documentation, not a tooltip.
+**Tooltip:** Use for inline definitions and contextual help that would interrupt reading flow if placed in line. Tooltips are appropriate for technical terms, icon meanings, and field constraints. They should appear on hover (not click) for desktop, and on tap for mobile. Tooltip copy must be brief - if the explanation requires more than two sentences, it belongs in documentation, not a tooltip.
 
 **Drill-down:** Use for hierarchical data exploration where showing all levels simultaneously would be overwhelming. File browsers, category navigation, and data dashboards with sub-dimension exploration are appropriate drill-down contexts. Each level should clearly communicate where the user is in the hierarchy and how to return.
 
@@ -159,7 +159,7 @@ Progressive disclosure is the principle that interface complexity should be reve
 
 <!-- Source: nextlevelbuilder/ui-ux-pro-max-skill (MIT) — data/landing.csv -->
 
-A landing-page archetype is a proven structural pattern — a specific order of sections, CTA placement rule, and visual approach — calibrated to a specific conversion goal and audience state. Matching the archetype to the product's vertical and the visitor's awareness level dramatically improves conversion without requiring creative originality at every decision.
+A landing-page archetype is a proven structural pattern - a specific order of sections, CTA placement rule, and visual approach - calibrated to a specific conversion goal and audience state. Matching the archetype to the product's vertical and the visitor's awareness level dramatically improves conversion without requiring creative originality at every decision.
 
 The 24 archetypes below are ordered by section sequence. "CTA placement rule" describes where to place the primary call to action relative to page content.
 
@@ -167,15 +167,15 @@ The 24 archetypes below are ordered by section sequence. "CTA placement rule" de
 
 ### 1. Hero-Centric
 **Section order:** Full-viewport hero → brief feature highlights → footer  
-**CTA placement rule:** Above the fold, within the hero — the primary action is visible without scrolling  
+**CTA placement rule:** Above the fold, within the hero - the primary action is visible without scrolling  
 **Best for:** SaaS product launches, single-purpose apps, brand launches where one conversion goal dominates  
-**Key visual pattern:** Large image or video background, single headline, single CTA button — nothing competes with the hero
+**Key visual pattern:** Large image or video background, single headline, single CTA button - nothing competes with the hero
 
 ### 2. Conversion-Optimized
 **Section order:** Headline → CTA → minimal social proof → secondary CTA  
 **CTA placement rule:** Within 200px of the top of the page; repeated on scroll at a consistent interval  
 **Best for:** Lead generation, email capture, high-intent landing pages where the visitor already knows what they want  
-**Key visual pattern:** Minimal distraction — no navigation, no secondary offers; everything serves the single conversion action
+**Key visual pattern:** Minimal distraction - no navigation, no secondary offers; everything serves the single conversion action
 
 ### 3. Feature-Rich Showcase
 **Section order:** Hero → feature grid → social proof → pricing summary → CTA  
@@ -191,7 +191,7 @@ The 24 archetypes below are ordered by section sequence. "CTA placement rule" de
 
 ### 5. Social-Proof-Focused
 **Section order:** Hero → testimonial prominences → customer logo wall → case study summary → CTA  
-**CTA placement rule:** After the social proof block — conversion happens once trust is established  
+**CTA placement rule:** After the social proof block - conversion happens once trust is established  
 **Best for:** Products where credibility is the primary conversion barrier: enterprise software, high-ticket services, health products  
 **Key visual pattern:** Real face photography accompanying testimonials; recognizable logos displayed at full opacity; specific measurable results quoted
 
@@ -199,23 +199,23 @@ The 24 archetypes below are ordered by section sequence. "CTA placement rule" de
 **Section order:** Hero with embedded live demo or interactive preview → feature explanation → CTA  
 **CTA placement rule:** Inline with the demo; allow the user to try before committing  
 **Best for:** Developer tools, SaaS products, any product where the experience is the best argument for conversion  
-**Key visual pattern:** Live code editor, interactive prototype, or animated walkthrough embedded directly in the page — not behind a click
+**Key visual pattern:** Live code editor, interactive prototype, or animated walkthrough embedded directly in the page - not behind a click
 
 ### 7. Trust and Authority
 **Section order:** Credentials and certifications → case study highlights → team or methodology → CTA  
-**CTA placement rule:** Conservative — placed after all trust signals have been presented; below the fold is acceptable  
+**CTA placement rule:** Conservative - placed after all trust signals have been presented; below the fold is acceptable  
 **Best for:** B2B enterprise sales, consulting services, legal and compliance products where buying risk is high  
 **Key visual pattern:** Logo wall with named clients; specific metrics from case studies; certifications and awards displayed prominently
 
 ### 8. Storytelling-Driven
 **Section order:** Narrative introduction → problem acknowledgment → solution journey → outcome → CTA  
-**CTA placement rule:** End of story — the CTA is the natural conclusion of the narrative arc  
+**CTA placement rule:** End of story - the CTA is the natural conclusion of the narrative arc  
 **Best for:** Mission-driven brands, founder-led companies, products where the origin story creates emotional investment  
 **Key visual pattern:** Full-bleed photography that advances the narrative; minimal UI chrome; scroll-triggered reveals that pace the story
 
 ### 9. Comparison/Competitive
 **Section order:** Positioning headline → feature comparison matrix → pricing → CTA  
-**CTA placement rule:** After the comparison matrix — once the product has won the comparison  
+**CTA placement rule:** After the comparison matrix - once the product has won the comparison  
 **Best for:** Competitive category entries, products explicitly positioning against a named incumbent, switching-cost contexts  
 **Key visual pattern:** Side-by-side comparison table with clear visual wins; checkmarks vs. X marks; pricing presented as a conclusion, not an opener
 
@@ -227,31 +227,31 @@ The 24 archetypes below are ordered by section sequence. "CTA placement rule" de
 
 ### 11. Community-Led
 **Section order:** Community value proposition → user-generated content grid → join CTA → community stats  
-**CTA placement rule:** After seeing the community in action — conversion is to join, not to buy  
+**CTA placement rule:** After seeing the community in action - conversion is to join, not to buy  
 **Best for:** Social apps, creator platforms, forums, any product whose value scales with network size  
 **Key visual pattern:** Real user content grid; community size metrics; faces and usernames to signal that real people are already here
 
 ### 12. Free-Tool
 **Section order:** Tool embedded directly at top → output or result preview → upgrade value proposition → CTA  
-**CTA placement rule:** After tool use — show the upgrade CTA once the user has experienced the value  
+**CTA placement rule:** After tool use - show the upgrade CTA once the user has experienced the value  
 **Best for:** Freemium SaaS products where the tool itself is the best acquisition mechanism  
 **Key visual pattern:** Functional tool widget inline in the page; results visible without signup; upgrade gate triggered by usage limit or advanced feature
 
 ### 13. Event/Launch
 **Section order:** Event name and date → countdown timer → value proposition → registration form  
-**CTA placement rule:** Above the fold alongside the countdown — urgency and action together  
+**CTA placement rule:** Above the fold alongside the countdown - urgency and action together  
 **Best for:** Product launches, webinars, conferences, limited-availability events  
 **Key visual pattern:** Countdown timer as the hero element; date and time prominently displayed; registration form short enough to complete immediately
 
 ### 14. Portfolio/Agency
 **Section order:** Brand positioning → selected work grid → process or approach → contact CTA  
-**CTA placement rule:** Bottom of page — the portfolio is the argument; the CTA is the conclusion  
+**CTA placement rule:** Bottom of page - the portfolio is the argument; the CTA is the conclusion  
 **Best for:** Creative agencies, freelancers, design studios, any service business where the work speaks for itself  
 **Key visual pattern:** Full-bleed project images; minimal copy; case study depth available on click; contact form or email rather than a purchase CTA
 
 ### 15. E-commerce Category
 **Section order:** Category headline → filter controls → product grid → individual product CTAs  
-**CTA placement rule:** Per-product — each product card has its own CTA  
+**CTA placement rule:** Per-product - each product card has its own CTA  
 **Best for:** Retail product categories, marketplace verticals, any browsing-first commerce context  
 **Key visual pattern:** Masonry or uniform grid layout; filter/sort controls accessible without page navigation; product image as the primary communication vehicle
 
@@ -263,48 +263,48 @@ The 24 archetypes below are ordered by section sequence. "CTA placement rule" de
 
 ### 17. Video-First
 **Section order:** Autoplay background video → overlaid headline and CTA → supporting content below  
-**CTA placement rule:** Overlaid on the video — visible immediately on page load  
+**CTA placement rule:** Overlaid on the video - visible immediately on page load  
 **Best for:** Experiential brands, travel companies, premium consumer products where atmosphere is the argument  
 **Key visual pattern:** Full-screen video autoplay (muted); minimal text overlay; the video carries the emotional and brand argument
 
 ### 18. Pricing-Forward
 **Section order:** Brief positioning → pricing table with tier comparison → per-tier CTA → FAQ  
-**CTA placement rule:** Per-tier — each pricing column has its own conversion action  
+**CTA placement rule:** Per-tier - each pricing column has its own conversion action  
 **Best for:** Products with transparent, self-serve pricing; SaaS with clear tier differentiation; subscription businesses  
 **Key visual pattern:** Three-tier layout with middle tier highlighted as recommended; feature comparison below price; annual/monthly toggle
 
 ### 19. Newsletter/Content
 **Section order:** Value proposition → email capture form → sample content or recent issues → social proof subscriber count  
-**CTA placement rule:** Above the fold — the form is the entire purpose of the page  
+**CTA placement rule:** Above the fold - the form is the entire purpose of the page  
 **Best for:** Media companies, content creators, thought leaders, any subscription email product  
 **Key visual pattern:** Minimal design that does not compete with the form; preview of content quality as the primary trust signal
 
 ### 20. Data/Analytics Showcase
 **Section order:** Positioning headline → live or animated dashboard preview → capability explanation → CTA  
-**CTA placement rule:** After the demo — once the data quality has been demonstrated  
+**CTA placement rule:** After the demo - once the data quality has been demonstrated  
 **Best for:** Analytics platforms, BI tools, data products where the output is the proof  
 **Key visual pattern:** Interactive chart or live dashboard preview embedded in the page; real-seeming data rather than placeholders; metric definitions visible to signal depth
 
 ### 21. Long-Form Sales Page
 **Section order:** Headline → problem → agitation → solution → proof → benefits → objection handling → CTA → guarantee → repeated CTA  
-**CTA placement rule:** Repeated multiple times throughout — after each major argument and at the end  
+**CTA placement rule:** Repeated multiple times throughout - after each major argument and at the end  
 **Best for:** High-ticket items, coaching programs, courses, any product requiring significant commitment  
 **Key visual pattern:** Text-heavy with strategic visual breaks; testimonials woven throughout rather than grouped; guarantee section near the final CTA to reduce last-minute drop-off
 
 ### 22. Waitlist/Pre-launch
 **Section order:** Teaser headline → product promise → email capture form → optional: social sharing incentive  
-**CTA placement rule:** Above the fold — the form is the entire conversion goal  
+**CTA placement rule:** Above the fold - the form is the entire conversion goal  
 **Best for:** Pre-launch products, invite-only launches, limited-release products  
 **Key visual pattern:** Intentional information scarcity; anticipation over explanation; social proof through waitlist size if available
 
 ### 23. Marketplace
 **Section order:** Search bar → category navigation → featured listings → browse grid  
-**CTA placement rule:** Search-first — the search bar is the primary CTA; per-listing CTAs secondary  
+**CTA placement rule:** Search-first - the search bar is the primary CTA; per-listing CTAs secondary  
 **Best for:** Two-sided platforms, classified marketplaces, any product where supply browsing is the primary user behavior  
 **Key visual pattern:** Search prominence above everything else; category browsing as primary navigation; featured/promoted listings visually distinct but not intrusive
 
 ### 24. Documentation Hub
 **Section order:** Search bar → quick-start links → navigation tree → content area  
-**CTA placement rule:** No primary marketing CTA — navigation is the only action  
+**CTA placement rule:** No primary marketing CTA - navigation is the only action  
 **Best for:** Developer documentation, product help centers, API references, any knowledge base  
 **Key visual pattern:** Navigation-heavy layout; dense information with strong typographic hierarchy; search is the dominant entry point; no marketing chrome competing with the content

package/scripts/lib/harness-freshness.cjs

@@ -0,0 +1,59 @@
+// Phase 44 - harness freshness (shippable pure module). Read by health-mirror + check-harness-freshness.cjs.
+'use strict';
+
+const { readHarnesses } = require('./manifest/index.cjs');
+
+const WARN_DAYS = 60;
+const FAIL_DAYS = 180;
+const MS_PER_DAY = 86400000;
+
+/**
+ * Returns the age of a last_verified timestamp in fractional days.
+ * Returns Infinity when the timestamp is absent or unparseable.
+ * @param {string|null|undefined} last_verified
+ * @param {number} nowMs
+ * @returns {number}
+ */
+function ageInDays(last_verified, nowMs) {
+  if (!last_verified) return Infinity;
+  const t = Date.parse(last_verified);
+  if (!Number.isFinite(t)) return Infinity;
+  return (nowMs - t) / MS_PER_DAY;
+}
+
+/**
+ * Evaluate freshness for every harness in the manifest (or a supplied list).
+ *
+ * STATUS-AWARE (D-04): only `tested` harnesses can warn/fail on a stale
+ * last_verified date.  experimental / untested / known-broken harnesses
+ * make no freshness promise — their freshness is always 'n/a'.
+ *
+ * @param {{ nowMs?: number, harnesses?: object[] }} [opts]
+ * @returns {{ id: string, status: string, last_verified: string|null, age_days: number|null, freshness: string }[]}
+ */
+function checkFreshness({ nowMs, harnesses } = {}) {
+  const list = harnesses || readHarnesses().harnesses || [];
+  const now = typeof nowMs === 'number' ? nowMs : Date.now();
+
+  return list.map((h) => {
+    const status = (h.capability_matrix && h.capability_matrix.status) || 'untested';
+    const age = ageInDays(h.last_verified, now);
+
+    // Only `tested` harnesses carry a freshness obligation.
+    // All other statuses → 'n/a' (never a build failure).
+    let freshness = 'n/a';
+    if (status === 'tested') {
+      freshness = age >= FAIL_DAYS ? 'fail' : age >= WARN_DAYS ? 'warn' : 'ok';
+    }
+
+    return {
+      id: h.id,
+      status,
+      last_verified: h.last_verified || null,
+      age_days: Number.isFinite(age) ? Math.floor(age) : null,
+      freshness,
+    };
+  });
+}
+
+module.exports = { checkFreshness, ageInDays, WARN_DAYS, FAIL_DAYS };

package/scripts/lib/health-mirror/index.cjs

@@ -51,6 +51,7 @@ const fs = require('node:fs');
 const path = require('node:path');
 
 const { getDisableReason } = require('../issue-reporter/kill-switch.cjs');
+const { checkFreshness, WARN_DAYS, FAIL_DAYS } = require('../harness-freshness.cjs');
 
 function fileExists(p) {
   try {
@@ -211,6 +212,32 @@ async function getHealthChecks(rootDir) {
     checks.push({ name: 'skill_discipline', status, detail });
   }
 
+  // 8. harness_freshness — per-harness last_verified age (Phase 44). PURE: reads the manifest SoT via the
+  // shippable harness-freshness module; status-aware (only `tested` harnesses can warn/fail). NEVER throws.
+  {
+    let status = 'ok';
+    let detail;
+    try {
+      const results = checkFreshness();
+      const failing = results.filter((r) => r.freshness === 'fail');
+      const warning = results.filter((r) => r.freshness === 'warn');
+      const tested = results.filter((r) => r.status === 'tested');
+      if (failing.length) {
+        status = 'fail';
+        detail = `harness freshness: ${failing.length} stale (>${FAIL_DAYS}d): ${failing.map((r) => r.id).join(', ')}`;
+      } else if (warning.length) {
+        status = 'warn';
+        detail = `harness freshness: ${warning.length} aging (>${WARN_DAYS}d): ${warning.map((r) => r.id).join(', ')}`;
+      } else {
+        detail = `harness freshness: ${tested.length} tested harness(es) current`;
+      }
+    } catch {
+      status = 'warn';
+      detail = 'harness freshness: unavailable';
+    }
+    checks.push({ name: 'harness_freshness', status, detail });
+  }
+
   return { checks };
 }