🥷 Introducing Qui - A Vue.js Design System for Web

#css #vue #design #javascript

Hi, guys! We're ready to introduce Qui 🎉 - A Vue 2.x design system, we use for building great SPA apps for our customers!

Check Storybook out!

What is it?

🔩 30+ Vue components
📦 icons pack
🏳️‍🌈 colors & grid
🥷 neumorphism styles
📚 storybook sandbox

Qui is our first Open-source product, feel free to help and contribute!

Top comments (6)

Anthony Gushu • Dec 16 '20 • Edited

Awesome how much work you've all put into this. Making a design system is a ton of work and this looks pretty good! I really, really love those primary buttons - the gradients are fantastic. I also love the table presentation; it gives so much more life to the tables. The breadcrumbs are very unique too.

A bit of feedback:

The components with a bunch of close-together raised items in a grid (like the buttons in the calendar of the date pickers, and the buttons in the pagination for example) place a noticeable amount of mental/visual strain on me. The rapidly perceived elevation changes with highlight/shadow seem like overuse of neumorphic elevation, which makes me focus on that rather than focusing on the content I'm supposed to be interacting with.
- Perhaps toning down the elevation perception on those tightly-packed elements and adding a lightly colored border/a brighter bg-color would maintain the design system while improving the fluidity of the system by making the content more accessible.
The disabled state on the buttons would look really sick if their content box matched the cutout/pushed in look of the section text, so that they're noticeably pushed into the page.
I feel the hex code preview on the color picker would look even better pushed down into the component rather than elevated.

Timme • Dec 16 '20

thank you! we've been working a lot, feedback is really important for us!
we realize neumorphic styles can be unwonted, I reported your feedback to our designers, we will discuss it