1.1 O espaço em branco não é sobra

Iniciantes tratam o espaço vazio como área a preencher; profissionais o usam como ferramenta. O espaço agrupa (o que está perto pertence junto), separa (o que está longe é outra coisa), enfatiza (dar ar em volta de um elemento o destaca) e dá ritmo (a repetição de intervalos cria previsibilidade). Layout ruim quase nunca é falta de elementos — é falta de espaço distribuído com intenção.

1.2 As leis da Gestalt

1.3 A ordem de força do agrupamento

Quando quiser dizer "estes elementos são um grupo", as ferramentas, da mais forte para a mais fraca: região comum (um fundo/painel) > proximidade (espaço) > similaridade (estilo compartilhado) > alinhamento. Combine-as com parcimônia — usar as quatro ao mesmo tempo para o mesmo grupo é redundante e pesado. Muitas vezes proximidade sozinha basta.

2.1 Alinhamento

• Nada deve ser colocado "a olho". Todo elemento tem uma relação de alinhamento com algum outro — mesma borda esquerda, mesmo eixo central, mesma linha de base.
• Prefira um só eixo forte. Texto alinhado à esquerda cria uma linha vertical nítida que o olho segue (continuidade). Centralizar tudo destrói esse trilho — use centralização para poucos elementos e por decisão, não por default.
• Alinhamento óptico > matemático. Ícones, aspas, itálicos e formas redondas às vezes precisam "vazar" um pouco da margem para parecerem alinhados.

2.2 Proximidade

Já vista no Módulo 1: o espaço dentro de um grupo deve ser menor que o espaço entre grupos. Um erro clássico é o espaçamento uniforme — tudo com a mesma margem — que apaga a estrutura. Defina pelo menos três níveis: dentro do componente, entre componentes de um grupo, entre grupos/seções.

2.3 Repetição

• Repetir espaçamentos, tamanhos, estilos e posições cria consistência e reduz a carga cognitiva — o usuário aprende o padrão uma vez.
• É o que uma escala de espaçamento (Módulo 3) e uma grade (Módulo 4) impõem automaticamente.
• Repetição também dá ritmo: intervalos previsíveis entre itens de uma lista, entre seções de uma página.

2.4 Contraste

• Contraste = diferença deliberada e forte. "Quase igual" lê como erro; para diferenciar, diferencie de verdade (tamanho bem maior, peso bem diferente, muito mais espaço).
• Contraste cria hierarquia e pontos de entrada — o olho pousa primeiro no que mais contrasta com o entorno.
• Em layout, o contraste mais útil costuma ser de escala e de espaço (um bloco com muito ar em volta salta), não de cor.

3.1 Por que uma escala

Se cada margem é escolhida na hora (13px aqui, 18px ali, 7px acolá), o resultado é inconsistente e impossível de manter. Uma escala — um conjunto pequeno de valores permitidos — força repetição, acelera decisões ("o próximo degrau, não +1px") e cria harmonia.

3.2 Base 4 e base 8

• Base 8 (0, 8, 16, 24, 32, 40, 48, 64…) é o padrão mais comum: divide bem, casa com densidades de tela, dá poucos degraus úteis.
• Base 4 (com meios-degraus: 4, 12, 20…) para ajustes finos, sobretudo em componentes densos e ícones. Muitos sistemas usam "base 4, preferindo múltiplos de 8".
• Degraus pequenos costumam ser lineares (4, 8, 12, 16); degraus grandes podem crescer mais rápido (24, 32, 48, 64, 96) — o olho não precisa de 40 e 48.

--space-0: 0;
--space-1: 0.25rem;  /* 4  */
--space-2: 0.5rem;   /* 8  */
--space-3: 0.75rem;  /* 12 */
--space-4: 1rem;     /* 16 */
--space-5: 1.5rem;   /* 24 */
--space-6: 2rem;     /* 32 */
--space-7: 3rem;     /* 48 */
--space-8: 4rem;     /* 64 */
--space-9: 6rem;     /* 96 */

Use rem para o espaço acompanhar a preferência de tamanho de fonte do usuário e o zoom (volta ao reflow da WCAG — Módulo 7).

3.3 Os quatro tipos de espaçamento

Pensar nesses nomes ajuda a nomear tokens de espaçamento por uso quando necessário (--inset-card, --stack-section) e a padronizar componentes.

