Here are some of its standout features: - Guaranteed to pass target contrast ratios: Ensures every color choice enhances readability. - Human-centric design: Based on APCA guidelines, it accurately reflects how our vision perceives text.

- Supports light and dark mode: Seamlessly adapts to your preferred theme. - Fast interactions: Provides a smooth and responsive user experience.

I created Tokens to practice and hone my craft while also adding some coding skills. I have many ideas to refine and evolve it, such as incorporating keyboard navigation, implementing a high-contrast mode, simulating colorblindness, and adding fluid animations to line charts.

However, I believe this is a solid foundation to build upon. Please let me know what you think—I always appreciate feedback! 🙏🏻

Elegant! But I wonder… If I’m a colour blinded person, is there any way I can tell the difference between each lines?

That’s a great question, and definitely a tough challenge! I’ve picked colors in their purest form and spaced them out on the spectrum to make them stand out from each other as much as possible. But I don’t think it is enough… Currently, this is the difference. What do you think?

There are some plugin you can run on Figma and give you the render of how your designs turned out for colour blinded users. Maybe you can try it out. One example: figma.com/community/plug…

okay this is super cool. i love the little interactions when you’re adding more departments in. one piece of feedback i’d give is that there seems to be a fair bit odd space still left on the top end of the graph, would be nice to see it utilized in full.

Thanks! yes, totally agree, that's an odd space. Definitely something I'm going to polish

Can play with it here: robertorguezgijon.com/tokens

love it