Padrões de tela
Split de acesso
Cadastro, convite e onboarding dividem o mesmo palco: painel de tinta à esquerda, formulário à direita. O painel é
ink-950 — o mesmo preto do dock e do tooltip, nunca um verde de fundo: sobre ele o verde volta a ser sinal (passo atual, botão), não parede.components/auth/auth-split.tsxmax-w-4xlink-950
A forma
Duas colunas assimétricas: o painel é menor que o formulário, porque quem chega ali já decidiu entrar — o argumento apoia, não convence.
Criar conta
O formulário fica sem cromo em volta: o progresso mora no painel.
Seu nomeContinuar| Peça | Receita |
|---|---|
| Colunas | lg:grid-cols-[minmax(0,0.8fr)_minmax(0,1fr)] — a divisão é do AuthSplit |
| Largura | quem dá é o layout de acesso: max-w-sm vira max-w-4xl por has-[[data-auth-wide]], e a tela marca data-auth-wide quando usa o split |
| Altura travada | lg:min-h-[34rem] — a caixa não pode pular a cada passo |
| Painel | bg-ink-950 · px-phi-4 py-phi-5 · gap-phi-4 |
| Manifesto | text-3xl/600 tracking-tight text-balance, branco |
| Passo atual | border-accent-dark bg-accent-dark text-ink-950 |
| Passo cumprido | a marca (--brand) |
| Passo próximo | border-ink-400/40 text-ink-400 |
| Formulário | max-w-sm, sem card em volta — o cromo já é o painel |
| Campos | h-11 (44px): é tela de acesso, muitas vezes no celular |
| Celular | 1 coluna, com o painel virando faixa curta ACIMA do formulário |
<AuthSplit brand={<SignupSteps current={step} fullName={fullName} email={email} />}>
{/* formulário */}
</AuthSplit>Por que tinta, e não cor
O verde de fundo (green-900) foi APOSENTADO: era o único bloco de cor saturada do produto — e sobre ele o verde da ação sumia.
Sobre superfície…:1< 4.5
Branco sobre ink-950
Apoio em ink-400 · marca em accent-dark
| Par | Contraste no Claro | Verdito |
|---|---|---|
| branco sobre ink-950 | 19,8:1 | folga enorme |
| ink-400 sobre ink-950 | 7,7:1 | passa AA com sobra, e continua lendo como apoio |
| accent-dark sobre ink-950 | 11,4:1 | a marca vira sinal, não parede |
NotaA ilha ink-950 é a mesma do dock e do tooltip
Reusar a superfície de contraste máximo do app é o que faz a tela de acesso parecer da casa sem inventar uma paleta de marketing. Nos temas escuros ela sobe um degrau (
#26262c) — preto sobre preto não é ilha, é buraco.Quando usar
Só nas telas que ARGUMENTAM antes de pedir dados.
| Tela | Usa split? | Por quê |
|---|---|---|
| Criar conta | sim | Há o que dizer antes de pedir nome e e-mail, e há progresso a mostrar. |
| Convite | sim | Quem chega precisa saber de quem é a clínica e o que vai encontrar. |
| Onboarding | sim | Vários passos; o painel é o mapa. |
| Entrar | não | Quem já tem conta não precisa de argumento — card único, centrado. |
| Recuperar senha, nova senha, 2FA | não | Etapas no meio de um fluxo: card único e nada mais. |
| Telas do app | nunca | O split é da faixa de acesso. |
Nas telas de card único, o CardTitle vai com as="h1": ali o card É a tela, e sem isso a página fica sem heading nenhum — quem navega por títulos no leitor de tela não encontra sequer a tela de login.