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

A set of colors used consistently in the design to make the interface clear, easy to use, and visually appealing.

Tools used

Figma

From brief

Topics

Share

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

Reviews

6 reviews


really nice work on this color system 👏

What stood out to me:

  • The structure is clear — I like how you split primitives from semantic roles, it makes the system easy to follow.
  • Covering text, icons, borders, and backgrounds shows you’re thinking beyond just a palette and into actual UI application.
  • The consistency and depth (100–900 scales) gives a lot of flexibility for usage.

A couple of thoughts that could make this even stronger:

  • Add some accessibility validation (contrast ratios, WCAG notes) to show it’s usable, not just visual.
  • Share a bit of rationale — why these palettes, why this structure — to give insight into your design decisions.
  • Show a few real UI examples (like alerts, buttons, forms) using the tokens, so we see them in action.
  • If possible, mention how this could extend to light/dark themes in the future.

Overall, this is a very solid and professional foundation. With a little more context and accessibility framing, it’ll feel like a complete, senior-level case study 🚀


I think this color system feels very practical – it’s simple to use, yet still gives designers enough flexibility. On top of that, if you start working with variables, it will be a big advantage for you – you’ll be able to manage all colors from one place and easily switch between Light and Dark modes whenever needed.


Raisul, the color system looks clean and consistent — practical enough for everyday use while still leaving room for creativity. Nice balance between accessibility and flexibility!


Great work, Raisul! I really like the color choices and the overall structure you’ve put together; it feels clean and thoughtfully organized.

A couple of ideas that might make this even stronger:

  • Adding some “Do/Don’t” examples with WCAG accessibility benchmarks could help make the color combinations easier to understand in context.
  • Including a few real-world use cases or applied examples would bring the design to life and show how the colors work in practice.

Overall, you’ve got a solid foundation here.


Really solid work on the color system! Splitting out primitive and semantic colors makes the whole setup easy to understand and use. I can see you’ve thought about practical UI needs, not just making things look good—covering text, icons, borders, and backgrounds is a smart move.

To push it further, I’d suggest adding accessibility checks like contrast ratios or WCAG notes. This helps make sure your colors work for everyone. Also, a few real UI examples—like buttons or alerts—would show how your tokens come to life in actual designs.

Keep going! You’ve built a strong foundation and these tweaks will help your system stand out even more.


I think this color system works really well - it’s clean, consistent, and covers both light and dark modes nicely. What I really like is how it feels flexible enough for designers to use without being too restrictive, but at the same time it keeps everything looking unified. The balance between accessibility and creativity stands out - you’re making sure things stay readable while still giving room for personality in the design. It feels like something that would actually speed up design work, because the rules are clear but not overwhelming.


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