dotkom / design-system

Component library, maybe
https://design.online.ntnu.no
MIT License
4 stars 4 forks source link

Colors #28

Closed plusk closed 4 years ago

plusk commented 4 years ago

A color palette defines which colors you're allowed to use when developing, for the most part. Exactly which color values we choose isn't as important as how we structure them and use them. We can have as many different colors of gray as we want, but how do you as a developer choose which one to use?

Variations:

Blue should have a darker blue which we'll use for backgrounds like the header. A more neutral blue would be used for your typical interactive element, like buttons.

Orange is our accent color (unfortunately), but orange is a hard color to work with. We probably don't need a lot of variations for it, and it should be used sparingly, especially on white backgrounds. We've had some success with orange on dark blue backgrounds, like fadderukesplashen.

Grays are important. Having a just-darker-than-white background color is part of our design on OWF now, with white cards to contrast with. Some very-dark gray should be used for text, and this is mostly a question of "how many shades of gray?".

Status colors are also important. A green confirmation/success color, a red error/danger color, a yellow warning color, etc.

We've also toyed with the idea of having group/type-based colors, like a "bedpres" color or a "fagkom" color. Personally I'm not a fan and think it makes our design messy, but it requires mentioning here regardless.

plusk commented 4 years ago

Sorta relevant article: https://refactoringui.com/previews/building-your-color-palette/