Recipe
Border Radius System
A unified curvature scale for consistent UI rounding across the Meridian design language.
Scale Tokens
--radius-none
0px
--radius-sm
4px
--radius-md
8px
--radius-lg
12px
--radius-xl
16px
--radius-full
9999px
Usage
<button className="rounded-lg ...">
Save
</button>
<div className="rounded-xl border ...">
Card content
</div>Guidelines
- •Use rounded-lg for interactive elements — buttons, inputs, selects.
- •Use rounded-xl for cards, modals, and elevated surfaces.
- •Never mix curvature levels within the same component group.
- •Reserve rounded-full for avatars, badges, and pill-shaped tags.