Border radius
Três tamanhos carregam a identidade visual. Improvisar raios (rounded-2xl, rounded-[14px]) quebra essa identidade.
Manter esses poucos valores é Valor: uma linguagem de forma consistente, decidida uma vez, que continua coerente conforme a linha de produtos cresce.
| Token | Tailwind utility | Valor | Uso |
|---|---|---|---|
radius.sm | rounded-sm | 0.25rem (4px) | Badges, tags, chips pequenos |
radius.base | rounded / rounded-md | 0.5rem (8px) | Buttons, inputs (padrão) |
radius.lg | rounded-lg | 0.75rem (12px) | Cards, corpo de modais |
radius.xl | rounded-xl | 1rem (16px) | Modais, sheets, hero cards |
radius.full | rounded-full | 9999px | Avatares, pills, FAB |
rounded-lg (12px)
rounded-full
Não faça
- Não use
rounded-2xl(16px) em cards. esse é o tamanho de modal/hero. Cards sãorounded-lg(12px). - Não use
rounded-3xl(24px) em lugar nenhum. não está na escala.