Status: Phase 1 stub. Matures in Phase 5 per §8.1. Audit reference: pattern #36.

Statement

The purple → pink brand gradient is the system's signature. It signals "this is the primary action on this surface, the one decision the screen is asking the user to make." It appears at most once per screen as a CTA, plus its sanctioned non-CTA appearances (logo lockup, hero accent in marketing surfaces). Two brand-gradient buttons on the same screen is forbidden.

Why

Audit pattern #36 documented 11 screens with two or three brand-gradient CTAs simultaneously visible. The visual weight of the gradient is so high that the user cannot tell which action is primary. Worse, a screen with three "primary" CTAs reads as a screen with no primary CTA — the gradient stops meaning anything because it's no longer scarce.

The gradient is not a "color" the user picks for emphasis. It is the moment of decision the surface is built around. A surface with no clear primary decision either doesn't need a gradient at all (use a secondary or ghost button) or doesn't deserve to ship until the decision is clarified in product design.

How

<Button variant="primary"> (Phase 1 Track B PR) is the only CTA-rendering surface that consumes the brand gradient. A lint rule (Phase 2, §5.1) flags more than one variant="primary" per route file. Storybook stories that render multiple primary buttons per screen frame are required to include a comment explaining why (pre-flight check, A/B test, etc. — should be rare).

Marketing/landing surfaces and the logo are the sanctioned non-CTA gradient appearances. The hero gradient on /landing is a brand moment, not a CTA, and the InstallBar's primary "Install" button is the screen's one CTA — both coexist by design.

Phase 5 deepens this stub with the per-route audit (which surfaces had multi-gradient violations and how each was resolved), counter-example screenshots, and the canonical hero-vs-CTA distinction.