Brand Color Primary Only
High-chroma brand colors and the primary action color must appear only on primary interactive actions (CTAs, active states, focus rings, progress indicators) and key highlights — never on decorative elements, backgrounds…
$ aoe install @community/rule-brand-color-primary-onlyProjection
Always in _index.xml · the agent never has to ask for this.
BrandColorPrimaryOnly [rule] v1.0.0
High-chroma brand colors and the primary action color must appear only on primary interactive actions (CTAs, active states, focus rings, progress indicators) and key highlights — never on decorative elements, backgrounds, or secondary content.
Loaded when retrieval picks the atom as adjacent / supporting.
BrandColorPrimaryOnly [rule] v1.0.0
High-chroma brand colors and the primary action color must appear only on primary interactive actions (CTAs, active states, focus rings, progress indicators) and key highlights — never on decorative elements, backgrounds, or secondary content.
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Applies To
- primary CTA buttons and interactive affordances
- active navigation states and selection indicators
- progress bars, loaders, and completion indicators
- focus rings on keyboard-interactive elements
Counter Examples
- Brand orange on hero background, card borders, icon fills, AND primary CTA — saturation everywhere, hierarchy nowhere
- High-chroma accent on every feature badge — decorative overload dilutes signal
- Using --color-primary directly on section dividers or illustrative shapes
Severity
medium
Loaded when retrieval picks the atom as a focal / direct hit.
BrandColorPrimaryOnly [rule] v1.0.0
High-chroma brand colors and the primary action color must appear only on primary interactive actions (CTAs, active states, focus rings, progress indicators) and key highlights — never on decorative elements, backgrounds, or secondary content.
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Applies To
- primary CTA buttons and interactive affordances
- active navigation states and selection indicators
- progress bars, loaders, and completion indicators
- focus rings on keyboard-interactive elements
Counter Examples
- Brand orange on hero background, card borders, icon fills, AND primary CTA — saturation everywhere, hierarchy nowhere
- High-chroma accent on every feature badge — decorative overload dilutes signal
- Using --color-primary directly on section dividers or illustrative shapes
Severity
medium
Examples
- A SaaS dashboard: primary brand blue appears only on the 'Create New' CTA and the active sidebar item — all other chrome is neutral
- oklch(55% 0.18 220) for the primary button; oklch(88% 0.04 220) for subtle card backgrounds — chroma drop signals non-interactive role
Relations
related: [@community/rule-brand-accent-shapes, @community/constraint-max-color-roles-7, @community/anti-pattern-generic-saas-blue, @community/anti-pattern-rainbow-explosion, @community/counter-example-tailwind-blue-500, @community/example-stripe-dashboard, @community/principle-color-system-foundation, @community/rule-single-accent-color]
Rationale
Color scarcity is a visual hierarchy tool. When the brand's most saturated color appears on every card, icon, badge, and background, it loses its ability to direct attention. Users learn to ignore it. Reserving high-chroma and brand colors for primary actions trains the eye: saturated color = something to do. Overuse is a primary marker of AI-generated UI that lacks hierarchy intent.
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Applies To
- primary CTA buttons and interactive affordances
- active navigation states and selection indicators
- progress bars, loaders, and completion indicators
- focus rings on keyboard-interactive elements
Counter Examples
- Brand orange on hero background, card borders, icon fills, AND primary CTA — saturation everywhere, hierarchy nowhere
- High-chroma accent on every feature badge — decorative overload dilutes signal
- Using --color-primary directly on section dividers or illustrative shapes
Severity
medium
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/rule-brand-color-primary-only/atom.yaml