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

In crafting the design system for Trello, I introduced a modern dark theme that foregrounds content, highlighted by a vivid yellow to draw attention to active and interactive elements. Muted purples and creams are thoughtfully implemented to categorize and separate workspaces without visual overload. The design prioritizes accessibility, with high contrast ratios ensuring legibility. This visual approach not only enriches the user interface with clarity but also enhances the overall user engagement with its intuitive navigation.

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

Reviews

17 reviews


Neatly Presented System. Loved the way You added WCAG systems too!


Good job, Matvei! Selection of colors are well-balanced and easily explained. The inclusion of a UI example is particularly helpful in understanding the rationale behind the design decisions. Keep up the good work!


Matvei, fantastic job! Your color palette selection is well-balanced and thoughtfully explained, aiding understanding of your design choices. The inclusion of UI examples adds valuable context, enhancing clarity. Keep up the great work!


A really nice colour set, and you've also presented it really well. Clean, clear and attractive. I also love the design rationale description with each set, and the demonstration of accessibility with WCAG, as well as the colours in contextual use. Great work!


Yellow is not the most easy color to use, so congrats on the bold choice.

The palette works well, and the work is presented nicely - loved the application example.

If you'd like to take it one step further, I would look into exploring how your primary & secondary colors interact with the system colors.

Keep it up! 🚀


The color system has solid foundations. You can see thoughtful structure with P/S/T tonal scales, the WCAG section with contrast ratings is a great practice that many skip, and the system colors (error/warning/info/success) follow the convention. The dark theme is consistent, and the Trello component shows the system actually works in practice.

There's one serious clash though: the Warning color (#FFE033) is identical to Primary P300. This breaks the principle that system colors must be distinguishable from the brand. The user won't know whether something needs attention or is just a UI accent. Similarly, Info (#4433FF) is very close to Secondary S300, which further blurs the meanings. In the palette descriptions, "time tracking" appears, but Trello is a kanban tool. This looks like copy-paste from another project and is worth refining. The tonal scale 50/100/300/500 skips 200 and 400 - an unusual choice that's worth justifying.

Overall, really solid work at the level of structure and systems thinking. Separating brand from system colors and tightening up the descriptions will quickly push the quality to production level. The direction is very promising! 😊✌️


Okay this is clean 🎨🔥 I like how you approached the Trello Color System with structure instead of just picking “nice colors.” It actually feels like a system not a random palette thrown together.

What stands out is the balance. The colors feel flexible enough for different use cases, but still cohesive. I can imagine them working across tags, states, backgrounds, and highlights without clashing. That’s hard to pull off 👌

If I’d challenge you a bit, maybe show more real board examples using the system like cards in different states, labels, or priority levels 🚀 That would make it feel even more practical. But overall, solid thinking and very product-minded work.


Hello Matvei, your Trello color system is excellent work. I appreciate your comprehensive structure covering primary, secondary, tertiary, and system colors with WCAG compliance and UI examples. The attention to accessibility and professional presentation make this really solid design system documentation. Great work!


impressive colors
(edited)

I like it!


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