Border radius
Three sizes carry the visual identity. Improvising radii (rounded-2xl, rounded-[14px]) breaks it.
Holding to these few values is Valor: a consistent shape language, decided once, that stays coherent as the product line grows.
| Token | Tailwind utility | Value | Use |
|---|---|---|---|
radius.sm | rounded-sm | 0.25rem (4px) | Badges, tags, small chips |
radius.base | rounded / rounded-md | 0.5rem (8px) | Buttons, inputs (default) |
radius.lg | rounded-lg | 0.75rem (12px) | Cards, modals body |
radius.xl | rounded-xl | 1rem (16px) | Modals, sheets, hero cards |
radius.full | rounded-full | 9999px | Avatars, pills, FAB |
rounded-lg (12px)
rounded-full
Don’t
- Don’t use
rounded-2xl(16px) on cards. that’s the modal/hero size. Cards arerounded-lg(12px). - Don’t use
rounded-3xl(24px) anywhere. it’s not in the scale.