Use segment design approach
PeterRydberg opened this issue · 3 comments
Is your feature request related to a problem? Please describe.
The blue/gray background is a nice color choice, but it's used as a background on every component. This means that the design is very "border-and-margin" oriented, so the user relies on that for section separation. It can work in some instances, but it's often a little disorienting.
Describe the solution you'd like
Segmenting main components with a simple, contrasting color and border on the main components can help a lot!
Describe alternatives you've considered
I did some very rudimentary CSS changes in my browser, and ended up with a solution like in the image below. Keep in mind that I did little to no color consideration before adding it, so choose what you like best! I recommend something that isn't too contrasting either, as it may be a little clashing or busy. The CSS I used is border: 1px solid #666666; background: #111621; padding: 1em; . Also note that I changed the right-hand grid to match the height of charts with facts!
Additional context
Nice job on everything, it looks super smooth 🥰
It's probably not enough, but I've had a go at it to try something out. Just a few elements this time around, but I may add more later.
I did something like this, I know it was kinda opposite of what you wanted, but I liked it and went with it. What do you think of it? 😄
I like the look, good job! 🤩 Although I'd still up the margins on the right hand box slightly as suggested in #73 (green marker), make the header color contrasting with the background (pointless red marker), and somehow find a way to make the tags element flush with the perceived bottom of the chart (turquoise marker). I suppose that element might be of variable size, so it might not be as easy to fix.
Maybe "Tags" could be placed next to the main text, like on articles on OWF? Might look weird, I dunno. I'm sure something can be done, but it's not a huge deal, really. But good job on the design 😄
