Shape
One base radius drives every corner in the system. Change a single variable and the whole interface re-proportions — from sharp and technical to soft and friendly.
prfct's corners come from a single variable, --radius (8px by default). Every step of the radius scale is a multiple of it, so a change to the base keeps every relationship intact — including 0 for a fully sharp system.
Focus-ring insets, tiny indicators
Checkboxes, kbd, small badges
Small buttons and inputs
Buttons, inputs, selects, menu items
Cards, popovers, menus
Dialogs, sheets, large cards
Marketing tiles
Hero media
:root {
--radius: 0.5rem; /* try 0, 0.25rem or 0.75rem */
}Concentric corners
When one rounded shape sits inside another, the inner radius should equal the outer radius minus the padding between them. Equal radii make the inner shape look like it's bulging; concentric radii look machined.
prfct's components are already concentric: a 12px menu with 4px padding holds 8px items. When the padding is larger than the outer radius — a 16px dialog with 24px padding — the inner shapes are too far away to compete, and keep their own radius.