Foundation / Radius
Corner Radius
Defines the softness of UI elements. We prefer friendly, larger radii (lg, xl, 2xl) for containers to create a modern, approachable feel.
none 0px
class="rounded-none"
sm 0.125rem
class="rounded-sm"
md 0.375rem
class="rounded-md"
lg 0.5rem
class="rounded-lg"
xl 0.75rem
class="rounded-xl"
2xl 1rem
class="rounded-2xl"
3xl 1.5rem
class="rounded-3xl"
full 9999px
class="rounded-full"
Usage Guidelines
rounded-full
Small Elements
Use full for buttons, tags, and small interactive items. This matches our pill-shaped aesthetic.
rounded-3xl
Cards & Containers
Use 2xl as the default for content containers and cards. We embrace large, friendly corners to define our modern aesthetic.
rounded-full
Pills & Avatars
Use full for standard buttons, badges, and user avatars.