4px on the input, 6px on the card, 12px on the modal — nobody decided the modal should be softer than the button, it just happened one CSS rule at a time.
Corner radius is one of the easiest tokens to skip, because a single stray `border-radius: 6px` doesn't look broken on its own. It only becomes visible as a problem once you put three or four components side by side and notice they're all rounded slightly differently, for no reason anyone can explain.
The fix is the same pattern used for every other token category: pick a small set of named steps, sharp to fully round, and make every component reference one of them instead of writing its own number. Four steps cover almost any interface. A tight radius for inputs and chips, a medium one for buttons and cards, a larger one for modals and panels, and a fully-rounded value for pills and avatars.
Once those four are named, "make this feel softer" becomes a one-line token swap instead of a hunt through a dozen components for stray radius values, and a card, a button, and a modal can all look completely different while still reading as part of the same system.
Leave a Reply
You must be logged in to post a comment.