DEV Community

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

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

Timme
Good Russian. Head of Frontend at Qvant.ru | Unpopular travel blogger.
・1 min read

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!

Alt TextAlt TextAlt TextAlt TextAlt TextAlt TextAlt Text

Discussion (6)

Collapse
tonyketcham profile image
Tony Ketcham • 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.
Collapse
cheesytimmy profile image
Timme Author

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

Collapse
eshimischi profile image
eshimischi

Any plans about Vue 3 integration for Qui?

Collapse
cheesytimmy profile image
Timme Author
Collapse
eshimischi profile image
eshimischi

Good job! Thanks!

Collapse
cheesytimmy profile image
Timme Author

yep! working on it