lensclear design system

Radius

Source

Corner radii for borderRadius and the per-corner props. Every step but xs and full scales from base.

Match the radius to the size of the surface. Small controls take sm or md, cards take lg, big surfaces take xl and up. full is for anything that should read as a pill or a circle.

Scale

Each token and its resolved value.

xs

4pxBadges, skeleton bars

sm

0.6 x base, 8.4pxChips, small controls

md

0.8 x base, 11.2pxInputs, nav rows

base

0.875rem, 14pxThe root radius

lg

base, 14pxCards, panels

xl

1.4 x base, 19.6pxLarge surfaces

2xl

1.8 x base, 25.2pxCallouts, error rows

3xl

2.2 x base, 30.8pxHero surfaces

4xl

2.6 x base, 36.4pxAction buttons

full

9999pxPills, avatars, dots

Usage

borderTopLeftRadius and the other corner props take the same tokens for asymmetric shapes.

Card
<Box borderRadius="lg" padding="6" backgroundColor="card">
  Card
</Box>