Adham Dannaway@AdhamDannaway
🎨 Solid vs transparent colours in UI design
I’ve looked at hundreds of colour systems, and most run into the same issue 👇
In light mode, shadows help communicate elevation.
In dark mode, shadows barely show, so we rely on lighter background layers instead.
So far, so good. But here’s the problem:
Foreground elements (badges, alerts, buttons) are usually built with solid colours.
Which means…
They look different depending on the background they sit on.
❌ Same component → different appearance across elevations
So I tried a different approach:
Using transparent colours for foreground components instead of solid ones.
✅ The result:
They adapt to the background, and feel more consistent across elevation levels.
It’s a small shift but it makes the system feel more cohesive, especially in dark mode.
Curious, have you experimented with transparent colours in your design systems?
Any downsides you’ve run into? 🤔