Decoupling Brand Color from Interactive Accent

A classic design pitfall occurs when a company's brand marketing color is an unreadable pastel or neon yellow (e.g., #FFE600 or #70FFE5).

If the design system team naively assigns this marketing color as the primary interactive button color:

• White text on yellow has a catastrophic 1.1:1 contrast ratio (completely unreadable).
• Black text on yellow passes contrast, but when used for text links or small buttons on dark mode, it creates overwhelming visual noise.

The Architectural Remedy: Decouple Brand Identity from UI Interactive Accents:

• color-brand-marketing: Celebrated in hero banners, marketing landing pages, and logo marks.
• color-interactive-accent: A curated, darkened or adjusted tone engineered strictly to pass WCAG AA contrast across all interactive states.