Skip to main content
02 / Foundations

Radius

Four radius values. Match the radius to the element's role, not the designer's mood.

Scale

--lex-radius-sm4px
--lex-radius-md6px
--lex-radius-lg10px
--lex-radius-pill999px

Application

  • sm (4px): chips, badges, avatars
  • md (6px): controls (buttons, inputs, segmented triggers)
  • lg (10px): surfaces (cards, panels, modals, dropdowns)
  • pill (999px): always-pill shapes (progress tracks, indicator dots, skeletons)