3.4 gap > margens

• gap (em flex e grid) põe o espaço entre os filhos, sem "primeira/última margem" sobrando e sem margin collapse.
• Padrão robusto: o contêiner controla o espaço entre filhos (gap); o filho não traz margem própria. Isso torna os componentes recombináveis.
• O "lobotomized owl" (.flow > * + * { margin-block-start: var(--space-4) }) é a alternativa clássica quando você não pode usar flex/grid.

3.5 Densidade

A mesma escala pode ter modos de densidade (confortável / compacto) trocando o passo base — útil em tabelas e ferramentas onde caber mais dados importa. Faça isso via token (--density: 1 → multiplica os espaços), não reescrevendo componentes.

4.1 Anatomia de uma grade de colunas

• Colunas: as faixas onde o conteúdo se encaixa.
• Gutter (medianiz): o espaço entre colunas — vem da escala de espaçamento.
• Margem: o espaço entre a grade e a borda da viewport/contêiner.
• Módulo: a interseção coluna × linha, numa grade modular.
• Largura máxima de conteúdo: a grade não precisa ocupar telas de 2560px — limite (ex.: 1200–1440px) e centralize.

4.2 A grade de 12 colunas (e alternativas)

• 12 é popular porque divide por 2, 3, 4 e 6 — acomoda layouts de 2, 3, 4 colunas de conteúdo.
• Não é obrigatória: 4/8 colunas no mobile, 6 em telas médias, grades de 16 em dashboards muito modulares.
• A grade de colunas é um guia de composição; no CSS moderno você raramente precisa de um "grid framework" — display: grid resolve (Módulo 6).

4.3 Grade modular e baseline

• Grade modular: colunas + linhas horizontais, criando módulos retangulares — forte para conteúdo editorial e catálogos, onde blocos ocupam N módulos.
• Baseline grid: uma malha horizontal fina (ex.: 4px) à qual as linhas de base do texto se alinham. Excelente no impresso; na web é trabalhoso (métricas de fonte, imagens de altura arbitrária) — muitos times priorizam uma escala de espaçamento consistente e um line-height disciplinado em vez de baseline estrito. Ver a apostila Tipografia.

4.4 Quando a grade ajuda — e quando atrapalha

4.5 Quebrar a grade de propósito

Elementos full-bleed (sangram até a borda), imagens que ultrapassam uma coluna, sobreposições — quebras controladas dão energia e destaque. A diferença entre "quebrou a grade" e "não tem grade" é intenção: você sabe qual regra está quebrando e por quê.

5.1 Peso visual

Cada elemento "puxa" o olhar com uma força que depende de tamanho, contraste, cor, densidade, isolamento (espaço em volta) e posição. Compor é equilibrar esses pesos: um título grande de um lado pede algo que o contrabalance do outro, ou muito espaço.

5.2 Ponto focal e ordem de leitura

• Toda tela precisa de um ponto de entrada claro — o elemento de maior contraste/peso. "Tudo em destaque" = nada em destaque.
• Padrões de varredura ocidentais: Z (páginas esparsas, landing), F (páginas com muito texto/listas), Gutenberg (a diagonal do canto superior esquerdo ao inferior direito, com "zonas mortas" nos outros cantos).
• Use posição + peso para que a ordem visual bata com a ordem de importância — e, idealmente, com a ordem no DOM (acessibilidade e leitura por teclado; ver Acessibilidade Digital & WCAG).

5.3 Agrupamento e "chunking"

• Quebre a tela em poucos grupos digeríveis (5–7), cada um com um rótulo/título claro e espaço em volta.
• Dentro de cada grupo, no máximo mais um nível de subdivisão. Hierarquia profunda demais (grupo dentro de grupo dentro de grupo) perde-se.
• Formulários longos: seções com títulos + espaço; ou passos (wizard).

5.4 Densidade da informação

Não existe "densidade certa" universal: um dashboard de operações quer alta densidade (comparar muitos números de relance); uma landing quer baixa (uma ideia por vez). Escolha conscientemente e seja consistente. Alta densidade exige alinhamento impecável e uma escala de espaçamento pequena e disciplinada (Módulo 8).

5.5 Simetria, assimetria e tensão

