Borders In Alpha

A hairline around a card is usually written as a hex value somebody picked once against one background. It works there and nowhere else. Move the card onto a darker surface and the line is suddenly brighter than the thing it is bounding. Move it onto a lighter one and it disappears.

Written in alpha it stops being a color and becomes a relationship. A black at eight percent is a shadow of whatever is behind it, so it darkens a light surface and barely touches a dark one, which is what a real edge does.

Express a hairline as black or white with alpha, not as a hex. It then works on every surface instead of the one it was picked on.

The solid one reads as a drawn rectangle around a card. The alpha one reads as the edge of the card itself. Neither is brighter than the other in any measurable sense, and at a glance only one of them looks deliberate.

Which color to start from

On a dark surface, white at six to twelve percent. On a light one, black at six to ten. White on light and black on dark both go grey and muddy, because you are lightening something already light or darkening something already dark, and neither produces an edge.

That gives one token per theme rather than one per surface, which is the actual saving here. A palette with a border color for cards, one for inputs and one for the sidebar is three values that will drift.

When a shadow is better

A border takes up a pixel of the box. A ring drawn as a shadow does not, so it never changes a layout by existing, and it can sit over a rounded corner without the corner having to agree with it.

The tradeoff is that a shadow ring does not participate in layout at all, so two adjacent elements will not collapse their edges the way borders do. Use the border when the line is structural, and the ring when it is only there to describe a surface.