Color System for Toggl

Hi Thy,

solid work on this. You’ve explained your rationale behind your color choices quite well. My personal perception is that your color choices are better than the official Toggl color choices. Here a few places to grow:

• Build out your neutral colors. I can see in your UI examples, you understand the importance of using more neutral colors. There’s the 60-30-10 axiom for color balance, and it looks like you understand that. Go ahead and define not just your white, but your other neutrals as well. You’ve got a black in your text that I don’t see in your palette. Give yourself more options than you think and spell them out. They’re going to be foundational for a lot of your UI. You’ll want to be able to distinguish between a neutral background and a neutral input field for example.

• You mentioned your primary colors being WCAG AAA. How do you figure that? Let us know your thinking for how those colors work together. Your whole color palette is solid, but the usage of one color with another affects accessibility more than the any one color itself. Explaining your thinking for how to use your selections in functional pairings or component use cases would be helpful.

Overall, I can tell you have a solid foundation for color theory and your UI game is pretty strong as well. Keep it up!

I like the pastel palette, very harmonious!

In your brief, you mention the "trustworthiness" of blue, which doesn't ring true. I know in color theory they attach emotions and meanings to color but I don't think the average user cares about that. Meta (Facebook) is one of the most untrustworthy companies on the planet. Their primary color? Blue.

I'd also avoid the use of true white. It, along with true black, is often difficult to read because it tends to "buzz" against other colors. It's especially difficult for people with dyslexia to read. I'd recommend using a light version of the primary color or even a light gray in place of white.