• Simetria transmite calma, formalidade, estabilidade — e pode ficar estática.
• Assimetria equilibrada (pesos diferentes que se contrabalançam) transmite dinamismo e é mais comum em UI real.
• Espaço negativo ativo — uma área vazia grande e intencional — cria foco e "respiro" premium.

6.1 O fluxo normal

Antes de qualquer sistema: blocos empilham verticalmente, inline flui horizontalmente, o texto quebra sozinho. Muita coisa não precisa de flex nem grid — só de max-width, margin e um bom gap via "flow". Não alcance o Grid para empilhar três parágrafos.

6.2 Flexbox — para uma dimensão

.cluster{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;          /* eixo cruzado */
  justify-content: flex-start;  /* eixo principal */
}
.barra{
  display: flex;
  justify-content: space-between;  /* título à esquerda, ações à direita */
  align-items: center;
  gap: var(--space-4);
}
.item-que-estica{ flex: 1; }        /* cresce e encolhe */
.item-fixo{ flex: 0 0 auto; }

• Use Flexbox quando os itens vivem numa linha OU numa coluna e você quer distribuí-los/alinhá-los: toolbars, grupos de botões, chips, um header.
• gap funciona em flex — dispense as "margens entre itens".
• flex-wrap: wrap + flex: 1 1 <base> dá um "grid responsivo pobre" sem media queries.

6.3 CSS Grid — para duas dimensões

.layout{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-5);
}
.conteudo{ grid-column: 1 / 9; }
.aside{ grid-column: 9 / 13; }

/* grade responsiva sem media query: quantas colunas couberem, mín. 16rem */
.cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-5);
}

/* áreas nomeadas — o layout "desenhado" no CSS */
.app{
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
}
.app > header{ grid-area: header; }

• Use Grid quando precisa alinhar em linhas E colunas ao mesmo tempo: o esqueleto da página, uma galeria, um formulário de rótulos alinhados, um dashboard.
• minmax() + auto-fit/auto-fill = layouts fluidos que se reflowam sozinhos.
• fr distribui o espaço restante; minmax(0, 1fr) evita que conteúdo largo (uma tabela, um <pre>) estoure a coluna.

6.4 Alinhamento (vale para os dois)

6.5 Padrões que resolvem quase tudo

• Stack / Flow: filhos empilhados com gap consistente.
• Cluster: grupo de itens que quebra linha com gap (tags, ações).
• Sidebar: uma faixa fixa + uma fluida que colapsam quando não cabem.
• Switcher: N colunas que viram 1 abaixo de um limite, sem media query.
• Cover: um elemento centralizado verticalmente com header/footer opcionais (hero).
• Grade auto-fit: cards responsivos com minmax.
• Estes são os "Every Layout" — vale conhecer a fonte (Módulo 10).

7.1 Mobile-first e breakpoints por conteúdo

• Escreva o layout base para a tela estreita; adicione complexidade com min-width conforme o espaço permite.
• Não use "tamanhos de iPhone/iPad". Aumente a janela até o layout quebrar (linha longa demais, elementos apertados) e ponha o breakpoint ali. São do seu conteúdo, não de dispositivos.
• Prefira em/rem nas media queries (respondem ao zoom de fonte).

7.2 Container queries

Media query pergunta o tamanho da viewport; container query pergunta o tamanho do contêiner do componente. Isso torna um componente verdadeiramente reutilizável: o mesmo card se adapta se está numa sidebar estreita ou numa área ampla, sem saber onde a página o colocou.

.card-wrap{ container-type: inline-size; container-name: card; }

.card{ display: grid; gap: var(--space-3); }
@container card (min-width: 28rem){
  .card{ grid-template-columns: 12rem 1fr; }   /* vira horizontal quando o CONTÊINER é largo */
}

7.3 Espaço e tamanho fluidos

/* interpola entre um mínimo e um máximo conforme a viewport, com trava */
--space-fluid-l: clamp(2rem, 1rem + 4vw, 4rem);
section{ padding-block: var(--space-fluid-l); }

h1{ font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }

.container{
  width: min(100% - 2rem, 75rem);   /* 75rem, mas nunca encostando na borda */
  margin-inline: auto;
}

• clamp(MIN, IDEAL, MAX): use rem no MIN e no MAX (acessibilidade/zoom) e vw/% no meio.
• min() para "o menor entre" (largura máxima que respeita a margem); max() para pisos (ex.: max(1rem, 2vw) de padding que nunca some).
• Espaço fluido reduz o número de breakpoints — a página "respira" continuamente.

7.4 Layouts intrínsecos

Em vez de "em 768px, mude para 2 colunas", deixe o layout reagir ao conteúdo e ao espaço: flex-wrap com flex-basis, grid com auto-fit/minmax, a "Sidebar" e o "Switcher" do Módulo 6. Menos media queries, menos telas para testar, menos quebras.

7.5 Unidades de viewport e safe areas

• vh é traiçoeiro no mobile (a barra do navegador aparece/some). Use svh/lvh/dvh (small/large/dynamic).
• env(safe-area-inset-*) para não colocar conteúdo sob o notch/barra de gestos.
• aspect-ratio para mídia e placeholders sem "pulo" de layout (volta ao CLS — ver Tipografia).

7.6 Reflow (WCAG 1.4.10)

A 320px de largura equivalente (ou 400% de zoom), o conteúdo não pode exigir rolagem horizontal — deve refluir para uma coluna. Layouts intrínsecos e rem em tudo já entregam isso quase de graça. Tabelas largas são a exceção legítima (podem rolar dentro de um contêiner). Ver Acessibilidade Digital & WCAG.

8.1 Densidade como decisão de sistema

• Ferramentas de trabalho (CRM, analytics, admin, editores) vivem de ver muito de relance — densidade alta é uma vantagem, não um defeito.
• Ofereça modos (confortável / compacto) via token de densidade que multiplica a escala de espaçamento e reduz alturas de linha de componentes — sem forks de componente.
• Densidade alta cobra alinhamento perfeito e tipografia com numerais tabulares (ver Tipografia) — senão vira ruído.

8.2 Ritmo vertical

• Uma página longa lê melhor com intervalos previsíveis entre seções — poucos valores de "espaço entre seções" (ex.: 48/64/96), aplicados com consistência.
• O padrão "flow" (.flow > * + * { margin-block-start: 1em }, com exceções pontuais) dá ritmo ao conteúdo de texto sem margens ad-hoc.
• Espaço antes de um título > espaço depois — o título deve grudar no conteúdo que ele nomeia.

8.3 Tabelas e grades de dados

• Alinhe números à direita (ou pelo decimal); texto à esquerda; cabeçalhos como o conteúdo.
• Zebra vs linhas divisórias vs só espaçamento: quanto mais densa a tabela, mais ajuda uma pista horizontal sutil; não use as três.
• Cabeçalho position: sticky; primeira coluna sticky em tabelas largas; a tabela rola dentro de um contêiner com overflow, sem quebrar o reflow da página.
• Densidade de linha: confortável ~44–48px, compacto ~32–36px — alvo de toque vs volume de dados.

8.4 Layout de aplicação: esqueleto e regiões

• Esqueleto típico: topbar + sidebar (navegação) + main (às vezes com sub-header/toolbar e um painel de detalhe à direita). Grid com grid-template-areas.
• Regiões com scroll independente (a sidebar rola separada do main); cuidado com "scroll dentro de scroll".
• Sticky para toolbars e cabeçalhos de seção; teste com o teclado (o foco não pode ficar escondido atrás do sticky — use scroll-margin-top).
• Estados vazios, de carregamento (skeleton com a mesma métrica do conteúdo, para não "pular") e de erro são parte do layout, não uma reflexão tardia.

8.5 Alturas, overflow e o "z-index war"

• Evite alturas fixas em contêiner de conteúdo — deixe o conteúdo definir; use min-height.
• overflow: hidden "conserta" um vazamento mas pode cortar foco, tooltips e sombras — descubra a causa.
• Camadas (dropdown, modal, toast, popover) precisam de uma escala de z-index tokenizada (ex.: 100/1000/2000/3000) e, de preferência, portais + :top-layer/<dialog>. Não invente z-index: 99999.

9.1 Tokens de espaçamento, grade e breakpoint

