Portfolio

Platform & Context

I selected ClickUp for desktop redesign because work management platforms are primarily used on desktop for complex workflows. After analyzing ClickUp's existing interface, I identified their color system as too subtle, lacking the visual energy needed to inspire productivity. This became my catalyst for creating a differentiated, emotionally resonant color system.

Core Design Challenge: Energy Meets Calm

Work management tools exist in a unique emotional space - users need energy to take action but calm to make decisions without stress. This paradox drove my entire color strategy: create a system that motivates without overwhelming.

Color Selection & Strategic Rationale

Primary: Emerald Pulse (#00D492) - Intelligence

I chose this specific teal-green because it sits at the edge of bright and calm. Green psychology conveys growth and progress (essential for productivity), while the teal undertone adds digital sophistication. Unlike pure bright greens (overwhelming) or muted greens (lifeless), this shade energizes without creating anxiety. It represents Intelligence - clear, smart, digitally native thinking.

Secondary: Ocean Depth (#125D78) - Impact

This deep teal-blue imposes the calming tone that balances Emerald Pulse's energy. It grounds the interface, handles navigation and secondary actions, and provides professional credibility crucial for B2B tools. It represents Impact - depth, substance, and meaningful results. Together with the primary, it creates a visual ecosystem where action is always supported by stability.

Tertiary: Violet Spark (#7B61FF) - Confidence

Purple adds sophistication and premium quality to the system, marking advanced features, AI tools, and special moments. It prevents the palette from becoming monotonous while signaling elevated functionality. It represents Confidence - bold, sophisticated decision-making capability. Used sparingly, it creates hierarchy and visual interest.

System Colors: Functional Intelligence

Success (#00D492): Reuses primary color to psychologically link our brand with achievement - every completed task reinforces positive brand association.

Warning (#F59E0B): Amber provides clear caution without alarm, maintaining emotional calm.

Error (#EF4444): Red ensures immediate attention for critical issues using universal conventions.

Info (#3B82F6): Blue delivers neutral information without emotional weight.

Weight Structure & Accessibility

I selected four weights (300, 500, 700, 900) to balance brand expression with accessibility. Since interfaces primarily use white backgrounds, I needed darker shades for text compliance:

• 300: Subtle backgrounds, dark mode text
• 500: Main UI elements, buttons, brand applications
• 700: Hover states, emphasis
• 900: Text on light backgrounds (WCAG AAA compliant)

Process: I extracted emotionally resonant colors first, then iteratively tested WCAG compliance to find optimal balance. All text implementations achieve AA or AAA standards, with dark weights (900) reaching AAA for maximum inclusion.

Competitive Differentiation

While competitors default to blues and grays (Asana's muted palette, Monday's bright primaries, Trello's blues), this system differentiates through:

• Energizing teal-green leadership vs. corporate blue
• Strategic emotional balance through color pairing
• Sophisticated purple accents vs. playful secondary colors
• Professional credibility without sterility

Emotional Target & Impact

Target user emotion: Calmly confident and motivated

• Calm: Ocean Depth anchors, Emerald Pulse balances saturation
• Confident: Violet Spark sophistication, professional harmony
• Motivated: Emerald Pulse brightness drives action

This color system transforms ClickUp from a subtle interface into a vibrant, confidence-inspiring productivity platform that energizes users while maintaining the calm clarity essential for effective decision-making. It provides clear visual hierarchy, emotional resonance, accessibility leadership, and brand differentiation - all while supporting complex enterprise workflows through a scalable four-weight system.