Pillar component updates

[rezrah]

Summary

Towards https://github.com/github/brand-experience/issues/73

Additional updates to Pillar to match Content Pillar refactor designs.

🔗 Preview docs

List of notable changes:

• Increased icon size to 32px and added 48px margin between it and heading
• Increased heading size from subhead-large to 6
• Added a gridline example to storybook
• ⚠️ Removed the color prop entirely as it's no longer recommended design.

What should reviewers focus on?

• Are changes closer/matching the intended design here.
• Are we missing any changes.

Steps to test:

1. Review docs
2. Review storybook examples
3. Report any inaccuracies or issues

Supporting resources (related issues, external links, etc):

• Content Pillar designs: https://www.figma.com/design/hUT1gnfCRTX7iPZSjOg8Vp/Primer-Brand-2026?node-id=4612-34118&t=U2MT3sQnNMnfkBUN-4

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Before	After

[changeset-bot]

⚠️ No Changeset found

Latest commit: 697f6fa

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes changesets to release 8 packages

Name	Type
@primer/react-brand	Minor
@primer/brand-primitives	Minor
@primer/brand-docs	Minor
@primer/brand-css	Minor
@primer/brand-e2e	Minor
@primer/brand-fonts	Minor
@primer/brand-config	Minor
@primer/brand-storybook	Minor

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

🟢 No design token changes found

[github-actions]

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

[Copilot]

Pull request overview

Updates the Pillar component (and its downstream recipe/docs usage) to align with the “Content Pillar” refactor designs by adjusting default sizing/spacing, adding a new Storybook example, and removing the now-undesired icon color customization API.

Changes:

• Removed Pillar.Icon color API (and related FlexTemplate forwarding) so backgrounded Pillar icons always render green.
• Updated Pillar visual styling: icon size defaults to 32, increased icon-to-heading spacing, and heading defaults to size 6.
• Added a “Gridline” Storybook example and updated visual regression coverage accordingly.

Show a summary per file

File	Description
packages/react/src/recipes/SolutionTemplates/SolutionPage/SolutionPage.tsx	Updates example usage to remove Pillar.Icon color prop.
packages/react/src/recipes/FlexTemplate/FlexTemplate.types.ts	Removes iconColor from pillar item type to match the removed Pillar icon color API.
packages/react/src/recipes/FlexTemplate/FlexSection/FlexSection.tsx	Stops forwarding iconColor into Pillar.Icon.
packages/react/src/recipes/FlexTemplate/examples/FlexTemplate.examples.stories.tsx	Updates recipe examples to remove iconColor usage.
packages/react/src/Pillar/Pillar.visual.spec.ts	Adjusts visual tests to include the new Gridline example and drop the removed icon-colors coverage.
packages/react/src/Pillar/Pillar.tsx	Implements Pillar icon/heading default changes and removes color prop support.
packages/react/src/Pillar/Pillar.module.css	Increases spacing below the icon.
packages/react/src/Pillar/Pillar.features.stories.tsx	Removes icon-color story content tied to the deleted API.
packages/react/src/Pillar/Pillar.examples.stories.tsx	Adds new “Gridline” example story.
apps/next-docs/content/components/Pillar/react.tsx	Removes docs helpers tied to the deleted PillarIconColors export.
apps/next-docs/content/components/Pillar/react.mdx	Updates documentation to remove color prop references (but still needs a couple corrections).
.changeset/fuzzy-pillars-smile.md	Documents the breaking API changes and visual updates for release notes.

Copilot's findings

Comments suppressed due to low confidence (1)

packages/react/src/Pillar/Pillar.tsx:105

• In the hasBackground={false} branch, the size prop is destructured but never applied to the rendered icon element/component, so consumers setting size will see no effect. Consider mapping named sizes to numeric (same as Icon) and passing the resolved size via cloneElement/props or applying width/height styles so size works consistently regardless of hasBackground.

function PillarIcon({icon, className, hasBackground = true, size, ...props}: PillarIconProps) {
  if (!hasBackground) {
    const iconWrapperProps = {
      ...(props as React.HTMLAttributes<HTMLSpanElement>),
      className: clsx(styles.Pillar__icon, className),

• Files reviewed: 12/35 changed files
• Comments generated: 1

[github-actions]

🟢 Unit test coverage changes found

Unit test coverage has been updated through this PR.

Changes: 0 new tests, 0 removed tests, 0 improved, 1 decreased

Component/Hook	Statements	Functions	Branches	Change
Pillar	97.2% 97.1%	100.0%	89.3% 88.9%	-0.4%

[github-actions]

🟢 Bundle size report

Check	Main	Branch	Change
UMD — full bundle (JS)	0 B	96.61 kB	🆕 96.61 kB
UMD — full bundle (CSS)	0 B	63.27 kB	🆕 63.27 kB
ESM — full bundle (JS + CSS)	0 B	1.46 MB	🆕 1.46 MB
ESM — tree-shaken simple (Button)	0 B	66.31 kB	🆕 66.31 kB
ESM — tree-shaken complex (ActionMenu)	0 B	75.12 kB	🆕 75.12 kB

[danielguillan]

LGTM! 🚀