@primer/brand-mcp 0.71.0-rc.1102b23e → 0.71.0

package/content/page-design.md

@@ -6,11 +6,9 @@ Learn individual component APIs and usage with `primer_brand_docs` and `primer_b
 
 ## Start here
 
-The Flexsuite recipe templates are the current canonical source of truth for what GitHub web pages should look like today. Every component in them reflects the latest brand, unlike many older standalone examples. Use them as your
-starting point and reference, and mirror their composition and section order:
+The Flexsuite recipe templates are the current canonical source of truth for what GitHub web pages should look like today. Every component in them reflects the latest brand, unlike many older standalone examples. Use them as your starting point and reference, and mirror their composition and section order:
 
-- **Overview / landing page** — `FlexSuiteAIOverview` (hero with media, logo suite, gridline card
-  grids, rivers, pricing, FAQ, footer).
+- **Overview / landing page** — `FlexSuiteAIOverview` (hero with media, logo suite, gridline card grids, rivers, pricing, FAQ, footer).
 - **Category page** — `FlexSuiteSecurityCategory`.
 - **Details page** — `FlexSuiteAIDetailsPlaylist`.
 
@@ -23,6 +21,8 @@ Pull adaptable component snippets with `primer_brand_examples`.
 - **Do** — when a component offers a gridline-family option, choose it over the older or default look. "Expressive" gridline options are a more pronounced sub-variant of the same aesthetic, not a competing style; reach for them where a section wants extra emphasis.
 - **Don't** — settle for a component's plainest or legacy variant, or borrow section layouts from an older brand generation, when a gridline equivalent exists.
 
+The gridline look is crucial and literal, not just a set of variants. Gridlines are thin ruled lines that frame the content column and separate sections (see "Contain content within the grid" section below).
+
 Confirm the exact options with `primer_brand_component` rather than assuming which variants a component has — the specific names evolve over time.
 
 ## Page structure
@@ -34,21 +34,42 @@ Every full page should be framed top and bottom, unless the user has requested a
 - **Do** — use `SubdomainNavBar` at the top and `MinimalFooter` at the bottom (APIs via `primer_brand_component`).
 - **Don't** — hand-roll a `<header>`, `<nav>`, or `<footer>` unless user has a separate plan for it.
 
+### Contain content within the grid
+
+Body content must always sit in a centered, max-width column framed by the brand's gridlines — it should rarely stretch edge-to-edge.
+
+Examples of this are in the Flexsuite recipes.
+
+- **Do** — keep content (heroes, rivers, tables, card grids, CTAs, prose) in a shared max-width column with clear left and right gutters, and let thin ruled gridlines run down both sides of the column with full-bleed horizontal rules between major sections.
+- **Don't** — stretch tables, card grids, CTAs, or text edge-to-edge, or let a section bleed full-width unless it is a deliberate background band.
+- **Mobile** — use a modest, consistent side inset and make sure nothing overflows the viewport.
+
+Resolve gutter, inset, and gridline (border) values with `primer_brand_tokens`; don't hardcode hex or pixel values.
+
 ### Spacing
 
 Generous spacing is what lets a layout breathe; the Flexsuite recipes are a good reference for the rhythm to aim for.
 
-- **Do** — use `Box` and `Stack` (both have responsive spacing props) to add consistent rhythm between sections.
-- **Don't** — pack sections edge-to-edge or hand-roll ad-hoc margins.
+- **Do** — use `Box` and `Stack` (both have responsive spacing props) to add consistent rhythm between sections, and take spacing steps from the standard scale so gaps repeat predictably across sections and inside cards.
+- **Don't** — pack sections edge-to-edge, hand-roll ad-hoc margins, or invent one-off gap values.
+
+### Typographic hierarchy
+
+A page has one clear headline and a calm step-down from there.
+
+- **Do** — use a single hero heading, make secondary section headings a clear step smaller, and set body copy at the standard body size and weight. Left-align long-form copy; reserve centering for short hero or section intros.
+- **Don't** — size secondary headings close to the hero, set body text in heavy weights, or center long paragraphs.
+
+Resolve exact sizes and weights with `primer_brand_tokens`.
 
 ## Component & element patterns
 
 ### Heroes carry media
 
-A text-only hero reads as unfinished; heroes should carry a visual.
+A text-only hero reads as unfinished; heroes should carry a visual and lead with a label.
 
-- **Do** — give `Hero` a `Hero.Image` (or `Hero.Video`); source imagery from `primer_brand_asset` (Octovisuals) or generate it with the Asset Generator MCP (see _Generated imagery_ below).
-- **Don't** — ship a bare, text-only hero.
+- **Do** — give `Hero` a `Hero.Image` (or `Hero.Video`); source imagery from `primer_brand_asset` (Octovisuals) or generate it with the Asset Generator MCP (see _Generated imagery_ below). Lead the hero with an eyebrow label (see _Labels hug their content_), and bound decorative or illustrative media with a set aspect ratio and max height so it stays inside the grid.
+- **Don't** — ship a bare, text-only hero, drop the eyebrow, or let an illustration run arbitrarily tall or bleed full-width.
 
 ### Generated imagery adds color and interest
 
@@ -66,11 +87,18 @@ A grid of items (features, pathways, plans) uses the connected **gridline** grid
 
 ### Labels hug their content
 
-Eyebrow/section labels are intrinsic width; stretching them reads as off-brand.
+Lead heroes and sections with an eyebrow/section label; it is intrinsic width, and stretching it reads as off-brand.
+
+- **Do** — use `Hero.Label` / `SectionIntro.Label` / `EyebrowText` for the standard treatment (a short, monospace, uppercase label) and let it size to its content; alignment follows the section (start by default, or centered inside a centered `SectionIntro`).
+- **Don't** — set a label full-width, give it a block/full-bleed background, or hand-style your own instead of the label components.
+
+### Sweat the small details
+
+Small, repeated treatments are where a page quietly drifts off-brand.
 
-- **Do** — let `Hero.Label` / `SectionIntro.Label` / `EyebrowText` size to their content; alignment follows the section (start by default, or centered inside a centered `SectionIntro`).
-- **Don't** — set a label full-width or give it a block/full-bleed background.
+- **Do** — use dot bullets for lists; keep buttons in their real interactive states (hover/active) and use a `Button` for a primary CTA rather than a bare link; show FAQ/accordion category navigation only when there are several categories; leave `Icon` at its default color — which renders green — wherever Octicons appear (`Card.Icon`, `Pillar.Icon`, and standalone `Icon`) so icons read as one consistent accent.
+- **Don't** — use dashes as bullets, add divider rules between list items or sections, ship flat/stateless buttons, render an empty single-category sidebar, or override the `color` prop on `Icon` or `Card.Icon` to tint icons off-green without a strong, deliberate reason (`Pillar.Icon` has no `color` prop — it's already locked to green).
 
 ## General guidance
 
-- If browser tooling (e.g. the Playwright MCP) is available, verify your work visually before finishing: serve the page locally, open it, and take screenshots across different breakpoints. Review the screenshots against this guidance and automatically fix obvious defects like clipped or overflowing content, cramped spacing, stretched/full-width labels that should preserve their intrinsic width, low-contrast text, a text-only hero, broken images, and off-brand tells (glows, purple gradients, pill buttons, glassmorphism, placeholder copy). Re-screenshot to confirm the fixes.
+- If browser tooling (e.g. the Playwright MCP) is available, verify your work visually before finishing: serve the page locally, open it, and take screenshots across different breakpoints. Review the screenshots against this guidance and automatically fix obvious defects like content that bleeds edge-to-edge instead of sitting in the gridline column, clipped or overflowing content, cramped or one-off spacing, stretched/full-width labels that should preserve their intrinsic width, a hero with no eyebrow, an illustration that runs too tall, dashes used as bullets, low-contrast text, a text-only hero, broken images, and off-brand tells (glows, purple gradients, pill buttons, glassmorphism, placeholder copy). Re-screenshot to confirm the fixes.

package/dist/catalog.json

@@ -1,7 +1,7 @@
 {
   "brandPackage": "@primer/react-brand",
-  "generatedFromVersion": "0.71.0-rc.1102b23e",
-  "generatedAt": "2026-07-08T11:16:29.594Z",
+  "generatedFromVersion": "0.71.0",
+  "generatedAt": "2026-07-13T15:41:57.658Z",
   "components": [
     {
       "name": "Hero",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-mcp",
-  "version": "0.71.0-rc.1102b23e",
+  "version": "0.71.0",
   "description": "MCP (Model Context Protocol) server that helps AI agents use Primer Brand (@primer/react-brand) correctly when building GitHub marketing and landing pages.",
   "keywords": [
     "primer",