Asana Color System (Redesign)

This color system is designed to modernize the Asana work management tool, balancing vibrancy with accessibility, and aligning the visual identity with values of clarity, collaboration, and motivation. It includes a full spectrum of primary, secondary, tertiary, and system colors, all optimized for WCAG accessibility compliance.

🔵 Primary Colors

The primary palette establishes the core identity of the interface. These colors are used in key actions, branding, and major UI elements like buttons and headers.

• #4B74FF – Electric Blue: Trust, energy, modernity.
• #FF6B6B – Coral Red: Emotion, urgency, friendliness.
• #28C76F – Fresh Green: Growth, success, balance.
• #FFC857 – Mustard Gold: Optimism, creativity, warmth.

🧠 These hues were chosen for their emotional resonance and ability to visually differentiate Asana in a competitive landscape.

🟣 Secondary Colors

These colors provide visual support, enabling emphasis and flexibility without overpowering the primaries. Ideal for highlights, navigation, and background utilities.

• #BFA2FF – Soft Lavender: Creativity, calm.
• #6D7BC3 – Dusty Indigo: Depth, trust, structure.
• #344966 – Muted Navy: Stability, professionalism.
• #53D3D1 – Sky Teal: Clarity, freshness, approachability.

🧩 The secondary palette ensures contrast and emotional variety while supporting hierarchy.

🟡 Tertiary Colors

The tertiary set supports backgrounds, hover states, and subtle surfaces like cards and inactive components.

• #E6FFFA – Mint Frost: Light, clean, refreshing.
• #F3F0FF – Lavender Mist: Soft, ambient, non-intrusive.
• #FFF5E1 – Sand Beige: Warmth, approachability.
• #F1F5F9 – Cool Grey: Neutral base, modern tone.

🎯 These are intentionally quiet to let interactive elements shine while maintaining visual rhythm.

🛠️ System Colors

System colors are dedicated to functional messaging and feedback, ensuring intuitive interaction and clear guidance.

• #28C76F – Success: Positive actions, confirmations.
• #FFA800 – Warning: Caution, decision prompts.
• #EA5455 – Error: Validation issues, urgency.
• #00CFE8 – Info: Guidance, neutral updates.

Each is emotionally tuned to be informative without causing undue alarm and aligned with their functional context.

♿ WCAG Accessibility

All foreground-background color pairings are tested to meet or exceed WCAG 2.1 AA and AAA compliance:

• ✅ Strong contrast for text and UI components.
• ✅ Legible against both light and dark surfaces.
• ✅ Inclusive of users with visual impairments.

🧠 Accessibility is not an afterthought but a core principle, ensuring usability across diverse user needs and device conditions.