<?xml version="1.0" encoding="utf-8"?>
Open full project

Introduction & Project Description

As part of a brand refresh initiative, this project explores the creation of a new, accessible, and emotionally resonant color system for ClickUp, a popular digital work management platform.

The primary goal was to create a color palette that distinguishes ClickUp from its competitors, supports user focus, and enhances usability across its web platform. The system was designed to strike a balance between creativity and professionalism, reflecting ClickUp’s identity as both a powerful and user-friendly productivity tool.

The process involved:

  • Selecting primary, secondary, tertiary, neutral, and system colors that align with ClickUp’s brand values.
  • Ensuring WCAG 2.1 AA compliance for accessibility across all UI text and elements.
  • Considering emotional impact and psychological color theory to strengthen user connection.
  • Applying the palette to various UI components such as buttons, backgrounds, alerts, and branding materials.
  • Presenting the color logic using clear documentation and visual swatches.

This color system is intended to be scalable across light and dark modes, consistent throughout product and marketing assets, and inclusive for all users.

Tools used

Figma

From brief

Topics

Share

Share your insights — leave a project review and help others grow their skills

Reviews

5 reviews


Hi Wiam, great to see this project. I like how simple yet effective you made this showcase. It created from the template creatively and adequately. I love how you included the mockup of clickup UI at the end of the showcase to show how the color system was applied.

However, I can see you also included the text like "Explain why these colors are chosen as system...". I think that was a mistake?

Love to see your next project. Thank you Wiam.

Thank you so much for your thoughtful comment! 😊 I’m really happy you enjoyed the showcase and appreciated the mockup touch at the end. I wanted to make the color system feel more real and grounded. And yes, you’re right about that leftover template text, good eye! 😅 It was a little slip, but I’ve already gone ahead and fixed it. Thanks for pointing it out so kindly. Can’t wait to share more projects with you soon!

Really nice work making the ClickUp colors feel both fresh and accessible 👍—to push it even further, you might add more in-context UI examples to show the system’s versatility, but overall you’ve built a strong and professional palette!


@Wiam this color system is truly impressive, To take it to next level, consider giving more specific names to your individual colors and showcasing them in a wider range of UI examples. Bravooo


Amazing


I really love how you present your work


32 Claps
Average 3.6 by 9 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>