Good thinking from Paul Hebert on the Cloudfour blog about colorizing a component. You might look at a design comp and see a card component with a header background of #dddddd
, content background of #ffffff
, on an overall background of #eeeeee
. OK, easy enough. But what if the overall background becomes #dddddd
? Now your header looks lost within it.
That darker header? Design-wise, it’s not being exactly #dddddd
that’s important; it’s about looking slightly darker than the background. When that’s the case, a background of, say rgba(0, 0, 0, 0.135)
is more resiliant.
That will then remain resilient against backgrounds of any kind.
Nice! You could also move more things to variables if you wanted to, say, have a lighter panel header background in “dark mode”: