Vocabulário de frontend para designers

Agente de código só conserta o que você consegue nomear. "Tá estranho no mobile" não vira instrução; "overflow horizontal em 375px" vira. A diferença entre as duas frases é vocabulário, e é isso que esta biblioteca entrega.

Os termos estão organizados por camada do defeito, não por ordem alfabética. Quando uma tela gerada por IA quebra, o problema mora numa destas camadas: caixa, layout, responsividade, cascata, tipografia, semântica, rendering, componente ou motion. Nomear a camada certa é metade do conserto. Cada seção abre com o sintoma típico, lista os termos e fecha com um par de pedidos: o vago, que não funciona, e o preciso, que funciona.

Duas ideias daqui vêm da newsletter AI-Native Designers Garden, da Evangeline (jun/2026): agente só age sobre o que você consegue nomear, e o trabalho é nomear a camada antes de pedir o conserto. O resto é meu: a taxonomia das 10 camadas, a seleção dos termos e os exemplos de prompt, calibrados nas regras que aplico neste próprio site. Pra definição canônica de cada termo, MDN e web.dev.

Publicado em 11 de junho de 2026. Reviso a cada 6 semanas.

Caixa e espaço #

Sintomas: "tá tudo colado", "vazou da tela", "a imagem ficou esticada", "a página pula quando carrega".

Termo	O que é	Use quando
Box model	Todo elemento é uma caixa: conteúdo, padding, borda e margin.	A raiz da maioria dos problemas de espaçamento. Comece por aqui.
Box-sizing	Define se padding e borda entram na conta da largura.	A caixa ficou maior do que você pediu; `border-box` resolve.
Padding	Respiro interno, entre o conteúdo e a borda.	O texto encosta na borda do card.
Margin	Espaço externo, entre a caixa e as vizinhas.	Dois blocos colados um no outro.
Margin collapse	Margens verticais vizinhas se fundem em vez de somar. Só no fluxo block: flex e grid não colapsam margem.	O espaço entre blocos ficou menor do que a soma esperada.
Border	O traço da caixa. Ocupa espaço no layout; sombra não.	Adicionar borda mexeu no alinhamento.
Gap	Espaço entre filhos de flex ou grid, num valor só.	Prefira gap a margin avulsa em cada item: sem sobra na ponta.
Width / height	Tamanho fixo do elemento.	Quase sempre a causa de overflow no mobile. Desconfie de valor fixo.
Min-width / max-width	Piso e teto de largura.	`max-width` segura parágrafo largo demais; `min-width: 0` libera truncamento em flex.
Min-height / max-height	Piso e teto de altura.	Card, modal e empty state que precisam de altura previsível.
Overflow	O que acontece quando o conteúdo não cabe: vaza, corta ou rola.	Qualquer coisa "vazando" ou barra de rolagem inesperada.
Aspect-ratio	Proporção fixa entre largura e altura.	Reservar o espaço da imagem antes de ela carregar.
Object-fit	Como imagem ou vídeo preenche a moldura: `cover` corta, `contain` mostra inteiro.	Foto esticada ou distorcida dentro do container.
Display	Como o elemento participa do layout: block, inline, flex, grid, none.	O elemento não se comporta como você esperava no fluxo.
Position	Como o elemento é posicionado: static, relative, absolute, fixed, sticky.	Sobreposição, header fixo, badge ancorada no canto.

Pedido que não funciona: "a foto tá esticada e a página pula quando carrega."

Pedido que funciona: "aplica object-fit: cover na imagem e reserva o espaço dela com aspect-ratio no container, pra eliminar o layout shift."

Flexbox: layout em uma direção #

Sintomas: botão espremido, ícone minúsculo, texto longo empurrando o CTA pra fora da tela.

Termo	O que é	Use quando
Flex container	O pai com `display: flex`.	Organizar itens numa direção só: linha ou coluna.
Flex item	Cada filho direto do container.	As propriedades de crescer e encolher vivem no item, não no pai.
Main axis	A direção principal do layout.	Alinhar "ao longo" da linha ou coluna.
Cross axis	A direção perpendicular à principal.	Alinhar "através": centralizar verticalmente itens numa linha.
Justify-content	Alinhamento no eixo principal.	Distribuir, centralizar ou empurrar itens pras pontas.
Align-items	Alinhamento no eixo cruzado.	Ícone desalinhado do texto na mesma linha.
Flex-grow	Se o item pode crescer pra absorver espaço sobrando.	Campo de busca que deve ocupar o resto da barra.
Flex-shrink	Se o item pode encolher quando falta espaço.	`flex-shrink: 0` protege ícone e botão de serem espremidos.
Flex-basis	Tamanho inicial do item, antes de crescer ou encolher.	Coluna que parte de um tamanho previsível mas pode colapsar.
Flex-wrap	Se os itens quebram pra outra linha.	Tags e chips que precisam quebrar em vez de vazar.
Min-width: 0 em flex	Destrava o truncamento dentro de linha flex.	Sem isso, texto longo recusa encolher e empurra o resto pra fora.
Order	Reordena visualmente sem mudar o HTML.	Com muito cuidado: a ordem de teclado e leitor de tela não acompanha.

Pedido que não funciona: "o nome comprido tá quebrando a linha da tabela."

Pedido que funciona: "nessa linha, a badge de status e a data têm flex-shrink: 0; o nome do arquivo recebe min-width: 0 e trunca com reticências em uma linha, em vez de empurrar as outras células."

Grid: layout em duas dimensões #

Sintomas: colunas com proporção imprevisível, dashboard que desmonta, card órfão na última linha.

Termo	O que é	Use quando
Grid container	O pai com `display: grid`.	Organizar em linhas E colunas ao mesmo tempo.
Grid item	Cada filho direto do grid.	Posicionar e expandir itens por trilha.
Grid-template-columns	Define as colunas e seus tamanhos.	O esqueleto de qualquer dashboard ou galeria.
Grid-template-rows	Define as linhas e seus tamanhos.	Layouts de altura controlada, como hero + conteúdo + footer.
Fr	Fração do espaço disponível. `2fr 1fr` cria 2 colunas na proporção 2:1.	Proporção entre colunas sem calcular pixel.
Minmax()	Trilha com mínimo e máximo.	Coluna que nunca fica estreita demais nem larga demais.
Auto-fit / auto-fill	Colunas que se criam e somem conforme o espaço.	Galeria responsiva sem escrever um breakpoint por largura.
Grid area	Regiões nomeadas do layout.	Reorganizar o layout inteiro por breakpoint mudando só o mapa.
Span	Quantas trilhas um item ocupa.	Card de destaque que ocupa 2 colunas.

Pedido que não funciona: "quero uma galeria de cards responsiva."

Pedido que funciona: "grid com repeat(auto-fit, minmax(260px, 1fr)) e gap de 24px: as colunas se criam e somem conforme o espaço, sem nenhum breakpoint escrito à mão."

Responsividade #

Sintomas: "no celular tá quebrado", layout que só funciona na largura do seu monitor.

Termo	O que é	Use quando
Viewport	A área visível do browser.	A referência de toda media query.
Breakpoint	Largura em que o layout muda.	Definir onde o grid colapsa pra uma coluna.
Media query	Regra de CSS condicionada ao viewport.	O mecanismo clássico de adaptação por tamanho de tela.
Container query	Estilo condicionado ao tamanho do container, não da tela.	O mesmo componente aparece em sidebar estreita e em área larga.
Fluid layout	Layout que adapta continuamente, sem depender só de saltos.	Evitar o "pulo" visível entre breakpoints.
Clamp()	Valor fluido com piso e teto.	Base de tipografia e espaçamento fluidos.
Intrinsic sizing	Deixar o conteúdo influenciar o tamanho (min-content, fit-content).	Botões e chips que se ajustam ao próprio texto.
Content reflow	Como o conteúdo se rearranja quando o espaço muda.	WCAG exige a página funcional a 320px sem rolagem horizontal, salvo conteúdo que pede largura, como tabela e mapa.
Mobile-first	Estilo base pro menor viewport, adições pra cima.	Disciplina o agente a não tratar mobile como retrofit.

Pedido que não funciona: "no celular tá quebrado."

Pedido que funciona: "testa a 375px e procura overflow horizontal. Acha o elemento com largura fixa estourando o viewport, troca por max-width: 100% e colapsa o grid pra 1 coluna abaixo de 768px."

Cascata e especificidade #

Sintomas: "mudei a cor e nada aconteceu", o agente empilhando !important em vez de achar a regra certa.

Termo	O que é	Use quando
Cascade	Como o browser decide qual regra vence.	A mudança não aplicou: alguma outra regra tá vencendo.
Specificity	O peso do seletor na disputa.	O agente fica adicionando override em vez de corrigir a origem.
Inheritance	Propriedades que descem do pai, como cor e fonte.	Mudar no lugar certo uma vez, em vez de em 20 elementos.
Custom property	Variável de CSS, tipo `--color-primary`.	É como os design tokens chegam no browser.
!important	Força bruta que atropela a cascata.	Cheiro de problema: a regra certa não foi encontrada. Peça a origem.
Stacking context	O sistema de camadas que explica por que z-index "não funciona".	Subir z-index não resolve: transform, opacity e filter criam contexto novo, e o filho não escapa do contexto do pai.
Z-index	Ordem de empilhamento, válida só dentro do mesmo stacking context.	Modal atrás do header, dropdown cortado.
Pseudo-classe de estado	`:hover`, `:focus-visible`, `:disabled`, `:active`.	Estados são CSS, não telas separadas no Figma.
Utility class	Classe de propósito único, estilo Tailwind.	Duas utilities conflitantes não se resolvem pela ordem no HTML; quem decide é a folha gerada.

Pedido que não funciona: "mudei o token e a cor continua errada."

Pedido que funciona: "abre o DevTools nesse título e me diz qual regra está vencendo a cascata e de onde ela vem. Corrige na origem dela. Se a sua solução tiver !important, é a solução errada."

Tipografia no browser #

Sintomas: "o texto tá apertado", "cansativo de ler", título quebrando com viúva, fonte piscando no carregamento.

Termo	O que é	Use quando
Font-size	Tamanho do texto.	A última coisa a diminuir quando "não coube".
Font-weight	Peso do traço.	Hierarquia sem mudar tamanho.
Line-height	Espaço vertical entre linhas.	A primeira suspeita quando o parágrafo parece denso.
Letter-spacing	Espaço entre letras.	Títulos grandes pedem tracking mais fechado.
Measure	Largura da linha de leitura.	Entre 45 e 75 caracteres é a faixa confortável; acima disso o olho se perde.
Rem	Unidade baseada no font-size da raiz.	Acompanha a preferência de tamanho de fonte do usuário, desde que a raiz não fixe px. Padrão pra fonte.
Em	Unidade baseada na fonte do elemento atual.	Padding que escala junto com o texto do botão.
Fluid type	Tipografia que escala com o viewport via `clamp()`.	Título de hero que funciona de 320px a 1440px sem 5 breakpoints.
Text-wrap: balance	Equilibra as linhas de um título.	Elimina a viúva, aquela palavra solta na última linha.
Line-clamp	Corta o texto com reticências depois de N linhas.	Cards de lista com descrição de tamanho variável.
Fallback font	A fonte usada enquanto (ou se) a webfont não carrega.	Escolher fallback com métricas parecidas reduz o pulo na troca.
FOIT	Flash de texto invisível durante o carregamento da fonte.	Página carrega "sem texto" por um instante.
FOUT	Flash de texto sem estilo: o fallback aparece e depois troca.	O texto "pisca" trocando de fonte.
Font-display	A regra que escolhe entre FOIT e FOUT (`swap`, `optional`).	Decidir qual dos dois males é menor pro seu caso.

Pedido que não funciona: "o texto tá cansativo de ler."

Pedido que funciona: "limita o parágrafo a 65ch de measure e sobe o line-height pra 1.6, usando a escala de tipo existente. Se ainda não couber, o problema é o layout, não a fonte."

Semântica e acessibilidade #

Sintomas: tela que parece certa mas não opera por teclado, leitor de tela anunciando "botão" sem nome, modal que engole o foco.

Termo	O que é	Use quando
Semantic HTML	O elemento certo pro papel certo.	Div com onClick não é botão: não tem teclado, não tem foco, não tem nome.
Landmark	Regiões estruturais: header, nav, main, footer.	Leitor de tela navega por elas. Toda página precisa de `main`.
Heading hierarchy	h1 > h2 > h3, sem pular nível.	É o sumário da página pra quem não vê.
Button vs link	Botão executa ação; link navega.	Trocar um pelo outro quebra teclado, histórico e expectativa.
Label	Texto associado ao input de verdade, via for/id.	Placeholder não é label: some quando o campo é preenchido.
Fieldset / legend	Agrupa campos relacionados num formulário.	Grupos de radio e checkbox precisam de pergunta anunciada.
Source order	A ordem dos elementos no HTML.	Define a ordem de teclado e leitura. CSS não "conserta" HTML fora de ordem.
Accessible name	O nome que a tecnologia assistiva anuncia.	Botão de ícone sem nome vira "botão" genérico no leitor de tela.
ARIA	Atributos que adicionam semântica quando o HTML nativo não basta.	Depois do HTML nativo, nunca antes. ARIA errado é pior que ARIA nenhum.
Role	O que o elemento declara ser.	Componente custom que precisa se apresentar (tablist, dialog).
State (ARIA)	A condição atual anunciada: `aria-expanded`, `aria-selected`.	Acordeão e tab que mudam sem avisar quem não vê.
Focus state	A indicação visível de onde o teclado está.	`:focus-visible` em todo interativo. Sem anel de foco, teclado navega às cegas.
Tab order	A sequência do Tab pelos elementos interativos.	Tab pulando fora de ordem denuncia HTML fora de ordem.
Focus trap	Manter o foco dentro do modal enquanto aberto.	E devolver ao elemento de origem quando fechar.
Keyboard navigation	A interface inteira operável sem mouse.	O teste mais barato de acessibilidade: solte o mouse e navegue.
Screen reader	Software que lê estrutura e conteúdo da interface.	O que valida se a semântica existe de verdade.
Contrast ratio	Razão de contraste entre texto e fundo.	4.5:1 pra texto normal e 3:1 pra texto grande no AA. Cinza claro em fundo branco reprova.
Target size	Área clicável ou tocável do elemento.	24px é o mínimo do WCAG 2.2 AA; 44px é o confortável no toque.
Reduced motion	Preferência do usuário por menos animação.	`prefers-reduced-motion` se respeita sempre, sem exceção.
Color-only communication	Cor como único canal da informação.	Erro "em vermelho" precisa de texto ou ícone junto.
Alt text	Alternativa textual de imagem com significado.	Descreve a função da imagem no contexto, não a aparência.
Decorative image	Imagem que o leitor de tela deve ignorar.	`alt=""` explícito, senão o leitor lê o nome do arquivo.
Error association	A mensagem de erro conectada ao campo.	Via `aria-describedby`, não solta na tela longe do input.
Aria-hidden	Esconde o elemento da árvore de acessibilidade.	Nunca pode conter elemento focável dentro: o foco entra e o usuário some.

Pedido que não funciona: "deixa acessível."

Pedido que funciona: "roda o axe e depois revisa na mão o que ele não pega: navega só com Tab e me diz onde o foco some, onde botão deveria ser link e se o erro do formulário é anunciado no campo. HTML semântico antes de qualquer ARIA."

Rendering e performance #

Sintomas: página que pula ao carregar, animação engasgada, interface que demora a reagir, tema que pisca.

Termo	O que é	Use quando
Layout (etapa)	O browser calcula tamanho e posição de tudo.	A etapa cara. Animar width ou height roda isso a cada frame.
Paint	O browser pinta os pixels: texto, cor, sombra.	Sombras e blurs grandes pesam aqui.
Composite	O browser combina camadas prontas na tela.	Animações de transform e opacity vivem aqui, por isso são baratas.
Reflow	Recálculo de layout depois de uma mudança.	Inserir conteúdo acima do que já renderizou força reflow do resto.
Layout shift	Conteúdo pulando de lugar depois de carregar.	O usuário ia clicar e o botão mudou de lugar.
CLS	Cumulative Layout Shift, a métrica que pune o pulo.	Abaixo de 0.1 é o alvo. Imagem sem dimensão é o vilão clássico.
LCP	Largest Contentful Paint: quando o maior elemento visível carrega.	A métrica de "a página chegou".
INP	Interaction to Next Paint: quanto a interface demora pra reagir.	Clique que parece ignorado, digitação com atraso.
Lazy loading	Carregar só quando precisa (`loading="lazy"`).	Nunca na imagem acima da dobra: atrasa o LCP dela. Hero carrega eager.
Render-blocking	Recurso que segura a renderização da página.	Scripts e fontes mal carregados seguram a primeira pintura.
Skeleton	Placeholder que reserva as dimensões finais do conteúdo.	Skeleton de tamanho diferente do conteúdo final só move o pulo de lugar.
CSR	Renderização no browser, via JavaScript.	A tela nasce vazia e preenche depois.
SSR	HTML montado no servidor.	Conteúdo visível antes do JavaScript chegar.
Static rendering	Páginas pré-geradas no build.	O mais rápido pra conteúdo que não muda por requisição.
Hydration	O JavaScript ligando interatividade no HTML do servidor.	A tela aparece mas os botões ainda não respondem.
Hydration mismatch	Servidor e cliente renderizam coisas diferentes.	Hora atual, `window`, tema do localStorage: pisca ou quebra no carregamento.
Server / client component	Onde o componente roda.	`window` e `localStorage` só existem no cliente; no servidor, quebram.

