Primer branding: align landing-diagram pill shapes with brand corner radius

[github-actions]

What changed

Color — no changes; the site already resolves every color through var(--color-*, <fallback-hex>) GitHub Primer product tokens (light/dark parity, e.g. --accent-blue: var(--color-accent-fg, #0969da)), so no hardcoded off-brand hues were found.

Typography — no changes; headings and body text already use the shared --font-sans / --font-mono stacks and a consistent rem-based type scale.

Spacing — no changes; layout spacing already uses rem/em values consistent with the existing scale.

Voice and tone — no changes; copy (e.g. "Automate your repository with AI agents", "Takes about a minute — no sign-in required") already matches a plain, direct, low-hype tone.

Accessibility — no changes; ARIA labeling, focus-visible outlines, and reduced-motion handling were already present and were preserved.

Fixed: off-brand pill shapes (.landing-diagram, .ld-phase-icon-multi)

Both elements used border-radius: 999px (a fully-rounded "pill" shape). The primer-brand MCP server's primer_brand_review tool flagged this directly:

pill-button: Pill / fully-rounded shapes are off-brand. GitHub uses a modest, consistent corner radius except on Label components.
border-radius: 50%

I changed both to use the site's existing modest-radius tokens instead of a new value:

• .landing-diagram (the outer landing-page runner card) → var(--radius-lg) (12px), matching every other card-like container in the file (e.g. .recipe-card, .workflow-recipe, .landing).
• .ld-phase-icon-multi (the small multi-icon chip inside the diagram) → var(--radius-md) (8px), matching sibling icon/button radii elsewhere in the file.

Genuinely circular elements (border-radius: 50% on icon avatars/badges) were left untouched — the review tool itself treats fully-round icon badges as a normal exception, distinct from pill-shaped buttons/containers.

Deviations found but not fixed

• The brand review tool also flagged hardcoded pixel values (e.g. 3px, 8px, 18px) throughout style.css as a suggestion to prefer Primer size/spacing tokens. This site is a product surface (not a marketing page) styled directly against GitHub Primer product CSS variables (--color-*, --borderRadius-*) with px fallbacks, which is the correct pattern for product UI — the primer-brand guidance and tokens are scoped to @primer/react-brand marketing components, not product CSS. Rewriting every fallback px value to brand size tokens would be a sweeping, high-risk change unrelated to any real deviation, so I left it as-is.
• No @primer/react-brand components are imported (also flagged by the review tool as informational, not a warning). This site correctly builds on @primer/css (product CSS), not @primer/react-brand (marketing component library), so this is expected and not a deviation.

Guidance retrieved

• primer_brand_review (bundled snapshot of @primer/react-brand@0.76.0) — flagged border-radius: 999px as pill-button: "Pill / fully-rounded shapes are off-brand. GitHub uses a modest, consistent corner radius except on Label components."
• primer_brand_tokens --group color / --group typography / --group spacing — confirmed the site's existing Primer product color/typography/radius tokens (--color-*, --borderRadius-medium = 8px, --borderRadius-large = 12px) already align with brand primitives.

Validation

• npm test — 326/327 tests pass. The 1 failing test (test/copilot-instructions.test.js) fails identically on main before this change (a stale-date assertion unrelated to styling) — confirmed by stashing this change and re-running.
• npm run build — succeeds (vite build completes; the prebuild vendor-fetch step fails only due to this sandbox's outbound npm registry being blocked, unrelated to this change, and does not affect the CSS emitted in dist/).

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 · 143.1 AIC · ⌖ 6.91 AIC · ⊞ 7.8K · ◷