Take a look at the mockup below — a zoomed in look at four different card treatments. Ask yourself, which color treatment would you choose?
Same layout, copy, and color palette — but they don’t all feel the same. One of them has a slight edge over the others, and if you look closely, you can probably feel it before you can explain it.
Color and depth
There’s a concept from Refactoring UI that stuck with me: lighter objects feel closer to us, and darker objects feel further away. It’s a simple idea, but it’s doing a lot of work in good design.
Think of it in physical terms. A raised surface catches more light — it appears lighter. A recessed surface sits in shadow — it appears darker. When you use color properly, you’re essentially building a layer of depth that your reader can feel without ever thinking about it.
The question to ask of any card design is: can you feel the layers?
Walking through the options
At first glance, my eye wants to like Options 1 and 3 best, but based on the depth principle alone, Option 1 and 2 are actually the strongest.
In Option 1, you have the flow of depth required — dark background, light foreground — but the button sits in the secondary. It doesn’t quite stand out as much as the button in 2.
With Option 2, the dark blue sits in the background, with the lighter blue on top of it and a solid dark button on top of that. There’s a clear sequence — background, card, CTA — and your eye moves through it naturally without any effort.
The third Option feels very easy on the eyes, but unfortunately doesn’t pass the right layers of depth. A white background behind a light colored card is too close in contrast and causes the background to feel like an equal.
Option 4 also fails the right logic, where the darks are too close to you, and the lights too far away. There’s no depth signal pushing the CTA forward, so it sits in the composition rather than rising out of it.
Taking it a step further…
Option 1 isn’t a bad design — it’s just the right design for a different situation. That ghost-style button is intentionally muted and flat. Since it’s lighter than the card, it works well for a secondary CTA — something like “View Services” or “See Our Work” where you’re not asking for a big commitment.
Now, which do you choose? Ask yourself whether the button weight matches the weight of the ask. “Get A New Website” is a primary, high-intent action — it deserves a button that feels solid and prominent. But if the copy were softer, Option 1 would be completely appropriate.
Design to Dollars takeaway
Color builds depth, and depth builds visual hierarchy. When you’re designing a card (or really any component), think in layers. What’s furthest away? What sits on top of that, closest to you? What do you want the reader’s eye to land on last?
Get those layers working together, and then make sure your button earns its place. A solid button on a big ask. A softer button on a subtle one. That alignment is what makes a design feel easy rather than just assembled.
