Preview image. Unlock full-res
Three-column scale assigning small, medium, and large radius values to web and mobile containers, each shown on real UI.
Summary
A radius scale for digital interfaces, assigning three fixed corner-radius values to small, medium, and large containers and demonstrating each on real UI.
Visual description
Black background, green "7.0" / "Vessel" header, white "63" top-right, and a "Web/Mobile Corner Radius" sidebar label with a short note. Three columns are divided by thin vertical rules and headed in white: "Small", "Medium", "Large". Under each sits an oversized green number, "4px", "16px", "24px". Below the numbers are example assets at that radius: two small "Start Your Free Trial" buttons under Small; two poster cards (90 Day Fiance, Law & Order: SVU) under Medium; a single large video player still under Large.
Key takeaway
Mapping an abstract token to a t-shirt-size scale and proving each size on the actual component it governs (button, card, player). The oversized green value makes the spec the hero instead of the diagram.
Reuse notes
An effective way to document radius (or any size token) for a UI system: name the tier, show the value big, demonstrate on a real element. The small/medium/large structure transfers to spacing, type, or elevation scales. Needs representative product UI for each tier.
From this deck: Web and mobile corner radius scale
View deck
