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

For the purpose of developing this Color System I decided to create a UI design for a fictional productivity toll called ‘ProdActive’ using Figma.

The Color System is designed to reflect the following brand principles:

  • Professionalism
  • Trust
  • Efficiency

Yes, I know what you might think, the color Blue can be associated with sadness and aloofness AND also feelings of calmness and relaxation. It is often described as peaceful, tranquil, secure, and orderly.

Businesses that want to project an image of security often utilize blue in their advertising and marketing efforts. It is also often used to decorate offices because research has shown that people are more productive and creative when working in blue rooms.

Thank you for your attention

----------------------------------------------------

WCAG tester https://accessibleweb.com/color-contrast-checker/

https://www.verywellmind.com/the-color-psychology-of-blue-2795815

Tools used

Figma

From brief

Share

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

Reviews

2 reviews


Gianni, thank you for sharing your ProdActive Color System project—it’s clear you’ve put a lot of work into it!

That said, I have many questions about your design and presentation...

First, I was very (really... very) confused by your description of blue as a colour of sadness and aloofness. While I get where you’re coming from, I don't think this negative association is necessary. In design, blue is overwhelmingly tied to trust, calm, and security—attributes that align perfectly with your brand principles of professionalism, trust, and efficiency. I’d recommend keeping your presentation focused on the positive aspects of your design choices.

I also don’t quite understand the need for so many colours. With multiple blues, reds, yellows, oranges, and greens, the palette feels a bit overwhelming. If you have more than 15 colours—especially when many are variations or tints—it might be better to simplify and create more consistency. The goal should be a cohesive palette that works harmoniously.

A couple of specific things jumped out at me: you refer to a “Pure White” with the HEX value of #2F8733, but this is actually a green shade that isn't used, and you instead use a true white (#FFFFFF). This inconsistency could confuse users.

Additionally, the primary blues don’t all seem necessary. Rather than using so many, you could focus on creating different shades of one blue to handle the varying levels of background, light, and shadow. This would help streamline the design.

When you say the secondary colours communicate task statuses without being overwhelming, I have to disagree. The amount of colours and the way they’re presented actually feels very much overwhelming. It’s hard to trust the research behind a colour palette when the presentation of those colours and their HEX values are hard to read or inconsistent. For example, you list "Lust" as #EB1A1A on one page and then #FC4A4A on the next—why the change? Similarly, "Melon" shifts from pink to brown, which is confusing.

Another issue is that your secondary colours closely resemble the system colours for error, warning, and success, but then you introduce yet another set of colours for those states. This adds to the confusion. You also list tertiary colours like "International Orange" (#B30F0F), but this is clearly red, which further blurs the lines between states and colour purposes.

Lastly, in your WCAG slide, you mention testing some colours for contrast, but you only tested 9 out of the 20 colours in your presentation. I’m left wondering about the rationality behind it and contrast compliance for the remaining colours.

I don't know your level of experience in design or if you are used to presenting your work in this format, but this would be a mess to show in a meeting.

I feel this project needs more thought and refinement. If you'd like, I’d be happy to help you review and revise the most pressing issues to make your presentation stronger and more cohesive.

Keep up the spirit and your hard work!

Hi Helena, thank you so much for your feedback, I really appreciate it. As you can see this is my first Uxcel Project and actually my first ever color system. I’m a beginner and I put a lot of hours of work into this project, describing it as a ‘mess’ to present sounds a little harsh.. but i’ll take it. When I refer to the color blue as the color of ‘Sadness and aloofness’ I was referring to the common expression of “Feeling Blue”, that I’m sure you’ve heard. I will go back and fix those HEX values errors. Lastly I would love to see an example of a color system you think it’s ready for presentation to draw some inspiration from and learn from the best 😁 Thank you again!
Gianni, I appreciate your response and understand that, as a beginner, investing a lot of hours into a project only to receive critical feedback can be frustrating. However, I want to clarify that my comments were focused solely on the work presented, not on you personally. I get that it’s tough when something you’ve worked hard on doesn’t receive the feedback you hoped for. But the main point I was trying to convey is that your colour system has too many colours, which makes it complicated to navigate and, for something so simple, not necessary. You could achieve the same effect with fewer colours by using different shades of the same base colours, like blue. The goal of my review was to help you critically evaluate your work so you can reflect on it and improve.
I hear you on the "feeling blue" reference, and I get the connection now. I think the key will be framing your explanation in a way that stays focused on the positive aspects of blue in design since that’s what will really resonate with users and stakeholders. Also, I see you're using Figma, which is great! There are some wonderful plugins that can help streamline your colour contrast testing and usability checks, making it easier than using an external website like the WCAG tester you mentioned. I recommend trying out these plugins for Figma: https://www.figma.com/community/plugin/732603254453395948/stark-contrast-accessibility-checker https://www.figma.com/community/plugin/748533339900865323/contrast

Hi Gianni. I'm not sure if you're a beginner or intermediate, that may have influenced the level of detail of my review.

But essentially, I love that your contents are well laid out, and there is clear hierarchy. The side bar is clearly 'separated' from the content window.

You wrote a majorly around the color system, I'm not sure if you want the review to be only around the color scheme. You may need to be clearer next time so you can get more specific feedback.

The color system you have chosen is like what you will find in 70% of most dashboards😊. Blue is more like a default primary color and I doubt anyone will associate it with sadness and aloofness as you mentioned.

But I think you may need to work on your typography. Play around different weights to have better hierarchy. For example, the table header is not clearer differentiated from the table contents.

Your contrasts also may need some work. You can use a contrast test plugin to check. For example, the "completed tag/badge". Some of the colors can also not be differentiated by color blind users e.g. red/green.

Lastly, I think you should work on consistency for your icons. You mixed outline and filled icon styles in your side bar nav menus. You can stay with one unless with change of states - default and selected state.

Thanks.


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