style(home): unify typography across DECIDE, BUILD, TEST and MEASURE

scripts/capture-home.mjs

@@ -371,6 +371,26 @@ try {
         const stage = page.locator('#evidence .experiment-explorer');
         await stage.scrollIntoViewIfNeeded();
         const diagnostics = await page.evaluate(() => {
+          const sectionStyle = (node) => {
+            if (!(node instanceof HTMLElement)) return null;
+            const css = getComputedStyle(node);
+            return {
+              fontFamily: css.fontFamily,
+              fontSize: Number.parseFloat(css.fontSize),
+              fontWeight: css.fontWeight,
+              lineHeight: Number.parseFloat(css.lineHeight),
+              tracking: css.letterSpacing,
+            };
+          };
+          const sectionHeadings = [...document.querySelectorAll('[data-stage] .stage-heading')].map(sectionStyle);
+          const sectionIntros = [...document.querySelectorAll('[data-stage] .stage-intro')].map(sectionStyle);
+          const aboutHeading = sectionStyle(document.querySelector('#about-title'));
+          const aboutIntro = sectionStyle(document.querySelector('.about-summary'));
+          const heroHeading = sectionStyle(document.querySelector('.hero-heading'));
+          const cardHeadings = [
+            '.card-headline', '.runtime-card__identity h4', '.value-headline',
+            '.mcb-model-card__name'
+          ].map(selector => sectionStyle(document.querySelector(selector))).filter(Boolean);
           const root = document.querySelector('#evidence .experiment-explorer');
           const tabs = [...root.querySelectorAll('[data-experiment-tab]')];
           const rail = root.querySelector('[data-experiment-rail]');
@@ -398,6 +418,7 @@ try {
           const titles = [...root.querySelectorAll('h3, h4, .experiment-mobile-chooser label')];
           return {
             theme: document.documentElement.dataset.theme,
+            typographyAudit: { sectionHeadings, sectionIntros, aboutHeading, aboutIntro, heroHeading, cardHeadings },
             pageOverflowPx: Math.max(0, document.documentElement.scrollWidth - window.innerWidth),
             selectedTab: tabs.find((t) => t.getAttribute('aria-selected') === 'true')?.dataset.trackId,
             publishedCount: tabs.filter((t) => t.dataset.published === 'true').length,
@@ -498,6 +519,31 @@ try {
         measureChecks.push(check);
         if (
           diagnostics.theme !== theme ||
+          diagnostics.typographyAudit.sectionHeadings.length !== 4 ||
+          diagnostics.typographyAudit.sectionIntros.length !== 4 ||
+          diagnostics.typographyAudit.sectionHeadings.some(heading =>
+            !heading?.fontFamily.includes('Plus Jakarta Sans') || heading.fontWeight !== '800' ||
+            !Number.isFinite(heading.fontSize)) ||
+          Math.max(...diagnostics.typographyAudit.sectionHeadings.map(heading => heading.fontSize)) -
+            Math.min(...diagnostics.typographyAudit.sectionHeadings.map(heading => heading.fontSize)) > 0.6 ||
+          diagnostics.typographyAudit.sectionIntros.some(intro =>
+            !intro?.fontFamily.includes('Inter') || intro.fontSize < 15) ||
+          (viewport.width <= 760 &&
+            Math.max(...diagnostics.typographyAudit.sectionIntros.map(intro => intro.fontSize)) -
+              Math.min(...diagnostics.typographyAudit.sectionIntros.map(intro => intro.fontSize)) > 0.6) ||
+          !diagnostics.typographyAudit.aboutHeading?.fontFamily.includes('Plus Jakarta Sans') ||
+          diagnostics.typographyAudit.aboutHeading.fontWeight !== '800' ||
+          Math.abs(diagnostics.typographyAudit.aboutHeading.fontSize -
+            diagnostics.typographyAudit.sectionHeadings[0].fontSize) > 0.6 ||
+          !diagnostics.typographyAudit.aboutIntro?.fontFamily.includes('Inter') ||
+          (viewport.width <= 760 && Math.abs(diagnostics.typographyAudit.aboutIntro.fontSize -
+            diagnostics.typographyAudit.sectionIntros[0].fontSize) > 0.6) ||
+          !diagnostics.typographyAudit.heroHeading?.fontFamily.includes('Plus Jakarta Sans') ||
+          diagnostics.typographyAudit.heroHeading.fontWeight !== '800' ||
+          diagnostics.typographyAudit.cardHeadings.length < 3 ||
+          diagnostics.typographyAudit.cardHeadings.some(heading =>
+            !heading.fontFamily.includes('Plus Jakarta Sans') ||
+            !['700', '800'].includes(heading.fontWeight) || heading.fontSize < 17) ||
           diagnostics.pageOverflowPx > 0 ||
           diagnostics.publishedCount !== 3 ||
           diagnostics.unpublishedCount !== 3 ||

src/components/landing/AboutSignal.astro

@@ -135,10 +135,10 @@ const proofPoints = [
     margin: 0 0 var(--space-4);
     color: var(--ink-display);
     font-family: var(--font-display);
-    font-size: clamp(1.75rem, 3.1vw, 2.95rem);
-    font-weight: 820;
-    letter-spacing: -0.042em;
-    line-height: 1.08;
+    font-size: var(--text-section-title);
+    font-weight: var(--weight-display);
+    letter-spacing: var(--tracking-section-title);
+    line-height: var(--leading-section-title);
     text-wrap: balance;
   }
 
@@ -150,14 +150,14 @@ const proofPoints = [
     max-width: 620px;
     margin: 0;
     color: var(--ink-muted);
-    font-size: clamp(1rem, 1.25vw, 1.12rem);
+    font-size: var(--text-section-intro);
     line-height: 1.6;
     text-wrap: pretty;
   }
 
   .about-summary strong {
     color: var(--ink-display);
-    font-weight: 720;
+    font-weight: var(--weight-heading);
   }
 
   .about-actions {
@@ -293,15 +293,15 @@ const proofPoints = [
     color: var(--accent-blue);
     font-family: var(--font-mono);
     font-size: var(--text-caption);
-    font-weight: 700;
+    font-weight: var(--weight-heading);
   }
 
   .proof-item h3 {
     margin: 0 0 5px;
     color: var(--ink-display);
     font-family: var(--font-display);
     font-size: 1rem;
-    font-weight: 780;
+    font-weight: var(--weight-display);
     line-height: 1.35;
   }
 
@@ -362,7 +362,7 @@ const proofPoints = [
     }
 
     .about-content h2 {
-      font-size: clamp(1.65rem, 8vw, 2.3rem);
+      font-size: var(--text-section-title-mobile);
     }
 
     .portrait-circle-wrapper {
@@ -403,6 +403,14 @@ const proofPoints = [
     }
   }
 
+  @media (max-width: 760px) {
+    .about-summary { font-size: var(--text-section-intro-mobile); }
+  }
+
+  @media (min-width: 681px) and (max-width: 760px) {
+    .about-content h2 { font-size: var(--text-section-title-mobile); }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .portrait-circle {
       transition: none;

src/components/landing/BuildSystemsShowcase.astro

@@ -187,7 +187,7 @@ const scopeFor = (id: string) =>
     margin: 0;
     font-family: var(--font-display);
     font-size: var(--text-caption);
-    font-weight: 800;
+    font-weight: var(--weight-display);
     letter-spacing: 0.11em;
     line-height: 1.4;
     text-transform: uppercase;
@@ -273,7 +273,7 @@ const scopeFor = (id: string) =>
     gap: 12px;
     color: var(--ink-subtle);
     font-size: var(--text-caption);
-    font-weight: 700;
+    font-weight: var(--weight-heading);
     line-height: 1.25;
   }
 
@@ -295,7 +295,7 @@ const scopeFor = (id: string) =>
     flex: 0 0 auto;
     color: var(--ink-subtle);
     font-size: var(--text-caption);
-    font-weight: 600;
+    font-weight: var(--weight-label);
     white-space: nowrap;
   }
 
@@ -333,8 +333,8 @@ const scopeFor = (id: string) =>
   .runtime-card__identity h4 {
     margin: 0;
     font-family: var(--font-display);
-    font-size: clamp(1.7rem, 3vw, 2.6rem);
-    font-weight: 800;
+    font-size: var(--text-feature-title);
+    font-weight: var(--weight-display);
     letter-spacing: -0.055em;
     line-height: 1.15;
     color: var(--ink-display);
@@ -344,7 +344,7 @@ const scopeFor = (id: string) =>
     margin: 0 0 9px;
     color: var(--ink-display);
     font-size: var(--text-body-sm);
-    font-weight: 700;
+    font-weight: var(--weight-heading);
     line-height: 1.45;
   }
 
@@ -415,7 +415,7 @@ const scopeFor = (id: string) =>
     color: var(--system-accent);
     font-family: var(--font-display);
     font-size: var(--text-caption);
-    font-weight: 750;
+    font-weight: var(--weight-heading);
     white-space: nowrap;
   }
 
@@ -500,8 +500,8 @@ const scopeFor = (id: string) =>
 
   .primitive__title {
     font-family: var(--font-display);
-    font-size: clamp(1.25rem, 2vw, 1.4rem);
-    font-weight: 800;
+    font-size: var(--text-card-title);
+    font-weight: var(--weight-display);
     letter-spacing: -0.045em;
     line-height: 1.2;
   }
@@ -517,7 +517,7 @@ const scopeFor = (id: string) =>
     margin-top: 9px;
     color: #b9cdec;
     font-size: var(--text-caption);
-    font-weight: 600;
+    font-weight: var(--weight-label);
     text-transform: capitalize;
   }
 

src/components/landing/DecisionTable.astro

@@ -271,7 +271,7 @@ const modes: DeploymentMode[] = [
     margin: 0 0 8px;
     font-family: var(--font-display);
     font-size: var(--text-caption);
-    font-weight: 800;
+    font-weight: var(--weight-display);
     line-height: 1.35;
     letter-spacing: 0.08em;
   }
@@ -283,8 +283,8 @@ const modes: DeploymentMode[] = [
     margin: 0;
     max-width: 690px;
     font-family: var(--font-display);
-    font-size: clamp(1.14rem, 2.3vw, 1.55rem);
-    font-weight: 760;
+    font-size: var(--text-card-title);
+    font-weight: var(--weight-heading);
     letter-spacing: -0.036em;
     line-height: 1.22;
     color: var(--ink-display);
@@ -420,14 +420,14 @@ const modes: DeploymentMode[] = [
     color: var(--ink-display);
     font-family: var(--font-display);
     font-size: 1.08rem;
-    font-weight: 800;
+    font-weight: var(--weight-display);
     line-height: 1.2;
   }
 
   .card-eyebrow {
     color: var(--ink-subtle);
     font-size: var(--text-caption);
-    font-weight: 640;
+    font-weight: var(--weight-label);
     line-height: 1.3;
   }
 
@@ -436,7 +436,7 @@ const modes: DeploymentMode[] = [
     color: var(--ink-subtle);
     font-family: var(--font-mono);
     font-size: var(--text-caption);
-    font-weight: 620;
+    font-weight: var(--weight-label);
     white-space: nowrap;
   }
 
@@ -445,8 +445,8 @@ const modes: DeploymentMode[] = [
     max-width: 360px;
     color: var(--decision-ink);
     font-family: var(--font-display);
-    font-size: clamp(1.5rem, 3.3vw, 2rem);
-    font-weight: 830;
+    font-size: var(--text-feature-title);
+    font-weight: var(--weight-display);
     line-height: 1.13;
     letter-spacing: -0.048em;
     text-wrap: pretty;
@@ -487,7 +487,7 @@ const modes: DeploymentMode[] = [
 
   .factor dt {
     color: var(--ink-subtle);
-    font-weight: 540;
+    font-weight: var(--weight-medium);
   }
 
   .factor dd {
@@ -497,15 +497,15 @@ const modes: DeploymentMode[] = [
     min-width: 0;
     margin: 0;
     color: var(--ink);
-    font-weight: 650;
+    font-weight: var(--weight-label);
   }
 
   .factor .factor--strength {
     color: var(--mode-accent);
-    font-weight: 750;
+    font-weight: var(--weight-heading);
   }
 
-  .factor-check { flex: 0 0 auto; font-weight: 850; }
+  .factor-check { flex: 0 0 auto; font-weight: var(--weight-display); }
 
   .card-conclusion {
     flex: 0 0 auto;
@@ -525,7 +525,7 @@ const modes: DeploymentMode[] = [
     color: var(--ink-display);
     font-family: var(--font-display);
     font-size: var(--text-body-sm);
-    font-weight: 730;
+    font-weight: var(--weight-heading);
     line-height: 1.42;
   }
 
@@ -544,12 +544,12 @@ const modes: DeploymentMode[] = [
     color: var(--ink-subtle);
     font-family: var(--font-mono);
     font-size: var(--text-caption);
-    font-weight: 600;
+    font-weight: var(--weight-label);
   }
 
   .rail-position strong {
     color: var(--ink-display);
-    font-weight: 800;
+    font-weight: var(--weight-display);
   }
 
   .rail-buttons {
@@ -611,7 +611,7 @@ const modes: DeploymentMode[] = [
 
   .decision-transition strong {
     color: var(--ink-display);
-    font-weight: 750;
+    font-weight: var(--weight-heading);
   }
 
   .transition-link {
@@ -627,7 +627,7 @@ const modes: DeploymentMode[] = [
     color: var(--accent-blue-dark);
     font-family: var(--font-display);
     font-size: var(--text-caption);
-    font-weight: 770;
+    font-weight: var(--weight-heading);
     text-decoration: none;
     transition: background var(--duration-fast) ease;
   }