Se um item soar novo, é sinal de abrir a apostila daquela linha.

• Ao escolher uma fonte para tela, olhe x-height, abertura e formas distintas (I/l/1, O/0) — não a amostra em corpo grande.
• Corpo ≥ 16px; medida 45–75 caracteres (max-width: ~65ch); entrelinha 1.4–1.6 (sem unidade), mais apertada em títulos.
• Escala tipográfica modular (razão 1.2–1.333) a partir da base — nada de 15 tamanhos quase iguais.
• Hierarquia com duas alavancas por nível (tamanho + peso, ou peso + cor) — não seis.
• font-size em rem; tracking negativo em títulos grandes, positivo em caixa alta.
• tabular-nums em tabelas/dados; itálico e negrito reais (não sintéticos).
• Web: WOFF2, subset, preload do peso crítico, font-display: swap, fallback casado (evitar CLS).

• Projete a cor pela relação (par cor/fundo/vizinho), não pelo valor isolado.
• Raciocine e gere paletas em OKLCH: rampas com L regular, croma em arco, matiz quase fixo.
• Estrutura: âncora → suporte → neutros temperados → semânticas (success/warning/danger/info), cada cor virando uma rampa 50–950.
• 60-30-10 na distribuição; em UI os 60% são quase sempre neutro/superfície.
• Contraste WCAG: texto 4.5:1 (normal) / 3:1 (grande e componentes). Vale para o cinza "suave" também.
• Nunca só a cor — estado/erro também por ícone, texto, forma. Teste daltonismo + escala de cinza.
• Dark mode = redefinir a camada semântica; superfícies escuras temperadas (não #000), destaque com +L −C, revalidar contrastes.

• Distância comunica relação: espaço dentro do grupo < espaço entre grupos; tenha ≥ 3 níveis, nunca uniforme.
• Escala de espaçamento base 4/8, em rem — os mesmos degraus para inset, stack, inline e gutter.
• Poucos eixos de alinhamento; um eixo forte (texto à esquerda); nada "a olho".
• Flexbox para uma dimensão, Grid para duas; fluxo normal para só empilhar. gap > margens entre itens.
• Grade de cards responsiva: repeat(auto-fit, minmax(16rem, 1fr)) — sem media query.
• Responsivo: breakpoints onde o conteúdo quebra (não tamanhos de device); clamp() com rem, container queries, dvh.
• Num sistema: tokens + primitivas de layout (Stack, Cluster, Grid, Sidebar…).

• Um ponto de entrada por tela — o de maior contraste. Ordem visual = ordem de importância (= DOM).
• Gestalt: proximidade (mais forte), similaridade, continuidade, fechamento, figura-fundo, região comum.
• Equilíbrio de pesos visuais (simétrico = calmo; assimétrico equilibrado = dinâmico); espaço negativo intencional.
• Contraste "de verdade" — "quase igual" lê como erro.
• Ritmo e repetição; escala modular; alternância/progressão.
• Enquadramento: regra dos terços, centro óptico (acima do geométrico), fluxo do olhar.
• Valor antes de cor; escolha uma linguagem visual coerente (tendência ≠ atemporal).
• Testes: esguelha (o que salta é a entrada) e escala de cinza (a hierarquia sobrevive?).

• Ícone é vocabulário funcional, quase nunca universal — ícone + rótulo por padrão; sozinho só com significado comprovado + nome acessível.
• Grid + keyline shapes (círculo maior que o quadrado — overshoot) igualam o tamanho percebido.
• Estilo fixo: traço, cap/join, raio, ângulos (0/45/90), metáfora consistente. Line no repouso, solid no ativo.
• Consistência = ajuste óptico ícone a ícone contra a família (peso visual, junções, alinhamento), não medida igual. Teste: a grade inteira "vibra" uniforme?
• Código: SVG com currentColor, servido como componente (tree-shaking) ou sprite — nunca ícone-fonte novo.
• A11y: decorativo → aria-hidden; botão só-ícone → aria-label no botão; alvo ≥ 24px; não só cor entre estados.

• O logo identifica, não explica — projete para reconhecimento e durabilidade; o significado é depositado pelo uso.
• Tipos: wordmark, lettermark/monograma (nome longo), símbolo pictórico/abstrato, mascote, emblema, combinação.
• A ideia vem no papel, em volume, antes do vetor; o vetor corrige o esboço (poucos nós, curvas limpas).
• Ajuste óptico: overshoot em redondos, afinar junções, centro óptico — a régua mente, o olho decide.
• Resolva a forma em uma cor sólida antes de colorir; se só funciona com gradiente, é frágil.
• É um sistema de versões: principal, invertida, mono preta/branca, símbolo isolado, lockups H/V, logo responsivo por níveis.
• Entrega = projeto: testes de estresse, pacote de arquivos (SVG/PDF/EPS/AI + PNG + favicons) e guidelines.

• Imagem em produto é sistema, não peça avulsa: defina o estilo como regras (formas, perspectiva única, regras de cor e sombra, tratamento de pessoas, detalhe por tamanho) antes de produzir.
• Ilustração para conceito abstrato/tom/consistência; foto para credibilidade e emoção real — stock genérico reduz a confiança.
• Foto "de marca" = luz, enquadramento e grading consistentes + autenticidade + direção.
• Ilustração aplicada (empty state, erro): o texto e o botão são o principal; a ilustração é acento, não literal/redundante. Decorativa → alt="".
• Imagem + texto: scrim/gradiente garantindo contraste no pior ponto; art direction responsiva com <picture> + focal point.
• Web: AVIF → WebP → JPEG; width/height (evitar CLS); srcset/sizes; hero = LCP (fetchpriority=high), resto lazy; versão por tema no dark mode.
• IA generativa: fluxo híbrido — IA na ideação, acabamento e decisões humanos; padronizar o set depois; cuidar de direitos/ética.

• Movimento com propósito: se não informa origem, mudança ou feedback, corta. Na dúvida, mais curto.
• Timing: 100–200ms micro, 200–400ms transições; maior/mais longe = mais tempo; saídas mais rápidas.
• Easing: ease-out para entrar ("fast out, slow in"), ease-in para sair, ease-in-out para mover algo visível; linear quase nunca; springs para gestos.
• Continuidade: o que existe antes e depois persiste e se transforma (shared element), não some e reaparece.
• Coreografia: um foco de movimento por vez; stagger na ordem de leitura; interrompível.
• Web: anime transform e opacity (compositor); FLIP para layout; View Transitions; medir 60fps.
• Motion tokens (durações/curvas por papel) + prefers-reduced-motion projetado junto — "reduce" troca movimento por opacidade, não apaga tudo.

• Um design system é um produto que serve produtos — roadmap, versionamento, suporte, métricas de adoção.
• Tokens em 3 camadas: primitivo (valor cru) → semântico (papel) → componente (opcional). Componentes consomem só a camada semântica.
• Temas e marcas = a camada semântica reconfigurada, nunca forks.
• Uma fonte de tokens, muitas saídas geradas (Style Dictionary no CI); paridade de nomes Figma ↔ código.
• Componentes com API pequena e ortogonal (variant/size + slots), estados obrigatórios, acessibilidade embutida (headless + APG).
• Specimen vivo, lint contra valores "mágicos", contraste no CI.
• O sistema vence quando acelera os times — se a governança freia mais do que ajuda, o escopo está errado.

Aprofundamento: Tipografia · Cor · Layout, Grade & Espaçamento · Composição Visual & Linguagens · Iconografia · Logótipos & Lettering · Ilustração, Imagem & Arte-direção · Motion de Interface · Design Systems & Design Tokens · Acessibilidade Digital & WCAG · Branding.