Border Radius Tokens

Soft-edged radii are a core part of the brand aesthetic. Sharp corners are strictly avoided — all elements use rounded forms.

Radius Scale

All radii derive from the base --radius value (0.75rem). Use soft, rounded forms consistent with circles, hexagons, and rounded rectangles.

Radius SM

rounded-sm

Small elements: tags, badges, small buttons

Radius MD

rounded-md

Default radius: inputs, standard buttons, menu items

Radius LG

rounded-lg

Cards, panels, containers — the primary brand radius

Radius XL

rounded-xl

Large containers, modals, hero sections

Radius Full

rounded-full

Pills, avatars, circular elements — "pill shape" for lower thirds

Usage Examples

Applying radius tokens to common UI elements.

Button (rounded-md)

Card (rounded-lg)

Card content

Pill (rounded-full)

Status Tag

Input (rounded-md)

Placeholder text

Modal (rounded-xl)

Dialog content

Avatar (rounded-full)

Sharp Corners — Prohibited

Per brand guidelines, sharp corners (border-radius: 0) are strictly avoided.

Never

→

Always