Corner radius

Generated from DESIGN_SYSTEM.md

Rules

TokenValueWebiOS (AppTheme.Radius)Android (AppShape)Use
radius-sm8–10pt/pxrounded-lgsm (10pt)smallTags, chips, small buttons
radius-md12–14pt/pxrounded-xlmd (14pt)mediumStandard cards, buttons
radius-lg16–18pt/pxrounded-2xllg (18pt)largeSection cards, profile surfaces
radius-xl24pt/pxrounded-3xlxl (24pt)extraLargeFeature widgets, hero cards
radius-pill999pt/pxrounded-fullfull (999pt)fullBadges, avatars, pills

Rule: All cards of the same semantic type in one view must use the same radius token. Never mix radius-md and radius-lg cards in a single feed.

Live specimens

Radius tokensCards of one type share one radius in a view; never mix md and lg cards in a feed.

  • radius-sm

    rounded-lg

    Tags, chips, small buttons

  • radius-md

    rounded-xl

    Standard cards, buttons

  • radius-lg

    rounded-2xl

    Section cards, profile surfaces

  • radius-xl

    rounded-3xl

    Feature widgets, hero cards

  • radius-pill

    rounded-full

    Badges, avatars, pills