DEV Community

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

Collapse
 
anthonygushu profile image
Anthony Gushu • 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

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