Trello Color System
I decided to proceed with a tool I am already familiar with: Trello. Then, I began brainstorming ways to enhance the project by emphasizing a clear, step-by-step process. My goal is to create a more intuitive user flow that improves usability and makes the progression through tasks straightforward and intuitive.
To ensure accessibility, I carefully selected colors for the interface. I used the WebAIM contrast checker to verify that the color palette meets accessibility standards, providing sufficient contrast for users with visual impairments or color vision deficiencies.
Reviews
4 reviews
Hey Andrés, thanks for sharing your colour system project!
I can see there was a lot of thought put into organizing everything around brand values, emotion, and accessibility. That said, I had a few thoughts that might help clarify and strengthen the direction.
To start, I’m not entirely convinced that the color choices align with Trello’s existing brand. Trello stands for trust, reliability, clarity, and ease of use. Associating the platform with earthy tones like muted mustard and olive green, while conceptually interesting, feels slightly off; they evoke nature and individuality more than focus and structure. It’s a bit of a stretch from what users currently associate with Trello.
For a tool like Trello, where what is needed is clarity and task management, having too many colours in active use could end up taking away focus away from the actual content. You might consider narrowing the palette a bit in practice: maybe keep one or two core colors for major components, and reserve the rest for accents like buttons, icons, or notifications.
Also, the UI example doesn't feel connected to the proposed system. The primary colour — Deep Navy — isn’t used in the UI at all, even though it’s meant to be the visual foundation. New colours like #D9D9D9 and #F1F0F0 are introduced in the UI example without any mention, and it’s unclear whether they’re part of the tertiary palette or an entirely different system. If they’re meant to be included, it’d be helpful to clarify their roles.
Another thing I noticed is that the Muted Mustard #D4A017 and Warning Yellow #EEAD0A are very close in tone, which could easily lead to confusion, especially when users are scanning quickly or have visual impairments. In the UI, #EEAD0A (warning) appears to be used decoratively rather than for system alerts. That kind of overlap between system and decorative colors can dilute their meaning and hurt usability.
On that note, I’d also recommend expanding the WCAG contrast check to include the system colours (success, warning, info, and danger), especially considering their critical role in communication of this kind of platform. Right now, only a few combinations are documented, and that leaves some uncertainty about compliance in key areas.
I think the structure of the color system is thoughtful, but there's a noticeable disconnect between the proposed palette, the Trello brand and the UI example, and some refinement in how colors are mapped to real use cases would go a long way.
Would love to see how this evolves! Great job so far!
A clear and consistent color system that enhances usability while staying true to Trello’s brand. Smart and well-organized work!
Hi✨
Oh, what a brilliant idea — taking a familiar tool like Trello and really thinking through how to make it even more intuitive and step-by-step! That's such a smart approach to enhancing usability and the overall user flow.
I absolutely love that you dedicated so much attention to accessibility, carefully selecting colors and verifying their contrast with WebAIM! That's truly the gold standard in UX design, because it makes your product useful and comfortable for the widest possible audience. Your background and text colors are wonderfully chosen, meeting all the contrast standards, and that really shines through in your examples. Excellent work on that aspect!
Now, if I could just offer one little thought for future growth:
🟪 Managing Your Color Palette: Your shades themselves are so interesting and pleasing, and they create such a vibrant mood! However, for a tool like Trello, where clarity and minimizing distractions are key for task management, having too many different bright colors in active use might become a little distracting for the user, pulling focus away from the actual content or tasks. Perhaps you could explore slightly reducing their overall application: maybe choose one or two primary colors for larger blocks or text, and then use the others as accent colors — for buttons, icons, or highlighting really important information.
This could help retain the lovely energy of your palette while maintaining visual cleanliness and focus on tasks, which is crucial for the user's cognitive ease.
Overall, you've done an impressive job! You've really shown that you can not only create beautiful designs but also deeply consider their functionality and accessibility. Keep up the fantastic work. You're absolutely on the right track!
Great work, Andrés! 👏
Your project inspired me to be more intentional in balancing usability with accessibility.
Thank you for sharing your process!
You might also like

🎛️ Headless Button System

Siter.io Signup & Login A11Y

High Impact Landing page

Type Scale for a Therapist Website

iOS Icon Evolution