Pedido que não funciona: "a página pula quando carrega."

Pedido que funciona: "dá dimensão a toda imagem (width/height ou aspect-ratio), confere se cada skeleton tem a mesma altura do conteúdo que substitui e proíbe qualquer coisa de entrar acima do que já renderizou. Mede o CLS antes e depois; alvo abaixo de 0.1."

Componentes, estado e tokens #

Sintomas: cinco botões quase iguais na mesma página, valor de cor solto no código, o agente criando do zero o que o sistema já tem.

Termo	O que é	Use quando
Component	Peça reutilizável de UI.	A unidade que o agente deveria reusar, não recriar.
Props	As entradas que configuram a instância.	O equivalente em código das component properties do Figma.
Variant	Versão do componente: primary, ghost, destructive.	Mapeia 1:1 com as variantes do Figma.
State	Dado que muda com o tempo dentro do componente.	Aberto, carregando, erro: estados, não cópias do componente.
Slot / children	Área de conteúdo substituível dentro do componente.	Card que aceita qualquer conteúdo sem virar 8 componentes.
Composition	Montar UI complexa combinando peças pequenas.	A alternativa ao mega-componente de 40 props.
Primitive	Componente de base, sem estilo ou quase.	O que bibliotecas como Radix entregam: comportamento e a11y prontos.
Controlled / uncontrolled	Quem manda no estado: o pai ou o próprio componente.	Formulário que precisa validar e limpar campos de fora.
Re-render	A UI atualizando porque um dado mudou.	Tela inteira repintando quando só um número mudou.
Design token	Decisão de design nomeada: cor, espaçamento, raio, sombra.	A ponte entre o Figma e o código.
Semantic token	Token nomeado pelo papel, não pelo valor.	`surface-danger` sobrevive ao rebrand; `red-500` não.
Hardcoded value	Valor solto no código, fora do sistema.	O que o agente faz quando você não aponta o token.
One-off	Componente ou estilo único que duplica o sistema.	O modo de falha clássico de UI gerada por IA.
API surface	O conjunto de props que o componente expõe.	Menos é mais: cada prop nova é manutenção pra sempre.

Pedido que não funciona: "cria um botão novo pra essa tela."

Pedido que funciona: "antes de criar qualquer coisa, lista os componentes de botão que já existem no projeto. Usa o existente passando a variante e o estado por props, com os tokens do sistema. Botão one-off só se você me provar que a API atual não cobre o caso."

Motion #

Sintomas: animação que parece barata, tudo se mexendo ao mesmo tempo, scroll engasgando enquanto algo anima.

Termo	O que é	Use quando
Duration	Quanto tempo a animação leva.	Microinteração vive entre 150 e 300ms; transição de tela inteira pode passar disso.
Delay	Quanto espera antes de começar.	A base do stagger e da orquestração de entrada.
Easing	A curva de aceleração do movimento.	Linear parece robótico; curva certa parece físico.
Ease-out	Rápido no início, suave no fim.	Entrada de elementos: chega rápido, assenta devagar.
Ease-in-out	Suave nas duas pontas.	Transições de estado e movimentos contínuos.
Spring	Movimento com física, sem duração fixa.	Interações que respondem a gesto, como arrastar e soltar.
Stagger	Filhos animando em sequência com pequeno atraso.	Lista de cards entrando: 50ms entre cada um, não tudo junto.
CSS transition	Animação de um estado pro outro.	Hover, foco, abrir e fechar: o caso comum, sem biblioteca.
Keyframes	Animação com etapas nomeadas.	Movimento com mais de dois estados, como pulso ou shimmer.
Transform	Mover, escalar, rotacionar.	Anima no composite, sem reflow. O canal certo pra movimento.
Opacity	Transparência.	O outro canal barato. Transform + opacity cobrem 90% do motion de UI.

Pedido que não funciona: "anima esse card bonito."

Pedido que funciona: "entrada com opacity + transform: translateY(8px), 200ms ease-out, stagger de 50ms entre cards. Nada de animar height. Com prefers-reduced-motion, desliga a translação e mantém só o fade."

Fontes #

Três origens, em ordem de peso: MDN e web.dev pra definição canônica de cada termo; as regras de qualidade que aplico neste site (gates de build, Lighthouse 100 e WCAG AA) pros exemplos de prompt; e a newsletter AI-Native Designers Garden, da Evangeline, de onde vêm a tese do vocabulário como alavanca e o gesto de nomear a camada antes do conserto.