Fundações
Espaço & ritmo
Duas escalas convivem, e a divisão é clara: a base-4 do Tailwind (
p-6, gap-3…) governa o DENTRO dos componentes; a escala áurea phi-N (potências de φ ≈ 1,618 a partir de 1rem) governa o ritmo da PÁGINA. Os passos grandes é que dão a respiração entre seções.globals.css · @theme inlineφ ≈ 1.618phi-4/5/6 são clamp()
A escala áurea
Seis passos. Os três primeiros são fixos (são pequenos e não têm por que encolher); os três últimos são fluidos, com clamp: valem cheio a partir de ~1024px de viewport e encolhem sozinhos no celular.
phi-1≈10px
phi-216px — a base
phi-3≈26px
phi-428 → 42px · fluido
phi-540 → 68px · fluido
phi-656 → 110px · fluido
| Passo | Valor declarado | Resultado |
|---|---|---|
| phi-1 | 0.618rem | ≈10px |
| phi-2 | 1rem | 16px — a base |
| phi-3 | 1.618rem | ≈26px |
| phi-4 | clamp(1.75rem, 1.35rem + 2vw, 2.618rem) | 28 → 42px |
| phi-5 | clamp(2.5rem, 1.7rem + 4vw, 4.236rem) | 40 → 68px |
| phi-6 | clamp(3.5rem, 2rem + 7.6vw, 6.854rem) | 56 → 110px |
A escala gera os utilitários de espaço inteiros: p-phi-3, px-phi-2, mt-phi-4, gap-phi-3, space-y-phi-3, py-phi-5 — tudo que aceita um valor de --spacing-* no Tailwind v4.
NotaPor que φ e não uma escala 8-16-24-32
Os passos crescem por multiplicação, não por adição: cada um é ~1,6× o anterior. Isso dá uma diferença sempre PERCEPTÍVEL entre dois passos vizinhos — numa escala aditiva, 24 e 32 brigam, e a escolha entre eles vira gosto. Aqui não existe “um pouco mais de espaço”: existe o próximo passo.
A receita de ritmo
A convenção que faz Cadastros, Agenda, Números e Ajustes parecerem a mesma tela. Copiar isto é o caminho mais curto pra uma tela nova nascer certa.
ritmo vertical de uma tela
barra de tela <PageBar> h-14 · sticky no lg+ — o cabeçalho corpo centrado <PageBody> = mx-auto max-w-6xl px-4 py-phi-4 corpo largo <PageBody wide> = lg:px-6 px-4 py-phi-4 (sem teto) entre seções mb-phi-3 (ou space-y-phi-3 no contêiner) grade / lista gap-phi-3 (cards soltos: gap-3 / gap-6) coluna sticky lg:top-[4.5rem] (72px = barra 56 + respiro) — cadastros-view miolo de card p-6 (o Card do canon; p-phi-3 em bloco denso) pé da página pb-phi-5 (o palco já traz)
Cards e boxes
p-6 — painel denso pode comprimir de propósito
Modal de conteúdo
p-6 + max-w-lg no mínimo; form de 2–3 campos pode max-w-md
Grade de conteúdo
gap-6 · entre blocos grandes, gap-8+
Gap interno de modal
gap-6
CTA
h-10 (44px no dedo) — nunca botão baixo como ação principal
Na dúvida
mais espaço
Largura de página
Dois tetos, e cada um com um trabalho: o do CORPO da tela (1152px) e o do CONJUNTO das telas largas (1386px). O segundo tem uma conta por trás.
globals.css
/* 86.625rem = ficha 18.5rem + gap-phi-3 + painéis 66.5rem do /assistente. Dá ~227px de margem lateral num monitor de ~1840px e faz a margem BATER entre /assistente, /hoje e /numeros. Fonte única: mudar a largura de todas as telas largas é mudar só aqui. */ --container-page: 86.625rem;
| Uso | Receita | Nota |
|---|---|---|
| Tela gerencial padrão | <PageBody> → mx-auto max-w-6xl px-4 | 1152px centrados. É o default do corpo, e o mesmo teto que o <PageBar> aplica — divergir faz o conteúdo saltar quando o esqueleto vira barra. |
| Tela “wide” (Cadastros, Atendimento, Números) | <PageBody wide> → px-4 lg:px-6, sem teto | A barra sangra de ponta a ponta e o corpo acompanha — barra centrada com corpo largo desalinha o rastro. |
| O conjunto das telas largas | mx-auto max-w-page (86.625rem) | Aplicado POR DENTRO do corpo wide (Hoje, Números, detalhe do número): é o que faz a margem lateral bater entre elas num monitor grande. Não é o teto do PageBody. |
| Palco de tela | grade [18rem_18rem_1fr] sem teto | As duas primeiras colunas são fixas (sidebar e palco, 288px cada); o conteúdo fica com o resto. |
| Tela de acesso | max-w-4xl | O split de acesso é peça editorial, não tela de trabalho: teto menor. |
| Prosa longa (legal, documento) | max-w-[62ch] | Medida de leitura, não medida de layout. |
Quando usar a base-4
Dentro do componente, a escala do Tailwind continua valendo — e é ela que dá o encaixe fino.
A régua curta
| Classe | px | Onde |
|---|---|---|
| gap-1 / gap-1.5 | 4 / 6 | Ícone e rótulo dentro de um selo |
| gap-2 | 8 | Cluster de botões, dot e texto |
| gap-3 | 12 | Itens de uma fileira de resumo |
| p-4 | 16 | Tapete de edição, miolo de card pequeno |
| p-5 | 20 | Card de documentação (este guia) |
| p-6 | 24 | Card e modal do app |
Alturas de controle
| Alvo | Altura | No dedo |
|---|---|---|
| Botão xs | h-6 · 24px | h-8 · 32px |
| Botão sm / campo de toolbar | h-8 · 32px | h-10 · 40px |
| Campo de formulário | h-9 · 36px | h-10 · 40px |
| CTA / botão padrão | h-10 · 40px | h-11 · 44px |
| Barra de tela | h-14 · 56px | — |
| Slot de OTP | h-11 · 44px | — |
Armadilha já pagaA curva da pílula come espaço lateral
Em um elemento
rounded-full, o padding horizontal precisa ser maior que o de um retângulo equivalente, senão o texto encosta na curva. O piso é px-2.5 em chip pequeno e px-3 em controle — nunca px-2 ou menos.O que muda no celular
Quase nada, e é essa a graça: os tokens fluidos já encolhem sozinhos.
| Peça | Comportamento |
|---|---|
| phi-4 / phi-5 / phi-6 | Encolhem por clamp(): padding de desktop nunca esmaga uma tela de 320px, e ninguém escreve media query pra isso. |
| text-phi-display | Mesma ideia: 26px no celular, 33px no desktop. |
| Grade de duas colunas | Vira coluna única (regra 11): flex-col sm:flex-row, grid sm:grid-cols-2. |
| Palco de tela | Abaixo de lg a grade se desfaz: a faixa vira cabeçalho empilhado e o pt-phi-4 fluido volta a valer. |
| Barra de tela | Sticky só a partir de lg: no celular o topo já tem header + navegação grudados, e uma terceira faixa fixa comeria a tela. |
| Altura de tela cheia | dvh, nunca vh — a barra do navegador móvel muda a altura e o vh mente. |
Larguras de teste do checklist: 320 · 375 · 768 · 1024 · 1440. A de 320 é a que pega quase tudo.