Primer branding: reduce ultra-heavy heading font weights

[github-actions]

What changed

Typography

• Reduced font-weight: 800 to font-weight: 700 on four heading/eyebrow rules in src/styles/style.css: .site-header h1, .recipe-key, .copy-modal-eyebrow, and .landing-title.
  • Guidance: the Primer Brand review tool (primer_brand_review) flagged these as heavy-font-weight findings — "Ultra-heavy/black weights are off-brand. Favour regular and medium, with bold for genuine emphasis." 700 (bold) is the appropriate ceiling per that guidance, while preserving the existing visual hierarchy (headline vs. body).

Audit findings not changed (and why)

• Color: the CSS custom properties already follow the var(--color-*, #hexFallback) pattern (e.g. --accent-blue: var(--color-accent-fg, #0969da)), which is the correct Primer approach — colors resolve to Primer CSS variables at runtime, with the hex values serving only as fallbacks matching those same tokens. The primer_brand_review tool's hardcoded-hex warning is a blanket regex match on hex literals and doesn't distinguish token fallbacks from true hardcoded colors, so no changes were made here.
• Gradients: --title-gradient-* and --accent-blue/--accent-green gradients used in .site-header h1 and .landing-title all resolve through existing Primer color tokens (--color-accent-fg, --color-done-emphasis, --color-sponsors-emphasis) in one aligned color family and were left as tasteful, on-brand accents per the task's gradient guidance.
• Heading component migration (styled-heading warning: "Use the Heading component for type styles"): this is a plain static HTML/Vite site with no @primer/react-brand dependency installed — introducing React Brand components here would require adding a new runtime dependency and restructuring markup, both out of scope per the task rules ("Do NOT add new runtime dependencies", "Do NOT restructure the page"). Left as a follow-up if the project ever migrates to React.
• Spacing/layout: reviewed pixel usage across style.css; the few remaining raw px values (1px/2px/5px/8px, used for hairline borders and small offsets) are below the threshold where Primer spacing tokens apply and are standard practice for border/shadow precision, so left unchanged.

Validation

• npm test — 205 tests passed (13 test files)
• npm run build — production build succeeded

Change set is intentionally small and low-risk: one CSS property value change repeated across four selectors, no markup or logic changes.

Generated by Primer Branding · auto · 70.7 AIC · ⌖ 10.4 AIC · ⊞ 9.4K · ◷

[github-actions]

Reviewer kind: ponytail (CSS-only styling change)

No blocking issues. This is a minimal, low-risk change reducing font-weight: 800 → 700 on four heading/eyebrow selectors (.site-header h1, .recipe-key, .copy-modal-eyebrow, .landing-title) for Primer brand alignment. No markup or logic changes; visual hierarchy is preserved since all four rules were changed consistently. Tests and build reportedly pass. Nothing to request changes on.

Generated by Specialist PR Review for #181 · auto · 12.6 AIC · ⌖ 1.67 AIC · ⊞ 7.9K