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

Color System for ProofHub

The primary palette consists of dynamic purples, embodying innovation and efficiency, which are core to Todoist's brand principles. Secondary colors introduce vibrant pinks and purples, evoking creativity and approachability. Tertiary shades of mint and aquamarine add a refreshing and calming touch. Neutral grays ensure versatility and accessibility, grounding the brighter hues and ensuring WCAG compliance for text contrast. System colors can be employed for alerts and are strategically applied within the UI to intuitively guide user interaction. This color system not only enhances the brand’s visual identity but also prioritizes user accessibility, fostering a harmonious and inclusive digital environment.

Tools used

Figma
FigJam

From brief

Topics

Share

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

Reviews

2 reviews


Thank you for your work. It's commendable that your selected colors comply with WCAG requirements and that you value accessibility.

However, I have concerns regarding your color choices. The primary color red is often associated with danger and used for destructive actions. You've also chosen a reddish tone for system colors. Unfortunately, your interface examples are of poor quality, making it difficult to see how you might have successfully used red as a primary color. I also have concerns about the secondary colors. Greys are excellent neutral colors perfect for indicating inactive or disabled states, and I'm unsure how they might work as a secondary color. Again, this isn't very clear from the provided interface examples.

I hope my recommendations help you improve your work.


I like the efforts you put into that project.

You should make sure that the color combination you are using have a high enough contrast for accessibility. The white text on a pink background has very low contrast (~1.5). You could use contrast checker plugins on Figma.

Also, make sure your layout is consistent throughout the presentation.


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