:root{
  /* espaço — escala única, base 4/8 */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem;

  /* espaço fluido para respiros de seção */
  --space-section: clamp(3rem, 2rem + 6vw, 8rem);

  /* grade */
  --grid-columns: 12;
  --grid-gutter: var(--space-5);
  --grid-margin: clamp(1rem, 5vw, 3rem);
  --content-max: 75rem;

  /* raios, para consistência de "forma" */
  --radius-1:.25rem; --radius-2:.5rem; --radius-3:1rem; --radius-pill:999px;

  /* z-index tokenizado */
  --z-dropdown:1000; --z-sticky:1100; --z-modal:2000; --z-toast:3000;
}
/* breakpoints como custom media (via PostCSS) ou apenas documentados */
/* --bp-sm: 30rem; --bp-md: 48rem; --bp-lg: 64rem; --bp-xl: 80rem; */

• Componentes usam só tokens — nada de margin: 13px.
• Densidade: --density multiplicando a escala, aplicado num escopo.

9.2 Primitivas de layout

Em vez de cada tela reinventar flex/grid, ofereça um punhado de componentes de layout sem estilo visual, só de composição:

Essas primitivas (a ideia vem do Every Layout) tornam telas novas rápidas de montar e consistentes por construção. Elas consomem os tokens; as telas consomem as primitivas.

9.3 Figma ↔ código

• Auto Layout do Figma = Flexbox: use os mesmos valores de gap/padding da escala de tokens (variáveis de número no Figma).
• Layout grids do Figma espelhando a grade de colunas/gutter/margem dos tokens, por breakpoint.
• Nomes de espaçamento iguais nos dois lados (space-4, não "16" solto). Divergência Figma↔código é a fonte nº 1 de "no protótipo tava diferente".
• Ver as apostilas Figma e Design Systems & Design Tokens.

9.4 Documentação e governança

• Página de layout no site do design system: a escala de espaço visualizada, a grade, as primitivas com exemplos, do's & don'ts.
• Lint: proibir valores de espaçamento fora da escala; proibir z-index literal fora dos tokens.
• Regra para adicionar um degrau à escala (quase nunca) e para criar uma primitiva nova (precisa aparecer em ≥ 3 telas).
• Teste de reflow/zoom no CI ou no checklist de PR.

10.1 Onde layout pesa

• Product / UI designer: composição de telas, densidade, responsivo, consistência de espaçamento — avaliado em todo teste de portfólio.
• Design systems: tokens de espaçamento/grade, primitivas de layout, breakpoints, documentação.
• Front-end / UI engineer: Flexbox, Grid, container queries, espaço fluido, reflow/zoom.
• Editorial / marketing: grades modulares, ritmo, composição de páginas ricas.

10.2 Roadmap de estudo (6–8 semanas)

10.3 Banco de perguntas de entrevista (com a resposta que aprova)

10.4 Projetos de portfólio que geram entrevista

1. Kit de primitivas de layout (âncora): Stack, Cluster, Grid, Sidebar, Cover, Center implementadas com tokens, documentadas, com exemplos de composição — o "esqueleto" de um design system.
2. Redesign de espaçamento: pegue uma UI real inconsistente, aplique uma escala base 8 e três níveis de proximidade; antes/depois com a grade sobreposta.
3. Menos media queries: um layout responsivo reescrito de N breakpoints para 1, com o raciocínio (auto-fit, clamp, container queries) e telas comparadas.
4. Painel denso: uma tela de aplicação com tabela sticky, painel de detalhe, modos de densidade e estados (vazio/carregando/erro) — mostra layout de produto de verdade.
5. Estudo de composição: a mesma tela em 3 hierarquias diferentes (mudando só peso e espaço), com o teste de esguelha de cada uma.

10.5 Fontes para continuar

• Livros: The Non-Designer's Design Book (Robin Williams — o C.R.A.P.); Grid Systems in Graphic Design (Josef Müller-Brockmann); Making and Breaking the Grid (Timothy Samara); Refactoring UI (espaçamento e hierarquia).
• Web: Every Layout (every-layout.dev — as primitivas); web.dev e MDN sobre Grid, Flexbox, container queries; Utopia (fluid space/type); 1linelayouts (Una Kravets); Inclusive Components.
• Referência: as seções de layout/espaçamento dos design systems públicos (Material, Primer, Polaris, Carbon, Atlassian).
• Nesta trilha: Tipografia, Cor, Design Systems & Design Tokens, Logótipos & Lettering; e CSS, CSS Avançado: Animações & SVG, Acessibilidade Digital & WCAG, Figma, Guia de Elementos de Interface.