Web design
avançado:
o acabamento que separa
o competente do impecável

Existe uma faixa larga entre "o site funciona e está bonito" e "o site é impecável". Quem trabalha nessa faixa não usa mais efeitos — usa decisões: por que este espaçamento e não aquele, por que a escala de tipo responde ao contêiner e não à viewport, por que esta cor tem o mesmo peso perceptual da outra, por que este estado de foco existe e é bonito. É esse conjunto que esta apostila cobre.

O que mudou na plataforma (e o que ficou obsoleto)

Boa parte do que exigia bibliotecas hoje é nativo. Se o seu repertório parou em 2021, você está escrevendo JavaScript para coisas que o navegador resolve:

Onde esta apostila se encaixa no catálogo

A de Web Dev & Design (do básico ao expert) dá o panorama; a de CSS Avançado, Animações e SVG cobre a sintaxe e a técnica de animação/SVG; a de Motion de Interface trata movimento como disciplina; a de Design Systems & Tokens, a escala e a governança. Esta aqui é sobre a decisão de design e o acabamento — o que escolher, por quê, e o que separa o resultado competente do impecável.

Definição de trabalho

2.1 O problema do breakpoint

Media query mede a viewport. Mas um card não se importa com a janela — se importa com a coluna em que ele foi colocado. O mesmo card numa sidebar de 320px e numa área principal de 900px precisa de layouts diferentes, com a mesma viewport. Por isso, componentes com media query quebram quando reutilizados noutro contexto — e o time acaba criando variantes (card--small, card--wide) que são a gambiarra de um problema já resolvido.

2.2 Container queries

/* o pai declara que é um contexto de contenção */
.card-area { container-type: inline-size; container-name: card; }

/* o componente responde ao CONTÊINER, não à janela */
@container card (min-width: 480px) {
  .card { grid-template-columns: 12rem 1fr; gap: 1.5rem; }
  .card__título { font-size: 1.5rem; }
}

Com isso, o card é autocontido: funciona em qualquer lugar, sem o pai precisar saber. Existem também as unidades de contêiner — cqi (1% da largura inline do contêiner), úteis para tipo e espaçamento que escalam com o componente.

2.3 Layouts que não precisam de query nenhuma

Antes de escrever uma query, veja se o layout não se resolve sozinho:

/* grade que se adapta sem breakpoint */
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1.5rem;
}

