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 */ --radius-evt: 6px; /* 6px ← NÃO deriva do remap */
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 | Alvo de foco em texto — o focus-ring de link e de célula |
| rounded-evt | 6px | Exceção medida: o cartão de compromisso da agenda |
| rounded-[3px] | 3px | Exceção medida: checkbox e marca-texto da busca |
As exceções — e só elas
| Elemento | Forma | Por quê |
|---|---|---|
| Checkbox | rounded-[3px] | Redondo pareceria radio (opção única). Um dos dois valores fora da escala no app inteiro, compartilhado com a marca-texto da busca. O canto duro afasta a caixinha da bolinha de cor que vive ao lado dela na agenda. |
| Cartão de compromisso (agenda) | rounded-evt · 6px | O outro valor fora da escala. A grade da agenda copia o Google ao pé da letra, e o raio dele é 6px — medido em 28/08 ajustando um arco de círculo ao canto de um print (rms de 0,089px, escala aferida por duas âncoras). Em rounded-sm o cartão da Semana, que tem a altura exata do deles, saía 33% mais redondo. É token, e não valor literal, porque seis lugares precisam do mesmo canto: cartão, fantasma do arrasto e bloco em criação, nas duas visões. |
| 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 na Agenda e na janela de Filtros de Cadastros — 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. Era a exceção da aba sublinhada, que foi recusada em 23/08/2026 — hoje o recorte de visão é segmented control em pílula. Traço mais grosso que 1px, em qualquer lugar, é sinal de que a peça está tentando ser outra coisa.
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 e popover: shadow-md ring-1 ring-foreground/5. A barra de ações em massa tem a mesma sombra, mas é ilha ink-950: o anel claro dela só existe nos temas escuros (dark:ring-white/15).
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 na mão
--shadow-lift: o bloco que a mão segura na grade da agenda, e a lista do SelectNative. Era também a sombra do foco em camadas até 18/09, quando o founder recusou pela terceira vez a elevação do bloco em edição — ela desenhava um card dentro do card.
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 erguido na grade da agenda e lista do SelectNative. NÃO é mais o foco em camadas: o bloco em edição sobe só de camada desde 18/09. |
| --shadow-rise | 0 -4px 16px -8px rgb(0 0 0 / .12) | Sombra que sobe, pra barra colada no rodapé. O consumidor é a barra do Cobrar no pé do painel do serviço (components/ajustes/precificacao/aba-preco.tsx), que fica embaixo enquanto o painel rola. A barra de ações em massa segue no shadow-md, e essa divergência é a próxima decisão: ou ela adota o --shadow-rise, ou os dois jeitos de sombrear barra inferior continuam convivendo. |
| --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. |
| border-brand + ring-[3px] ring-brand-muted | O anel de foco do canon. | Uma receita só em todo alvo clicável, a mesma do Card. Ver Foco & acessibilidade. |
NuncaUm anel por cena