Single Accent Color
A product's UI must use exactly one accent/tint color for all interactive affordances — buttons, links, toggles, active states, progress indicators, and focus rings — creating a consistent visual signal for interactivity…
$ aoe install @community/rule-single-accent-colorProjection
Always in _index.xml · the agent never has to ask for this.
SingleAccentColor [rule] v1.0.0
A product's UI must use exactly one accent/tint color for all interactive affordances — buttons, links, toggles, active states, progress indicators, and focus rings — creating a consistent visual signal for interactivity across all surfaces.
Loaded when retrieval picks the atom as adjacent / supporting.
SingleAccentColor [rule] v1.0.0
A product's UI must use exactly one accent/tint color for all interactive affordances — buttons, links, toggles, active states, progress indicators, and focus rings — creating a consistent visual signal for interactivity across all surfaces.
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Applies To
- primary buttons and CTA elements
- links and text-button affordances
- toggles, checkboxes, radio buttons, and sliders
- active navigation items and selection indicators
- progress bars and completion states
- focus rings on keyboard-interactive elements
Counter Examples
- Blue CTAs, green success-state links, orange notification badges all appearing interactive — three accents create ambiguity
- Using the success-state green (#22c55e) on a primary 'Submit' button — semantic collision between action and feedback
- Card hover accent in purple, primary CTA in blue — dual interactive accent signal
Severity
medium
Loaded when retrieval picks the atom as a focal / direct hit.
SingleAccentColor [rule] v1.0.0
A product's UI must use exactly one accent/tint color for all interactive affordances — buttons, links, toggles, active states, progress indicators, and focus rings — creating a consistent visual signal for interactivity across all surfaces.
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Applies To
- primary buttons and CTA elements
- links and text-button affordances
- toggles, checkboxes, radio buttons, and sliders
- active navigation items and selection indicators
- progress bars and completion states
- focus rings on keyboard-interactive elements
Counter Examples
- Blue CTAs, green success-state links, orange notification badges all appearing interactive — three accents create ambiguity
- Using the success-state green (#22c55e) on a primary 'Submit' button — semantic collision between action and feedback
- Card hover accent in purple, primary CTA in blue — dual interactive accent signal
Severity
medium
Examples
- All interactive elements use oklch(55% 0.18 220) as their base accent; hover is oklch(48% 0.20 220) (same hue, darker); focus ring is oklch(55% 0.18 220 / 50%) outline
- Decorative icons use accent-alt oklch(58% 0.16 145) (green) — non-interactive, distinct hue, not competing with the interactive blue
Relations
related: [@community/constraint-max-color-roles-7, @community/rule-brand-color-primary-only, @community/rule-brand-accent-shapes, @community/anti-pattern-rainbow-explosion, @community/counter-example-tailwind-blue-500, @community/example-stripe-dashboard, @community/principle-color-system-foundation]
Rationale
Multiple accent colors on interactive controls produce ambiguity: users cannot learn a reliable mental model of 'what is tappable' if affordances appear in three different colors. One accent color trains a reflex. This is the foundational principle behind Apple's tintColor system and the reason design systems like Radix, Chakra, and shadcn default to a single --primary token. The accent may vary in lightness (hover/active states) but must stay on the same hue. A separate accent for decorative elements (icons, shapes) is permitted — it must not be interactive.
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Applies To
- primary buttons and CTA elements
- links and text-button affordances
- toggles, checkboxes, radio buttons, and sliders
- active navigation items and selection indicators
- progress bars and completion states
- focus rings on keyboard-interactive elements
Counter Examples
- Blue CTAs, green success-state links, orange notification badges all appearing interactive — three accents create ambiguity
- Using the success-state green (#22c55e) on a primary 'Submit' button — semantic collision between action and feedback
- Card hover accent in purple, primary CTA in blue — dual interactive accent signal
Severity
medium
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/rule-single-accent-color/atom.yaml