/* sidebar que vira empilhada quando não cabe */
.com-sidebar { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.com-sidebar > .principal { flex: 1 1 60%; min-inline-size: 20rem; }
.com-sidebar > .lateral   { flex: 1 1 15rem; }

O min(18rem, 100%) evita o overflow clássico do minmax em telas estreitas. Esse tipo de layout — chamado intrínseco — deixa o conteúdo e o espaço disponível decidirem, em vez de você adivinhar tamanhos de tela.

2.4 Subgrid e :has()

/* subgrid: os filhos alinham nas MESMAS linhas do avô —
   fim do desalinhamento entre cards de alturas diferentes */
.cards { display: grid; grid-template-rows: auto 1fr auto; }
.card  { display: grid; grid-row: span 3; grid-template-rows: subgrid; }

/* :has() — o seletor de pai */
.card:has(img)            { grid-template-columns: 8rem 1fr; }
.form-campo:has(:invalid) { border-color: var(--erro); }
.pagina:has(dialog[open]) { overflow: clip; }

:has() é a mudança mais subestimada dos últimos anos: ele permite estilar um elemento em função do que existe dentro dele ou depois dele, eliminando classes de estado que antes só o JavaScript podia adicionar.

2.5 Cascade layers: a cascata sob controle

@layer reset, base, componentes, utilitarios;
/* a ordem acima decide quem vence, INDEPENDENTE de especificidade */
@layer componentes { .botao { padding: .75rem 1.25rem; } }
@layer utilitarios { .p-0 { padding: 0; } }   /* vence, mesmo com menos especificidade */

Isso encerra a guerra de !important e de seletores cada vez mais longos: a precedência passa a ser uma decisão de arquitetura declarada uma vez.

3.1 Escala fluida com clamp()

:root {
  /* mínimo, ideal (escala com a viewport), máximo */
  --passo-0: clamp(1rem, 0.95rem + 0.25vi, 1.125rem);
  --passo-1: clamp(1.25rem, 1.1rem + 0.75vi, 1.6rem);
  --passo-2: clamp(1.6rem, 1.3rem + 1.5vi, 2.5rem);
  --passo-3: clamp(2rem, 1.4rem + 3vi, 4rem);
}

Duas regras que a maioria erra: (1) use vi (viewport inline) em vez de vw, para respeitar modos de escrita; (2) sempre inclua um termo em rem na parte do meio — clamp(1rem, 2vi, 2rem) sem rem impede o texto de escalar quando o usuário aumenta a fonte do navegador, o que é uma falha de acessibilidade.

3.2 Variable fonts, de verdade

@font-face {
  font-family: "Fonte";
  src: url("fonte.woff2") format("woff2-variations");
  font-weight: 300 800;          /* faixa contínua */
  font-display: swap;
  size-adjust: 104%;             /* casa métricas com o fallback */
}
h1 { font-variation-settings: "opsz" 48; }  /* optical size no display */
p  { font-variation-settings: "opsz" 14; }  /* e no texto corrido */

O eixo optical size (opsz) é o mais negligenciado: fontes desenhadas para 12px têm contraste e espacejamento diferentes das mesmas em 60px. Usar opsz é a diferença entre "a fonte é bonita" e "o texto está bem composto". Com font-optical-sizing: auto, o navegador faz isso sozinho quando a fonte suporta.

3.3 Medida, ritmo e quebras

3.4 Fontes sem salto de layout

A troca da fonte de fallback pela fonte real causa reflow (o CLS que a apostila de performance mede — cap. 8). Conserto de duas partes: font-display: swap com preload do arquivo crítico, e size-adjust / ascent-override no @font-face do fallback para que as métricas coincidam. Bem-feito, a troca fica praticamente invisível.

4.1 Por que sair de HSL

Em HSL, dois tons com a mesma "luminosidade" declarada têm brilhos percebidos muito diferentes: hsl(60 100% 50%) (amarelo) parece muito mais claro que hsl(240 100% 50%) (azul). Consequência prática: uma escala gerada mudando só o L do HSL fica irregular, e o time compensa "no olho", tom a tom.

OKLCH é perceptualmente uniforme: oklch(L C H) onde L é lightness real (0–1), C é croma e H é matiz. Mesma L = mesmo brilho percebido, qualquer que seja o matiz.

:root {
  --marca:   oklch(0.55 0.18 265);
  /* escala coerente: só o L varia, o brilho percebido acompanha */
  --marca-100: oklch(0.95 0.04 265);
  --marca-500: oklch(0.55 0.18 265);
  --marca-900: oklch(0.25 0.10 265);
}

4.2 Gerar a paleta sem planilha

/* cor relativa: deriva variantes da cor base */
.botao        { background: var(--marca); }
.botao:hover  { background: oklch(from var(--marca) calc(l - 0.06) c h); }
.botao:active { background: oklch(from var(--marca) calc(l - 0.12) c h); }

/* misturar para estados sutis e superfícies */
.aviso { background: color-mix(in oklab, var(--alerta) 12%, canvas); }

Isso elimina dezenas de tokens escritos à mão: as variantes de estado passam a ser derivadas da cor base, e mudar a marca muda tudo coerentemente.

4.3 Gamut amplo (P3) com fallback

.destaque { background: #0a84ff; }                    /* fallback sRGB */
@supports (color: color(display-p3 1 1 1)) {
  .destaque { background: color(display-p3 0.04 0.52 1); }  /* mais saturado */
}

Telas modernas mostram cores que o sRGB não alcança. Usar P3 dá vivacidade real — desde que você mantenha o fallback e não dependa da diferença para transmitir informação.

4.4 Contraste: WCAG 2 e o que vem depois

4.5 Temas sem duplicar tokens

:root { color-scheme: light dark; }
:root {
  --superficie: light-dark(oklch(0.99 0 0), oklch(0.19 0.01 265));
  --texto:      light-dark(oklch(0.25 0.02 265), oklch(0.94 0.01 265));
}
/* respeitar o modo de alto contraste do sistema */
@media (forced-colors: active) {
  .botao { border: 1px solid ButtonText; }
}

5.1 Profundidade que não parece template

A sombra padrão (0 2px 4px rgba(0,0,0,.1)) é o "Arial das sombras". Profundidade convincente imita luz real: sombras em camadas, com opacidade decrescente e desfoque crescente, e uma leve dessaturação — a sombra real não é cinza neutro, ela puxa a cor do ambiente.

.elevado {
  box-shadow:
    0 1px 1px oklch(0.2 0.03 265 / .04),
    0 2px 4px oklch(0.2 0.03 265 / .04),
    0 8px 16px oklch(0.2 0.03 265 / .05),
    0 16px 32px oklch(0.2 0.03 265 / .04);
}

E lembre: profundidade também se faz sem sombra — por contraste de superfície, por borda de 1px mais escura embaixo, por sobreposição, por desfoque de fundo.

5.2 Máscara e recorte

/* esmaecer a borda de uma lista rolável, sem sobrepor um gradiente falso */
.rolavel {
  mask-image: linear-gradient(to bottom, transparent, black 2rem,
                              black calc(100% - 2rem), transparent);
}
/* recorte de forma */
.selo { clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }

5.3 Modos de mistura e filtros

5.4 Textura sem peso

Ruído sutil quebra a chapadura do gradiente e disfarça o banding. Um SVG de feTurbulence em base64, com opacidade de 3–5%, custa poucos KB e faz muita diferença — e gradientes cônicos (conic-gradient) dão superfícies mais ricas que o linear de sempre.

6.1 Os oito estados de um componente

Design incompleto é o que só desenha o estado padrão. Um componente sério tem:

/* foco moderno: visível, respeitando o navegador */
.botao:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: inherit;
}
/* hover só onde existe ponteiro de verdade */
@media (hover: hover) and (pointer: fine) {
  .botao:hover { background: oklch(from var(--marca) calc(l - 0.06) c h); }
}

6.2 Alinhamento óptico vs. matemático

Centralizar pelo cálculo nem sempre parece centralizado. Casos clássicos: um ícone de "play" (triângulo) centralizado matematicamente parece deslocado à esquerda — o peso visual está no lado achatado; letras redondas (o, e, c) precisam ultrapassar levemente a linha de base e a altura-x para parecerem do mesmo tamanho das retas; um botão com ícone à esquerda pede padding direito um pouco maior. A régua final é o olho, não a régua.

6.3 Densidade, alvo e espaço

• Alvo de toque: mínimo confortável de ~44×44px (a área clicável pode ser maior que o desenho, via pseudo-elemento).
• Densidade como decisão: ferramenta de trabalho pede densidade alta (mais dados por tela); produto de consumo pede respiro. Não copie a densidade de um no outro.
• Espaço proporcional: o espaço dentro de um grupo deve ser menor que o espaço entre grupos. Quando isso se inverte, o olho agrupa errado — e nenhuma borda conserta.
• Uma escala de espaçamento (4/8/12/16/24/32/48…), não números avulsos. Espaçamento ad hoc é o sinal nº 1 de interface amadora.

6.4 Microcópia é design

"Erro" vs. "Não conseguimos salvar — sua conexão caiu. Tentar de novo?" A segunda diz o que houve, de quem é a culpa (não do usuário) e o que fazer. Botões com verbo específico ("Salvar rascunho") batem "OK". Estado vazio com uma ação batem uma ilustração bonita e um beco sem saída. Nada disso é texto: é design de interação escrito.

7.1 View Transitions

/* transições entre estados na mesma página */
document.startViewTransition(() => atualizarDOM());

/* e entre páginas, sem framework */
@view-transition { navigation: auto; }

/* elemento que "voa" da lista para o detalhe */
.card__imagem { view-transition-name: capa-do-item; }

O navegador tira um "antes" e um "depois" e interpola. O efeito de continuidade — o item da lista que cresce e vira o cabeçalho do detalhe — era um projeto de semanas; hoje são poucas linhas.

7.2 Animações ligadas ao scroll

/* barra de progresso da leitura, sem JS e sem custo de scroll handler */
.progresso {
  animation: crescer linear;
  animation-timeline: scroll();
}
/* elemento que anima ao entrar na viewport */
.reveal {
  animation: aparecer linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 40%;
}
@keyframes crescer  { to { scale: 1 1; } }
@keyframes aparecer { from { opacity: 0; translate: 0 1rem; } }

Rodam fora da thread principal — não travam a rolagem como um scroll listener em JS.

7.3 Entrada, saída e o problema do display

.tooltip {
  transition: opacity .2s, display .2s allow-discrete;
  opacity: 0; display: none;
}
.tooltip.aberto { opacity: 1; display: block; }
@starting-style { .tooltip.aberto { opacity: 0; } }  /* estado inicial da entrada */

Animar a entrada de um elemento que passa de display:none exigia truques com JS e requestAnimationFrame. Com @starting-style e allow-discrete, é declarativo.

7.4 Popover e anchor positioning

<button popovertarget="menu">Opções</button>
<div id="menu" popover>…</div>

#menu { position-anchor: --gatilho; position-area: block-end span-inline-start; }

popover traz de graça: camada superior (sem z-index de guerra), fechar com Esc, fechar ao clicar fora, e gerenciamento de foco. Anchor positioning ancora o elemento ao gatilho sem medir posições em JS.

7.5 Quando ainda vale JavaScript

Movimento contínuo dirigido por física (arrastar com inércia), coreografias complexas com muitos elementos interdependentes, animação de dados em tempo real, e casos que precisam de controle fino de timeline. Para o resto — e é a maioria —, o CSS de hoje faz melhor e mais barato.

8.1 As três métricas, traduzidas para design

8.2 Reservar espaço, sempre

img, video { aspect-ratio: attr(width) / attr(height); height: auto; }
/* ou explicitamente */
.thumb { aspect-ratio: 16 / 9; object-fit: cover; }
/* área que carrega depois */
.slot-anuncio { min-block-size: 250px; }

8.3 Imagem moderna

<img src="foto.jpg"
     srcset="foto-400.avif 400w, foto-800.avif 800w, foto-1600.avif 1600w"
     sizes="(min-width: 60rem) 40rem, 100vw"
     width="1600" height="900"
     loading="lazy" decoding="async" alt="…">

Regras: o LCP nunca é loading="lazy" (use fetchpriority="high" nele); sizes correto evita baixar 1600px para exibir 400; AVIF/WebP com fallback; e width/height sempre presentes para reservar o espaço.

8.4 Esqueleto, spinner ou otimista?

8.5 O custo de cada efeito

Animar opacity e transform é barato (composição na GPU). Animar width, height, top, margin dispara layout a cada quadro. backdrop-filter e sombras grandes em elementos que rolam são caros. content-visibility: auto em seções longas fora da tela é quase de graça e economiza muito. Antes de aprovar um efeito, pergunte em que ele custa.

Acabamento é acumulativo: nenhuma camada isolada transforma; as seis juntas, sim. A demo mostra o card sendo refeito no painel da esquerda.

10.1 O que o design decide antes do dev implementar

O detalhe de conformidade — critérios, níveis A/AA/AAA, ARIA — está na apostila de Acessibilidade Digital & WCAG. Aqui o ponto é outro: essas decisões são de design, e são tomadas no Figma, não no código.

10.2 Suporte progressivo: como usar o novo sem quebrar o velho

/* base que funciona em qualquer lugar */
.grade { display: flex; flex-wrap: wrap; gap: 1rem; }

/* melhoria onde houver suporte */
@supports (container-type: inline-size) {
  .area { container-type: inline-size; }
  @container (min-width: 30rem) { .grade { display: grid; } }
}

A regra: a experiência base tem que ser boa sozinha; o recurso novo é melhoria, não requisito. Isso vale para view transitions, scroll-driven, anchor positioning e P3 — todos degradam bem se você não apoiar a funcionalidade neles.

10.3 As armadilhas do "avançado"

10.4 Como se manter atualizado sem correr atrás de tudo

A plataforma mudou muito em pouco tempo e vai continuar mudando. Duas práticas bastam: acompanhar o Baseline (o indicador de quando um recurso está disponível de forma ampla nos navegadores) para saber o que já dá para usar sem medo, e manter um pequeno laboratório — um projeto de brincadeira onde você testa o recurso novo antes de precisar dele em produção. O que vem a seguir, e o que isso significa para o ofício, é o tema da apostila de O Futuro do Web Design.

12.1 Plano de treino — 30 dias, ~30 min/dia

12.2 Checklist de acabamento (antes de dar um componente como pronto)

12.3 Como levar isso para o portfólio e a entrevista

• Nomeie com o vocabulário do mercado: "CSS moderno", "layout intrínseco", "design tokens e cor perceptual", "acessibilidade na origem", "Core Web Vitals", "craft de interface".
• Prove com antes/depois: a mesma tela nas duas versões, com o que mudou anotado. Um estudo de caso de acabamento vale mais que cinco telas bonitas sem contexto.
• Mostre o que você removeu: "120 linhas de JS viraram um popover", "3 variantes viraram 1 container query". Senioridade aparece na subtração.
• Meça: CLS/LCP antes e depois, KB de JS removidos, variantes de componente eliminadas, falhas de acessibilidade corrigidas na origem.

12.4 Referências para continuar

• Layout e CSS moderno: "Every Layout" (Heydon Pickering & Andy Bell) · "Modern CSS Solutions" (Stephanie Eckles) · a documentação do MDN e o Baseline para saber o que já é seguro usar
• Tipografia e cor: "Practical Typography" (Matthew Butterick) · "Web Typography" (Richard Rutter) · os artigos de Lea Verou sobre cor moderna e a especificação de OKLCH
• Craft e detalhe: "Refactoring UI" (Adam Wathan & Steve Schoger) · "Designing Interfaces" (Jenifer Tidwell) · o acervo do Web.dev sobre Core Web Vitals
• Acessibilidade: a apostila de Acessibilidade Digital & WCAG · "Inclusive Components" (Heydon Pickering)