Anatomy of a Design System Color Palette

Color is the most emotionally evocative and visually prominent element of a digital brand. A professional design system structures color into four distinct functional groups:

1. Brand Colors: The primary and secondary colors that represent the brand identity (e.g., Spotify Green, Stripe Purple, Airbnb Coral).
2. Neutral Colors (Grays): The workhorses of the interface. Neutrals form 80–90% of what users see: background canvases, card surfaces, borders, dividers, and typography.
3. Feedback / Status Colors: Universal functional colors with fixed meanings:
   • Success (Green): Confirmations, positive balances, completed states.
   • Warning (Amber / Yellow): Caution, expiring subscriptions, non-blocking alerts.
   • Danger / Error (Red): Destructive actions, validation failures, critical outages.
   • Information (Blue): Tips, announcements, system notices.
4. Interactive Accents: Distinct colors reserved exclusively for clickable elements, links, and focused controls.