Fundações
Forma & elevação
O vocabulário de forma
Pílula
rounded-full
Tudo que você TOCA ou lê como estado: botão, campo de uma linha, filtro, badge, avatar, item de nav, tooltip, barra de ações.
Canto 16
rounded-xl · 16px
Tudo que CONTÉM coisas: card, modal, tabela, menu aberto, painel, aviso, textarea, bloco de código.
Interno
rounded-md · 10px
Só DENTRO de um contêiner (canto externo − padding): item de menu, linha de escolha, tapete de edição, bolha de chat, código inline.
A conta dos raios
--radius: 0.75rem; /* 12px — a base do remap */ --radius-sm: calc(var(--radius) - 4px); /* 8px */ --radius-md: calc(var(--radius) - 2px); /* 10px ← o canto interno */ --radius-lg: var(--radius); /* 12px */ --radius-xl: calc(var(--radius) + 4px); /* 16px ← o "contém" */ --radius-2xl: calc(var(--radius) + 8px); /* 20px */
Armadilha já pagaO 2xl precisa ser declarado
rounded-2xl fica no default do Tailwind v4 (16px) — igual ao xl remapeado — e quem pede um canto MAIOR recebe o mesmo canto, sem nenhum erro na tela.| Classe | Valor | Uso canônico |
|---|---|---|
| rounded-full | 9999px | Toca ou é estado |
| rounded-2xl | 20px | Peça flutuante grande: a barra de ações em massa e o cartão de agendamento da agenda |
| rounded-xl | 16px | Contém — e é o raio do toast (o Sonner recebe calc(--radius + 4) = 16px) |
| rounded-lg | 12px | Raro — a base crua, quase nunca usada direta |
| rounded-md | 10px | Item interno |
| rounded-sm | 8px | Praticamente não usado |
| rounded-[6px] | 6px | Exceção única: checkbox |
As exceções — e só elas
| Elemento | Forma | Por quê |
|---|---|---|
| Checkbox | rounded-[6px] | Redondo pareceria radio (opção única). É a única medida fora da escala no app inteiro. |
| Textarea | rounded-xl | Multi-linha não funciona como pílula: a curva cortaria a primeira linha. |
| Recorte de visão (segmented control) | trilho rounded-full bg-ink-100 p-1 | O botão ativo vira uma pílula de superfície com shadow-xs dentro do trilho. É o que o app usa em Cadastros e na Agenda — ver Navegação. |
| Slot de OTP | rounded só nas pontas | first:rounded-l-md last:rounded-r-md — o conjunto lê como um campo só. |
| CTA | nunca retângulo de canto médio | Pílula ou nada. Botão rounded-md no meio de uma tela de pílulas parece de outro sistema. |
Sim
Mesma linha, mesma forma, mesma altura (h-8): busca, filtro e estado falam a mesma língua.
Não
Três formas e três alturas na mesma fileira: o olho lê dois ou três sistemas diferentes na mesma tela.
Bordas
@layer base {
* { @apply border-border outline-ring/50 }
}
/* Efeito: escrever `border` (sem cor) já pinta a cor certa do tema.
`border-input` existe pro campo: é alias de --border, mas nomeia o papel. */| Situação | Receita |
|---|---|
| Card, painel, tabela | border border-border |
| Campo de formulário | border border-input |
| Estado vazio | border border-dashed border-border |
| Separador dentro de card | border-t border-border (ou divide-y no pai) |
| Separador de menu | h-px bg-border |
| Fio vertical entre botões | w-px bg-border (com my- pra não colar) |
| Item selecionado num cartão de resumo | border-brand ring-1 ring-brand |
Borda de 2px não existe no vocabulário — o único traço mais grosso é o sublinhado da aba ativa (border-b-2), e ali ele é tipografia, não moldura.
Elevação
1 · Plano
Card padrão: border shadow-xs. Um fio de borda e um fio de sombra — o nível mais comum do app inteiro.
2 · Flutuante
Dropdown, tooltip, modal, popover e a barra de ações em massa: shadow-md ring-1 ring-foreground/5.
3 · Alto
Peça fixa que se sobrepõe a uma tela inteira: shadow-xl. Em uso no cartão de agendamento e na barra de confirmar remarcação da agenda.
4 · Bloco em edição
--shadow-lift: a sombra do foco em camadas. É a única sombra grande que aparece em conteúdo, não em overlay.
Os tokens de sombra
| Token | Valor no Claro | O que veste |
|---|---|---|
| --shadow-card | 0 1px 2px 0 rgb(0 0 0 / .05) | Card em repouso (= shadow-xs) |
| --shadow-lift | 0 15px 40px -5px rgb(0 0 0 / .15) + fio de borda | Bloco em edição no foco em camadas |
| --shadow-rise | 0 -4px 16px -8px rgb(0 0 0 / .12) | Sombra que sobe, pra barra colada no rodapé. DECLARADO nos cinco temas e ainda sem consumidor — a barra de ações em massa usa shadow-md. Existe pro dia em que uma barra inferior precisar dele; até lá, não é canon de nada. |
| --shadow-glow-ia | 0 -8px 40px -12px rgb(124 58 237 / .35) | O halo do dock do agente — acompanha o fúcsia no tema Azul |
| --sh-xs … --sh-2xl | escala padrão, tinta por tema | shadow-xs … shadow-2xl |
Armadilha já pagaSombra colorida é sempre um token próprio
shadow-sm shadow-brand/20) deixa de funcionar em silêncio — nada quebra, a sombra só sai na cor do tema. Precisa de sombra colorida? Declare um token, como o --shadow-glow-ia.No escuro, elevação é TOM
Sombra preta não desenha sobre fundo escuro. Nos três temas escuros, o que sobe fica mais claro (--surface-2) e ganha um fio de luz na borda — 0 0 0 1px rgb(255 255 255 / 0.04) no lugar do fio de sombra. E as sombras de overlay ficam MAIS fundas, não menos: no tema Ardósia, que não vai ao preto, elas são as mais fundas de todas, justamente porque o fundo é mais claro.
Anel vs. borda
| Recurso | Para que serve | Regra |
|---|---|---|
| border | Desenhar o limite de um objeto: onde ele começa e termina. | Ocupa layout. É permanente. |
| ring | Marcar um ESTADO temporário: foco, seleção, o card que está sendo editado. | Não ocupa layout (desenha por fora). Aparece e some. |
| ring-1 ring-foreground/5 | O fio de definição de superfícies flutuantes. | Vai junto do shadow-md em menu, tooltip e modal — é o que separa o painel do fundo quando a sombra é sutil. |
| ring-[3px] ring-ring/50 | O anel de foco do canon. | Mesma medida em todo alvo clicável. Ver Foco & acessibilidade. |
NuncaUm anel por cena