← all posts

On corner radius as a decision, not a default

Somewhere in most design systems there's a line that says "border-radius: 8px" and everyone moves on. It reads like a constant, the kind of number nobody argues about. But every corner radius is a claim about how a shape wants to be touched, and the claim changes depending on what's asking.

Material Design 3 makes this explicit in a way most systems don't bother to. Shape isn't one token, it's a scale — none, extra-small, small, medium, large, extra-large, full — and each step is tied to a role, not a size. A card gets medium. A button gets full, all the way to a pill, because a button is supposed to read as a single pressable object, not a rectangle with the edges filed down.

The radius isn't decorating the shape. It's telling you what kind of object you're looking at.

This matters more once you start comparing a FAB against a large primary CTA sitting next to it. If the FAB uses full-pill corners and the CTA uses a token two steps smaller, your eye reads them as different species of control before you've consciously clocked why. Match the shape language and the hierarchy holds without a color or size change doing all the work.

The lazy version of shape is one radius, everywhere, because it's consistent. The disciplined version is a small scale, applied on purpose, because it's legible. Consistency and legibility aren't the same thing, and the corner is usually where you can tell which one a system actually chose.