Primer branding: use neutral heading color, remove mixed-hue gradient

[github-actions]

What changed

Color

• --heading-color (used for .site-header h1 and .preview-code .md-heading) was hardcoded to Primer's semantic success green (--color-success-fg) in both light and dark mode. Success/green is a status color reserved for positive state signaling (e.g. checks passing), not a general heading accent. Changed it to the neutral default text color (--color-fg-default) so page headings read as standard content, matching Primer Brand's Heading/Text color guidance where headings use var(--brand-color-text-default) rather than a semantic accent.
• Removed the two-hue linear-gradient(90deg, var(--accent-blue), var(--accent-green)) text-fill effect on .landing-title. Primer Brand guidance (from primer_brand_page_design) explicitly lists "no glows, purple gradients, pill buttons, or glassmorphism" and cautions against mixing unrelated hues in decorative treatments. Blue-to-green fill on a headline text is exactly this kind of off-brand mixed-hue gradient, and it also fails to consistently guarantee readable contrast in text-fill mode across browsers. Replaced with the same neutral --heading-color used elsewhere for headings, keeping visual consistency between the landing title and the site header.

Typography / Voice / Spacing

• No changes — reviewed Heading/Text component guidance (primer_brand_component --name Heading/Text) and spacing tokens; existing sizes, weights, and copy tone were already reasonable and not swept for this focused pass.

Guidance sourced from primer-brand MCP server

• primer_brand_component --name Heading / --name Text: headings/body text should rely on the semantic default text color, only using a size/weight override with deliberate reason — not a status-semantic color.
• primer_brand_tokens --query "text color default heading": confirms var(--brand-color-text-default) (mapped to --base-color-scale-black-0 / neutral) is the token family used across brand components (FAQ-color-heading, Eyebrowbanner-heading-fgColor, etc.) for heading color — not a green/success token.
• primer_brand_page_design: "Copy is real and specific, with no glows, purple gradients, pill buttons, or glassmorphism" — motivates removing the blue→green gradient text-fill on the landing hero title.

Deviations found but not fixed (deliberate)

• The .landing-diagram pill/rounded-999px badge and the agent-purple accent family used for the "assistant" button and copy-modal are intentional brand-adjacent accents drawn from Primer's --color-done-emphasis/--color-done-fg tokens (used elsewhere in GitHub product UI for "done"/agent states) and pass contrast; left as-is per the instruction to keep tasteful shine when colors trace to Primer tokens and pass contrast.
• Did not touch spacing/pixel values (0.4rem, 1.5rem, etc.) since Primer Brand's spacing guidance targets marketing-page composition (Box/Stack/Grid gutters), and this app UI already uses Primer CSS radius/shadow variables consistently; a broad spacing sweep was out of scope for a focused, low-risk change set.

Validation

• npm test — 326/327 tests pass. The 1 failing test (test/copilot-instructions.test.js) is a pre-existing, unrelated failure (asserts a stale generated-date string in committed docs) reproduced identically on main before this change.
• npx vite build — build succeeds and produces dist/ output. (The npm run build wrapper's prebuild vendor-fetch step fails in this sandbox due to no network egress to npm registry for @primer/css; this is an environment limitation unrelated to the CSS changes.)

Warning

Firewall blocked 1 domain

The following domain was blocked by the firewall during workflow execution:

• registry.npmjs.org

To allow these domains, add them to the network.allowed list in your workflow frontmatter:

network:
  allowed:
    - defaults
    - "registry.npmjs.org"

See Network Configuration for more information.

Generated by Primer Branding · copilot · auto · 105.7 AIC · ⌖ 7.19 AIC · ⊞ 8.3K · ◷