[discussion][ux] add guidelines for a consistent ui/ux

[dominikg]

Currently lots of features get added quickly where many of them look coherent in themselves but joined together they create an experience that is not the same.

As a starting point some of my thoughts when going through the UI

• spacing vs border vs (background-)color
• vertical and horizontal alignment, also on text baseline
• icon positioning (prefix or postfix, currently its a mix without a recognizable pattern)
• tooltips on numeric fields ( eg explain what xx / yy means on dependencies)
• link to internal routes where it makes sense (dependencies in ui and package.json instead only npm-graph)
• no hidden interactive ui (that only becomes visible on hover like the copy button on npm install box)
• prefer full words over abbreviations when space is available (DEPS -> Dependencies, VULNS -> Vulnerabilities)
• no surprises/consistency with user inputs. (eg typing on the homepage search box adds the first char as search query to history)
• when to use animations/transitions
• semantic html and a11y requirements

[graphieros]

We are probably missing Base components to standardize the UI

[garthdw]

Another one to add is where accent color should be used.

e.g. Some links on hover use accent color others don't.