Fundação
Border Radius
5 níveis, cada um com contexto específico. Não troque entre eles livremente — cada raio sinaliza um tipo diferente de elemento.
Escala
rounded
4 px
Badges de overlay sobre capas (nota, likes)
rounded-lg
8 px
Capas de álbum, thumbnails, avatars quadrados
rounded-xl
12 px
Inputs, botões, chips grandes, campos de texto
rounded-2xl
16 px
Cards principais, bottom sheets, banners, modais
rounded-full
9999 px
Chips de filtro, avatars circulares, badges, drag handles
Contextos
| Elemento | Token | Valor |
|---|---|---|
| Capa de álbum | rounded-lg | 8 px |
| Avatar quadrado | rounded-lg | 8 px |
| Avatar circular | rounded-full | 9999 px |
| Botão | rounded-xl | 12 px |
| Campo de texto | rounded-xl | 12 px |
| Chip de filtro | rounded-full | 9999 px |
| Card de feed | rounded-2xl | 16 px |
| Bottom sheet | rounded-t-2xl | 16 px no topo |
| Modal / overlay | rounded-2xl | 16 px |
| Badge de nota | rounded | 4 px |
| Bloco de código | rounded-lg | 8 px |
| Toast | rounded-2xl | 16 px |
Capa ·
rounded-lgrounded-xl
Rock
rounded-fullCard ·
rounded-2xlRegras
Não invente raios
Só os 5 valores da escala são permitidos. Não use
rounded-md (6 px), rounded-3xl (24 px) ou valores arbitrários como rounded-[10px].Hierarquia por raio
Raios maiores = containers mais importantes. Um badge (4 px) sempre fica dentro de uma capa (8 px) que fica dentro de um card (16 px).
Bottom sheet
Use
rounded-t-2xl (apenas o topo). Nunca arredonde a base de um sheet — ele encosta na borda da tela.Consistência de botão
Todo botão usa
rounded-xl (12 px), independente do tamanho. Botões pill usam rounded-full como exceção explícita.