Slightly rounded wins. Fully square feels hard, strongly rounded feels playful. The middle ground – about 8 to 16 px on a card – is the safe range, and it is where the Upmarkit tokens sit.
Live Example
What Perception Research says
- People prefer curved contours over sharp corners (Bar & Neta 2006 and follow-ups). Sharp corners trigger a mild threat response; curves read as pleasant and trustworthy.
- Rounding helps the eye read a surface as one object. A softly rounded card is recognised as “one thing” faster than a sharply cut rectangle.
- The effect is not linear: past a certain radius the impression flips from “friendly” to “toy-like”. Very round boxes read as buttons, no longer as containers.
What current Web Design does
- The norm today: 8–16 px for cards and containers, 4–8 px for inputs, pills for buttons. Apple, Material 3, Stripe, Linear and most design systems work in this range.
- Large radii (20–32 px) are for consumer apps and marketing pages that want to feel soft. For learning and working surfaces they are usually too much.
- Fully square is a stylistic choice for editorial, luxury and architecture: strict, precise, a little cool.
- Two rules good systems keep: elements side by side share one radius, nested elements step down one level per nesting with padding (card lg, pills inside md, chips inside those sm) while an element flush with the edge shares its host radius (an image bleeding to the card edge), and a site uses at most three radii.
Upmarkit: radius-md (6.1 px) for images and small elements, radius-lg (9.9 px) for cards and panels, pills for buttons – all three golden fractions of the base unit 1rem. If the brand should lean further towards luxury and precision, the lever is “less round” (8 px cards), not “square”.
Radius Tokens
How the Sizes Are Defined
Every corner radius of the site comes from one of these four tokens (skin section “Shapes”): three semantic levels plus the pill.
The three levels are set with the golden ratio (φ = 1.618), starting from the base unit 1rem: lg = 1rem ÷ φ = 0.618rem (≈ 9.9 px), md = 1rem ÷ φ² = 0.382rem (≈ 6.1 px), sm = 1rem ÷ φ³ = 0.236rem (≈ 3.8 px). Each level relates to the next by φ. The pill (9999px) is a utility, not a level.
Live Example
--radius-sm
0.236rem · 3.8 px
Tags, badges, chips, code blocks
--radius-md
0.382rem · 6.1 px
Buttons, inputs, form controls, images in cards
--radius-lg
0.618rem · 9.9 px
Cards, panels, large containers, dossier
--radius-full
9999px · pill
Pill buttons, avatars, circular icon buttons Box and pill both use the pill radius.
How the Levels Are Used
Elements that sit side by side share one radius, no matter how big they are. On a dossier page the navigation box is smaller than the header and the content card, but it is their neighbour, so all three use lg.
Nested elements with space around them go one level down: the card is lg, the pills inside it are md, chips inside those are sm. So the buttons inside the navigation box get the smaller radius.
One deliberate exception, the live example above: it shows each token twice, on the green frame and on the white box inside it, so that you see the shape itself. That is a teaching display, both boxes carry the same radius on purpose. In a real layout the inner box goes one level down.
Flush to the edge shares the host’s radius: the image at the top of a content card is the typical case.
The level comes automatically from the rendered width: 60 % of the content column or more means lg, narrower means md. So a full-width image is lg, while cards in a grid or a navigation box next to a content card are md, and everything inside them follows one level down. Nothing has to be set by hand.
Controls keep their own token wherever they sit: buttons and inputs md, tags, chips and code blocks sm, pills and circles full. The nesting rule is for boxes, frames and images, not for controls.
Edge to edge means no radius at all: the hero, the header background, paragraphs in full width.
Nothing below sm: a third level of nesting stays sm, and lines or strokes are not surfaces – they get caps of 1 to 2 px at most.
Round icon buttons are circles: where such a button sits in the corner of a card, the merged corner takes the card’s radius. On phones most cards become lg because they fill the column.
Shapes (Skin Section 2b)
:root {
--radius-sm: 0.236rem; /* 3.8 px – 1rem ÷ φ³ – tags, badges, chips, code, LMS course buttons */
--radius-md: 0.382rem; /* 6.1 px – 1rem ÷ φ² – buttons, inputs, images in cards */
--radius-lg: 0.618rem; /* 9.9 px – 1rem ÷ φ – cards, panels, containers, large images, hero */
--radius-full: 9999px; /* pill – pill buttons, avatars */
--btn-radius: var(--radius-md);
}R14 – Card Radius
/* a card chooses its radius once ... */
.my-card {
--surf-radius: var(--radius-lg);
border-radius: var(--surf-radius);
}
/* ... and nested elements stay less round than the host */
.my-card img {
border-radius: var(--radius-md);
}Reference Values
/* 0 px square – editorial, luxury, architecture */
/* 4–8 px inputs, small elements */
/* 8–16 px cards, containers – today's norm */
/* 20–32 px consumer apps, marketing */
/* pill buttons, chips, avatars */