# Acabamento visual: da página genérica ao nível de estúdio Guia acionável para redesenhar uma página de serviço (clínica, consultório, pequeno negócio) com acabamento premium. Números concretos, decisões prontas para código. ## 1. Tipografia — o tipo carrega o design Se o tipo está errado, nada mais importa. Regras: - **Sempre um par, nunca uma fonte só.** Uma família de **display** (títulos, hero) + uma de **corpo** (texto, UI). Página com fonte única lê como "não desenhada". - **Comprometa-se com extremos de peso.** Peso 200 ao lado de 800 lê como intencional. 400 ao lado de 600 lê como configuração padrão. Título deve contrastar o corpo por **pelo menos 300 unidades**: se o corpo é 400, o título é 700 ou 200 — nunca 500/600. - **No máximo 3 famílias:** display + corpo + 1 outlier opcional (marca/número-herói, aparecendo em ≤ 2 lugares). 2 famílias é o canônico. 4 é slop. - **Nunca sintetize peso/itálico.** Carregue o arquivo do peso que precisa. ### Escala harmônica (razão 1.25 — terça maior, base 16px) Passos por razão, não por incremento. Máximo de **5 tamanhos** na página inteira — para mais hierarquia use peso e cor, não outro tamanho. ```css :root { --text-sm: 0.8rem; /* 12.8px — labels, legendas */ --text-base: 1rem; /* 16px — corpo (piso absoluto) */ --text-md: 1.25rem; /* 20px — subtítulo, lead */ --text-lg: 1.5625rem; /* 25px — h3 */ --text-xl: 1.9531rem; /* 31.25px — h2 */ --text-2xl: 2.4414rem; /* 39px — h2 grande */ --text-3xl: 3.0518rem; /* 49px — h1 seção */ --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem); /* hero */ } ``` - **Teto do display: ≤ 5.5rem (88px).** Acima disso o título se aperta em telas 1280–1440px. - **Hero mobile:** o `clamp` já resolve — no piso de 414px o display cai para ~44px. Se o título passar de 2 linhas a 414px, reduza um degrau. - **Case o tamanho ao comprimento da copy:** título ≤ 50 caracteres usa display cheio; 51–90 caracteres reduza um degrau ou quebre em sobrelinha (eyebrow) + título. Título de 100 caracteres em tamanho display é o tell de IA mais confiável. Ao escrever o título você mesmo: ≤ 7 palavras, ≤ 50 caracteres, frase imperativa ou nominal — nunca começando com gerúndio. ### Pesos, medida, tracking (entrelinha = line-height) - **Corpo:** um peso só (400 ou 350). Bold apenas para ênfase. `line-height: 1.5–1.65`. - **Display/títulos:** `line-height: 1.05–1.2`. Tracking apertado: `letter-spacing: -0.02em` a `-0.04em`. - **Labels/small caps:** `letter-spacing: 0.08em` a `0.14em`, `text-transform: uppercase`. - **Medida de linha (comprimento):** 45–75 caracteres. Padrão `max-width: 65ch`. - **Nunca:** corpo abaixo de 16px, nada abaixo de 10px, caixa-alta em parágrafo, texto justificado sem hifenização, tracking acima de 0.05em no corpo. - **Sempre:** `font-display: swap`, `font-variant-numeric: tabular-nums` em números/dados, pontuação tipográfica correta (" " — … ' ') — nunca aspas retas nem `--` ou `...`. ### Pares de fontes (grátis, Google Fonts / Fontshare) por tom de clínica Nunca use fontes on-distribution de IA como padrão: Inter, Roboto, Open Sans, Poppins, Montserrat, Lato, Merriweather, Playfair (como corpo). Pares recomendados: - **Confiança/saúde (limpo, sério):** display **Fraunces** ou **Newsreader** + corpo **Switzer** ou **IBM Plex Sans**. - **Luxo/estética (dermato, odonto premium):** display **Cormorant Garamond** ou **Bodoni Moda** + corpo **EB Garamond** ou **Source Serif 4**. - **Moderno/tech (fisio, nutri):** display **Geist** (700) ou **General Sans** + corpo **Geist** (400). - **Acolhedor/suave (pediatria, terapia):** display **Sentient** ou **Bricolage Grotesque** (500) + corpo **Crimson Pro** ou **Geist**. A marca (wordmark) no topo/rodapé pode e deve usar um display diferente do corpo — custa nada e diz "isto é uma marca". Ex.: corpo Geist → wordmark Fraunces SemiBold, `letter-spacing: -0.015em`. ## 2. Cor — a maioria das UIs de IA falha aqui Erros típicos: escolher azul, usar preto puro, gradiente roxo-para-ciano, acento em 30% da tela. Corrija tudo. ### Princípios - **OKLCH sempre** (perceptualmente uniforme; brilho previsível). `hsl()` e `rgb()` mentem sobre brilho. - **Um acento, no máximo dois.** O acento ocupa **≤ 3%** de qualquer viewport. É marca-texto, não bloco de cor. - **Sem extremos puros:** nunca `#000` nem `#fff`. Sempre tinja com um traço de croma na direção da cor-âncora. - **Tinja os cinzas.** Âncora quente → neutros quentes. Croma dos neutros baixo (0.005–0.015). Cinza chapado (croma 0) é banido. ### Construção da paleta (4 camadas) ```css :root { /* âncora quente-oat, matiz 80 — troque a matiz pela do acento do cliente */ --color-paper: oklch(97% 0.010 80); /* superfície base (papel) */ --color-paper-2: oklch(93% 0.014 80); /* cartões, seções alternadas */ --color-rule: oklch(82% 0.010 80); /* linhas, bordas 1px */ --color-neutral: oklch(56% 0.008 80); /* texto secundário */ --color-muted: oklch(40% 0.008 70); /* texto de apoio */ --color-ink: oklch(18% 0.010 60); /* texto principal (não preto) */ --color-accent: oklch(58% 0.17 40); /* 1 acento saturado */ --color-focus: oklch(55% 0.19 55); /* anel de foco */ } ``` Camadas: **Paper** (base clara `oklch(96–98% …)`), **Ink** (texto `oklch(16–22% …)`), **Neutros** (5–9 passos entre os dois), **Acento** (croma 0.12–0.22). ### Contraste (AA obrigatório, AAA como alvo) | Conteúdo | Mínimo | Alvo | | --- | --- | --- | | Corpo | 4.5:1 | 7:1 | | Texto grande (≥ 24px ou 18.66px bold) | 3:1 | 4.5:1 | | Bordas de componente | 3:1 | 4.5:1 | Verifique no emulador de deficiência visual do devtools antes de entregar. ### Refinar a paleta fraca do cliente (sem trocar a família) O cliente tem um verde/azul de marca sofrível? Mantenha a **matiz** dele, conserte o resto: 1. Leia a cor de marca e extraia a matiz OKLCH — ela é intocável (é a identidade). 2. Reconstrua o acento com **croma 0.14–0.20** e **lightness 55–62%** naquela mesma matiz — vira um acento vibrante e legível, não um tom lavado. 3. Derive **paper/ink/neutros tingindo com a mesma matiz** em croma baixíssimo (0.008–0.012). Assim o cinza "conversa" com a marca em vez de brigar. 4. Aplique o acento só onde é marca-texto: CTA (borda/texto), link no hover, item de nav ativo, anel de foco, um quadradinho ao lado do título. ### Bans de cor `#000000`; `#ffffff` como base; cinza chapado; gradientes roxo→ciano, roxo→azul, laranja→rosa; acento como fundo cobrindo > 5%; texto cinza sobre fundo colorido; gradientes de 3 cores (só 2 stops). ## 3. Layout e espaço — onde "gerado por IA" é pego Colunas iguais, tudo centralizado, todo card idêntico: esses são os tells. - **Toda página tem eixo primário:** viés à esquerda, à direita, ao topo. Centralizado é padrão, não escolha. - **Assimetria lê como intencional; simetria lê como gerada.** Na dúvida, desloque. - **Espaço é escala, não valor.** Uma escala, usada em tudo. Nunca px cru. ### Escala de espaçamento (base 4pt) ```css --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem; ``` Use `gap` para espaçar irmãos (não margens empilhadas). Margem só para ajuste óptico ou quebra de fluxo. ### Ritmo vertical (respiro por seção) - **Padding vertical de seção:** desktop **`--space-3xl` (96px)** topo/base; mobile **`--space-2xl` (64px)**. - **Título → corpo da seção:** `--space-lg` (24px). **Corpo → CTA:** `--space-xl` (40px). - **Varie o ritmo:** não deixe todo gap em 24px. Misture pequeno/médio/grande no mesmo bloco. Padding generoso no topo + apertado embaixo (ou vice-versa) — seções não precisam de padding simétrico. ### Grid, alinhamento, alternância - **CSS Grid** para a página, **Flexbox** para o interior de componentes. - **Fuja do grid de 3 colunas iguais** com ícone-acima-de-título-acima-de-texto — é *o* feature-grid de IA. Quebre: `grid-template-columns: 1.2fr 1fr 0.8fr`, ou 12 colunas com spans diferentes, ou 4-up com um herói de 2 spans. - **Alterne fundos entre seções:** paper → paper-2 → paper, para dar batida visual sem bordas. - **Largura de leitura:** blocos de texto corrido em `max-width: 65ch`; a seção pode ser larga, o parágrafo não. - **Quebre o grid de propósito uma vez:** um elemento cruzando a borda (foto, número, citação) deixa a página mais forte. ### Profundidade e sombra Profundidade vem de **peso e escala**, não de sombra. Se usar sombra, use **uma** discreta: `0 1px 2px oklch(20% 0.01 / 0.05)`. Nunca empilhe sombras nem use brilho colorido. Sem card-dentro-de-card. ### Bans de layout Tudo centralizado; hero `min-height: 100vh` com uma frase no centro; card-in-card; feature-grid idêntico; padding igual em tudo; `z-index: 9999`. ## 4. Design thinking — fugir da estética genérica de IA Antes de codar, escolha uma **direção estética clara e comprometida**. Tanto o minimalismo refinado quanto o maximalismo funcionam — o que importa é **intencionalidade, não intensidade**. - **Propósito:** que problema a página resolve, quem usa? (Ex.: mãe buscando pediatra confiável às 23h no celular.) - **Tom:** escolha um extremo alinhado ao negócio — clínico-refinado, luxo-editorial, acolhedor-orgânico, minimal-confiável. Não fique no meio-termo morno. - **Diferenciação:** qual é a *uma* coisa que a pessoa vai lembrar? Um número-herói tipografado, uma foto full-bleed, uma cor de marca usada com precisão cirúrgica. **Escolhas intencionais que fogem do slop:** - Cores dominantes com acentos afiados vencem paletas tímidas e distribuídas por igual. - Uma carga de página bem-orquestrada (revelações escalonadas com `animation-delay`) gera mais encanto que microinterações espalhadas. Priorize CSS puro. Respeite `prefers-reduced-motion`. - Fundos com atmosfera e profundidade em vez de cor chapada: textura de ruído sutil, malha de gradiente discreta, sombra dramática pontual — sempre a serviço do tom, nunca decoração vazia. - Layout inesperado: assimetria, sobreposição, elemento quebrando o grid, espaço negativo generoso OU densidade controlada. **Nunca** convirja nas escolhas padrão de IA: Inter/Roboto/Arial, gradiente roxo sobre branco, layout previsível de landing-page-template. Cada redesign deve ter caráter específico do contexto daquele negócio — variando entre claro e escuro, fontes e estéticas diferentes. A elegância vem de executar a visão com precisão em cada detalhe.