Guide / 11 min

Princípios de Design para Engenheiros de Software: O Guia Completo

title: “Princípios de Design para Engenheiros de Software: O Guia Completo” description: “Domine os fundamentos de design visual para construir interfaces melhores. Psicologia da Gestalt, tipografia, teoria das cores, sistemas de espaçamento, princípios de animação e lições de lendas do design como Dieter Rams. Inclui estudos de caso de 16 produtos excepcionais.” date: 2026-01-14 updated: 2026-01-17T13:30:00 author: Blake Crosley category: Design & Development tags: [Design, UI, UX, Typography, Color Theory, Gestalt, Animation, CSS, SwiftUI] url_slugs: - design-principles-software-engineers-complete-guide-2026 - visual-design-fundamentals-developers

Princípios de Design para Engenheiros de Software: O Guia Completo

Atualizado em 17 de janeiro de 2026

Atualização de Janeiro de 2026: Este guia consolida princípios atemporais de design com padrões modernos de implementação para desenvolvimento web e iOS. Ele abrange psicologia da Gestalt, sistemas tipográficos, teoria das cores, hierarquia visual, espaçamento e animação—além de lições de Dieter Rams. Veja Estudos de Design para análises aprofundadas de 16 produtos excepcionais.

Passei anos estudando design enquanto construía software, absorvendo princípios de lendas como Dieter Rams e dissecando interfaces de produtos como Linear, Stripe e Raycast. Este guia destila esse entendimento na referência abrangente que eu gostaria que existisse quando comecei a me preocupar com a aparência e a sensação do meu software.

Design não é decoração. É comunicação. Cada pixel comunica função, hierarquia e significado. A diferença entre um software que parece amador e um software que parece profissional está em entender esses princípios e aplicá-los consistentemente.

Este guia assume que você já sabe escrever código. Ele ensina você a ver—a entender por que algumas interfaces parecem sem esforço enquanto outras parecem caóticas, e mais importante, como construir as primeiras.

Sumário

Parte 1: Fundamentos

  1. Psicologia da Gestalt
  2. Tipografia
  3. Teoria das Cores
  4. Hierarquia Visual
  5. Espaçamento e Ritmo
  6. Princípios de Animação

Parte 2: Filosofia de Design

  1. Dieter Rams: Dez Princípios

Parte 3: Implementação

  1. Padrões Web 2025
  2. Sistema de Design Tokens
  3. Dark Mode Bem Feito
  4. Fluxos de Extração do Figma

Parte 4: Referência

  1. Tabelas de Referência Rápida
  2. Checklist de Design
  3. Estudos de Design

Psicologia da Gestalt

“O todo é diferente da soma de suas partes.” — Kurt Koffka

A psicologia da Gestalt, desenvolvida na Alemanha dos anos 1920, explica como os humanos percebem informações visuais. O cérebro não vê pixels individuais—ele organiza elementos em padrões significativos. Domine esses princípios para controlar como os usuários percebem suas interfaces.

Proximidade

Elementos próximos são percebidos como um grupo.

Este é o princípio da Gestalt mais poderoso no design de UI. O espaço comunica relacionamento mais do que qualquer outra propriedade visual.

ERRADO (espaçamento igual = sem agrupamento):
┌─────────────────┐
│ Label           │
│                 │
│ Campo de Input  │
│                 │
│ Label           │
│                 │
│ Campo de Input  │
└─────────────────┘

CERTO (espaçamento desigual = grupos claros):
┌─────────────────┐
│ Label           │
│ Campo de Input  │ ← Apertado (4px) - relacionados
│                 │
│                 │ ← Amplo (24px) - separando grupos
│ Label           │
│ Campo de Input  │ ← Apertado (4px) - relacionados
└─────────────────┘

Implementação CSS:

.form-group {
  margin-bottom: 24px;  /* Entre grupos: amplo */
}

.form-group label {
  margin-bottom: 4px;   /* Label para input: apertado */
  display: block;
}

Implementação SwiftUI:

VStack(alignment: .leading, spacing: 4) {  // Apertado dentro do grupo
    Text("Email")
        .font(.caption)
        .foregroundStyle(.secondary)
    TextField("[email protected]", text: $email)
        .textFieldStyle(.roundedBorder)
}
.padding(.bottom, 24)  // Amplo entre grupos

Similaridade

Elementos que compartilham características visuais parecem relacionados.

Quando elementos têm a mesma aparência, os usuários assumem que funcionam da mesma forma. É por isso que sistemas de design usam estilos consistentes de botões, tratamentos de cards e tipografia.

Exemplo de Navegação:
┌───────────────────────────────────┐
│ [Dashboard] [Projetos] [Config]   │  ← Mesmo estilo = mesma função
│                                   │
│ ┌─────┐  ┌─────┐  ┌─────┐        │
│ │Card │  │Card │  │Card │         │  ← Mesmo estilo = mesmo tipo de conteúdo
│ └─────┘  └─────┘  └─────┘        │
│                                   │
│ [+ Novo Projeto]                  │  ← Estilo diferente = função diferente
└───────────────────────────────────┘

Figura-Fundo

O conteúdo deve se separar claramente do fundo.

O cérebro precisa distinguir a “figura” (no que focar) do “fundo” (o plano de fundo). Relações figura-fundo ruins criam confusão visual.

Técnicas: - Contraste (figura clara em fundo escuro, ou vice-versa) - Sombras (elevar a figura acima do fundo) - Bordas (delinear as bordas da figura) - Desfoque (desfocar o fundo, nitidez na figura)

/* Relação figura-fundo forte */
.card {
  background: var(--color-surface);     /* Figura */
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);  /* Elevação */
}

.modal-overlay {
  background: rgba(0, 0, 0, 0.5);  /* Escurecer o fundo */
  backdrop-filter: blur(4px);      /* Desfocar o fundo */
}

Região Comum

Elementos dentro de uma fronteira são percebidos como agrupados.

Encerrar elementos dentro de um container visual (card, caixa, área com borda) sinaliza que eles pertencem juntos.

Continuidade

O olho segue caminhos, linhas e curvas.

Use alinhamento e fluxo visual para guiar a atenção através da sua interface.

CONTINUIDADE NO ALINHAMENTO:
┌────────────────────────────────┐
│ Logo    [Nav]  [Nav]  [Nav]   │  ← Alinhados no eixo horizontal
├────────────────────────────────┤
│                                │
│ Título                         │
│ ─────────────────────────────  │  ← O olho segue a margem esquerda
│ Texto do parágrafo continua    │
│ ao longo da mesma borda        │
│                                │
│ [Ação Principal]               │  ← Ainda na borda esquerda
└────────────────────────────────┘

Fechamento

O cérebro completa formas incompletas.

Os usuários não precisam de cada pixel desenhado—eles completarão mentalmente formas familiares. Isso permite designs mais minimalistas e elegantes.

/* Scroll horizontal com card parcial (fechamento) */
.card-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-right: 48px;  /* Mostrar card parcial = dica de scroll */
}

.card-carousel .card {
  flex: 0 0 280px;  /* Largura fixa, parcialmente visível */
}

Referência Rápida da Gestalt

Princípio Regra Uso Principal
Proximidade Relacionados = perto, não relacionados = longe Campos de formulário, seções de conteúdo
Similaridade Mesma aparência = mesma função Botões, cards, navegação
Figura-Fundo Separação clara de camadas Cards, modais, overlays
Região Comum Fronteiras agrupam conteúdo Seções de configurações, cards de usuário
Continuidade Seguir linhas e alinhamento Timelines, fluxo de leitura
Fechamento Cérebro completa formas Ícones, dicas de scroll, skeletons

Tipografia

“Tipografia é a arte de dar à linguagem humana uma forma visual durável.” — Robert Bringhurst

A tipografia é a base do design de interfaces. O texto comunica funcionalidade, hierarquia e marca. Uma tipografia ruim torna as interfaces mais difíceis de usar; uma tipografia excelente é invisível—simplesmente funciona.

Escala Tipográfica

Uma escala consistente cria harmonia visual. Use uma proporção matemática.

A Escala 1.25 (Recomendada para UI):

:root {
  /* Base: 16px (1rem) */
  --text-xs: 0.64rem;    /* 10.24px - use com moderação */
  --text-sm: 0.8rem;     /* 12.8px - legendas, labels */
  --text-base: 1rem;     /* 16px - texto do corpo */
  --text-lg: 1.25rem;    /* 20px - texto de destaque */
  --text-xl: 1.563rem;   /* 25px - h4 */
  --text-2xl: 1.953rem;  /* 31.25px - h3 */
  --text-3xl: 2.441rem;  /* 39px - h2 */
  --text-4xl: 3.052rem;  /* 48.8px - h1 */
}

Altura de Linha (Entrelinha)

A altura de linha afeta dramaticamente a legibilidade. Diferentes conteúdos precisam de diferentes entrelinhas.

Tipo de Conteúdo Altura de Linha Por quê
Títulos 1.1 - 1.2 Compacto, negrito, curto
Texto de UI 1.3 - 1.4 Labels, botões
Texto do Corpo 1.5 - 1.7 Parágrafos legíveis
Leitura Longa 1.7 - 2.0 Artigos, documentação

Comprimento da Linha (Medida)

O comprimento ideal da linha previne fadiga ocular e melhora a compreensão de leitura.

  • Ideal: 45-75 caracteres por linha
  • Alvo: 50-65 caracteres
  • Máximo absoluto: 85 caracteres
p {
  max-width: 65ch;  /* unidade ch = largura do caractere '0' */
}

.article-body {
  max-width: 70ch;
  margin: 0 auto;
}

Seleção de Fontes

Fontes do sistema primeiro. Elas carregam instantaneamente, combinam com a plataforma e são otimizadas para telas.

:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code',
               'JetBrains Mono', Consolas, monospace;
}

Use fontes personalizadas para: - Diferenciação de marca (sites de marketing) - Sensação editorial/publicação - Intenção de design específica não alcançável com fontes do sistema

Peso da Fonte para Hierarquia

Use o peso para estabelecer hierarquia, não apenas o tamanho.

h1 { font-weight: 700; }  /* Negrito */
h2 { font-weight: 600; }  /* Seminegrito */
h3 { font-weight: 600; }  /* Seminegrito */
.lead { font-weight: 500; }  /* Médio */
p { font-weight: 400; }   /* Regular */
.meta { font-weight: 400; color: var(--text-muted); }

Referência Rápida de Tipografia

Propriedade Texto do Corpo Títulos Labels de UI
Tamanho 16-18px 24-48px 12-14px
Peso 400 600-700 500
Altura de Linha 1.5-1.7 1.1-1.2 1.3-1.4
Comprimento da Linha 45-75ch N/A N/A
Alinhamento Esquerda Centro OK Esquerda

Teoria das Cores

“A cor é um poder que influencia diretamente a alma.” — Wassily Kandinsky

A cor comunica mais rápido que palavras. Ela estabelece o clima, guia a atenção, sinaliza significado e constrói reconhecimento de marca.

A Regra 60-30-10

A distribuição de cores mais confiável para interfaces equilibradas.

┌──────────────────────────────────────────┐
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ 60% - Dominante (Fundo)
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░│ 30% - Secundária (Cards, seções)
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░│
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓██████▓▓▓▓▓▓▓▓▓▓░░░░░░░░│ 10% - Destaque (Botões, links)
└──────────────────────────────────────────┘

Construindo uma Paleta de Cores

Toda interface precisa destas cores semânticas:

:root {
  /* Marca */
  --color-primary: hsl(220, 80%, 50%);
  --color-primary-hover: hsl(220, 80%, 45%);

  /* Semânticas */
  --color-success: hsl(142, 76%, 36%);  /* Verde - positivo */
  --color-warning: hsl(38, 92%, 50%);   /* Âmbar - cautela */
  --color-error: hsl(0, 84%, 60%);      /* Vermelho - perigo */

  /* Neutros */
  --color-background: hsl(0, 0%, 100%);
  --color-surface: hsl(220, 14%, 96%);
  --color-border: hsl(220, 13%, 91%);

  /* Texto */
  --color-text: hsl(220, 13%, 13%);
  --color-text-secondary: hsl(220, 9%, 46%);
  --color-text-muted: hsl(220, 9%, 64%);
}

Psicologia das Cores

Cor Psicologia Uso em UI
Azul Confiança, estabilidade, calma Finanças, tecnologia, corporativo
Verde Crescimento, natureza, sucesso Saúde, ecologia, estados positivos
Vermelho Energia, urgência, perigo Alertas, promoções, erros
Laranja Calor, entusiasmo CTAs, marcas descontraídas
Amarelo Otimismo, cautela Avisos, destaques
Roxo Luxo, criatividade Produtos premium

Contraste para Acessibilidade

Nível Texto Normal Texto Grande Componentes de UI
AA 4.5:1 3:1 3:1
AAA 7:1 4.5:1 N/A

Ferramentas: WebAIM Contrast Checker, seletor de cores do Chrome DevTools

Hierarquia Visual

“Design é o embaixador silencioso da sua marca.” — Paul Rand

A hierarquia visual controla o que os usuários veem primeiro, segundo e terceiro. Sem hierarquia clara, os usuários precisam se esforçar para encontrar informações. Com ela, as interfaces parecem sem esforço.

As Seis Ferramentas da Hierarquia

1. Tamanho — Elementos maiores atraem atenção primeiro

.hero-title { font-size: 3rem; }      /* Dominante */
.section-title { font-size: 1.5rem; } /* Secundário */
.body-text { font-size: 1rem; }       /* Base */

2. Peso — Negrito salta para frente, leve recua

h1 { font-weight: 700; }
.lead { font-weight: 500; }
p { font-weight: 400; }

3. Cor e Contraste — Alto contraste = atenção

.title { color: var(--color-text); }  /* Quase preto */
.meta { color: var(--color-text-muted); }  /* Cinza */

4. Posição — Posições-chave importam

PADRÃO F (páginas de conteúdo):    PADRÃO Z (landing pages):
████████████████████████          1 ──────────────────► 2
████████                                ↘
████                                         ↘
██                                                ↘
                                       3 ──────────────────► 4

5. Espaço em Branco — Isolamento cria importância

.hero { padding: 120px 48px; }  /* Espaço generoso */
.data-table { padding: 12px; }  /* Conteúdo denso */

6. Profundidade e Elevação — Elementos que se destacam exigem atenção

:root {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}

.card { box-shadow: var(--shadow-sm); }
.card:hover { box-shadow: var(--shadow-md); }
.modal { box-shadow: var(--shadow-lg); }

O Teste do Olhar Semicerrado

Semicerre os olhos para o seu design. Ainda consegue ver a hierarquia? Se sim, ela é forte.

Espaçamento e Ritmo

“O espaço em branco é como o ar: é necessário para o design respirar.” — Wojciech Zieliński

O espaçamento é a estrutura invisível do design. Espaçamento consistente cria ritmo visual—a sensação de que os elementos pertencem juntos em um sistema coerente.

O Grid de 8px

O grid de 8px é o padrão da indústria porque: - Divide uniformemente (8, 16, 24, 32, 40, 48…) - Funciona com densidades de tela comuns (1x, 1.5x, 2x, 3x) - Cria ritmo consistente sem cálculos

:root {
  --space-1: 4px;    /* Apertado: espaços entre ícones */
  --space-2: 8px;    /* Compacto: elementos inline */
  --space-3: 12px;   /* Justo: campos de formulário */
  --space-4: 16px;   /* Padrão: maioria dos espaços */
  --space-6: 24px;   /* Espaçoso: padding de cards */
  --space-8: 32px;   /* Espaços entre seções */
  --space-12: 48px;  /* Seções principais */
  --space-16: 64px;  /* Seções de página */
  --space-20: 80px;  /* Espaçamento de hero */
}

Espaçamento Interno vs Externo

Interno (padding): Espaço dentro de um elemento Externo (margin): Espaço entre elementos

Regra: O espaçamento interno deve ser tipicamente maior que o espaçamento externo dentro de grupos relacionados.

.card {
  padding: 24px;        /* Interno: espaçoso */
  margin-bottom: 16px;  /* Externo: menor que o padding */
}

Padrões de Espaçamento de Componentes

Cards:

.card { padding: 24px; border-radius: 12px; }
.card-header { margin-bottom: 16px; }
.card-title { margin-bottom: 4px; }  /* Justo ao subtítulo */

Botões:

.btn { padding: 12px 24px; border-radius: 8px; }
.btn--sm { padding: 8px 16px; }
.btn--lg { padding: 16px 32px; }
.btn-group { display: flex; gap: 12px; }

Formulários:

.form-row { margin-bottom: 24px; }
.form-label { margin-bottom: 4px; }
.form-help { margin-top: 4px; }
.form-actions { margin-top: 32px; display: flex; gap: 12px; }

Referência Rápida de Espaçamento

Contexto Espaçamento Recomendado
Ícone para texto 4-8px
Label para input 4px
Entre grupos de formulário 24px
Padding de card 20-24px
Espaço entre cards 16-24px
Padding de seção (mobile) 48-64px
Padding de seção (desktop) 80-96px
Padding de botão (h/v) 24px / 12px

Princípios de Animação

“Animação não é a arte de desenhos que se movem, mas a arte de movimentos que são desenhados.” — Norman McLaren

A animação dá vida às interfaces. Bem feita, ela guia a atenção, comunica estado e cria conexão emocional. Mal feita, frustra e distrai.

O Princípio Central

A animação deve parecer inevitável, não decorativa.

Boa animação: 1. Comunica algo que o design estático não consegue 2. Reduz a carga cognitiva mostrando relacionamentos 3. Parece natural e esperada 4. Desaparece da consciência

Má animação: 1. Existe apenas porque “parece legal” 2. Atrasa o usuário 3. Chama atenção para si mesma 4. Cria ansiedade ou impaciência

Princípios-Chave para UI

1. Antecipação — Prepare os usuários para o que vem a seguir.

.button {
  transition: transform 0.1s ease-out;
}

.button:active {
  transform: scale(0.97);  /* Leve pressão antes da ação */
}

2. Continuidade — Deixe o movimento completar naturalmente com assentamento tipo mola.

.panel {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

withAnimation(.spring(response: 0.4, dampingFraction: 0.7)) {
    isOpen = true
}

3. Ease-In, Ease-Out — Nada na natureza se move em velocidade constante.

Curva Quando Usar Característica
ease-out Elementos entrando Início rápido, parada suave
ease-in Elementos saindo Início suave, saída rápida
ease-in-out Mudanças de estado Suave do início ao fim
linear Indicadores de carregamento Contínuo, mecânico

4. Encenação — Direcione a atenção para o que importa. Apenas uma coisa deve se mover por vez, a menos que coreografado como grupo.

5. Escalonamento — Elementos devem chegar em sequência, não todos de uma vez.

.list-item {
  animation: fadeSlideIn 0.3s ease-out both;
}

.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 50ms; }
.list-item:nth-child(3) { animation-delay: 100ms; }
.list-item:nth-child(4) { animation-delay: 150ms; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

Diretrizes de Timing

Duração Caso de Uso Sensação
50-100ms Micro-interações (hover, pressionar) Feedback instantâneo
150-200ms Mudanças de estado simples (alternar, selecionar) Ágil
250-350ms Transições médias (deslizar painel, virar card) Suave
400-500ms Movimentos grandes (transições de página, modais) Deliberado

Performance: A Regra de Ouro

Anime apenas transform e opacity — estes são acelerados por GPU e não disparam layout.

/* RUIM: Animando layout */
.panel { transition: left 0.3s, width 0.3s; }

/* BOM: Usando transform */
.panel { transition: transform 0.3s; }

Quando NÃO Animar

  1. Usuário tem prefers-reduced-motion habilitado css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

  2. Animação não adiciona informação — spinners gratuitos, elementos quicando

  3. Usuários estão com pressa — estados de erro, validação de formulário, resultados de busca
  4. Animação atrasaria ações repetidas — atalhos de teclado devem ignorar animação

Referência Rápida de Animação

:root {
  /* Durações */
  --duration-instant: 0.1s;
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.4s;

  /* Easings */
  --ease-out: cubic-bezier(0.0, 0.0, 0.58, 1.0);
  --ease-in: cubic-bezier(0.42, 0.0, 1.0, 1.0);
  --ease-in-out: cubic-bezier(0.42, 0.0, 0.58, 1.0);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Dieter Rams: Dez Princípios

“Menos, mas melhor.” — Dieter Rams

Dieter Rams é o designer industrial mais influente do século XX. Como chefe de design na Braun de 1961-1995, ele criou produtos que permanecem atemporais décadas depois. Seu trabalho inspirou diretamente a linguagem de design da Apple.

Os Dez Princípios do Bom Design

1. Bom design é inovador Não copie. Combine tecnologia avançada com design inovador.

2. Bom design torna um produto útil Todo elemento deve servir a um propósito. A forma segue a função.

3. Bom design é estético A beleza não é superficial—é essencial. Produtos que usamos diariamente afetam nosso bem-estar.

4. Bom design torna um produto compreensível Usuários não devem precisar de instruções. A interface ensina a si mesma.

5. Bom design é discreto O design deve apoiar, não sobrecarregar. O conteúdo do usuário é a estrela, não sua UI.

/* Intrusivo: UI compete com conteúdo */
.editor {
  background: linear-gradient(135deg, purple, blue);
  border: 3px dashed gold;
}

/* Discreto: UI recua, conteúdo brilha */
.editor {
  background: var(--color-background);
  border: 1px solid var(--color-border);
}

6. Bom design é honesto Não use dark patterns. Não prometa demais. Seja transparente sobre limitações.

7. Bom design é duradouro Evite tendências que envelhecerão rapidamente. Clássico sobre modismo.

MODISMO (vai envelhecer):         ATEMPORAL:
- Glassmorphism extremo           - Tipografia limpa
- Cores neon, efeitos glitch      - Elevação sutil
- Gradientes agressivos           - Paleta neutra com destaque pensado

8. Bom design é minucioso até o último detalhe Nada deve ser arbitrário. Estados de carregamento, estados vazios, estados de erro—tudo projetado.

9. Bom design é ambientalmente consciente Performance é ambiental. Respeite a atenção do usuário. Código eficiente.

10. Bom design é o mínimo de design possível Remova tudo que não é necessário. O melhor design é invisível.

Padrões Web 2025

O design web moderno utiliza recursos nativos do CSS que eliminam a necessidade de JavaScript em muitos casos.

Container Queries

Dimensione componentes com base em seu contêiner, não na viewport.

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

.card {
  display: grid;
  gap: 16px;
  padding: 20px;
}

@container card-grid (min-width: 400px) {
  .card {
    grid-template-columns: auto 1fr;
  }
}

@container card-grid (min-width: 600px) {
  .card {
    padding: 32px;
    gap: 24px;
  }
}

O Seletor :has()

Seleção de elemento pai com base nos filhos—anteriormente impossível sem JavaScript.

/* Card com imagem recebe padding diferente */
.card:has(img) {
  padding: 0;
}

.card:has(img) .card-content {
  padding: 20px;
}

/* Grupo de formulário com erro */
.form-group:has(.input:invalid) .form-label {
  color: var(--color-error);
}

/* Destacar navegação quando estiver na página */
.nav-item:has(a[aria-current="page"]) {
  background: var(--color-surface);
}

CSS Nesting

Aninhamento nativo sem pré-processadores.

.card {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 24px;

  & .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
  }

  & .card-body {
    color: var(--color-text-secondary);
    line-height: 1.6;
  }

  &:hover {
    box-shadow: var(--shadow-md);
  }

  @media (min-width: 768px) {
    padding: 32px;
  }
}

Integração com HTMX

Interatividade orientada pelo servidor sem frameworks JavaScript pesados.

<!-- Carregar conteúdo ao clicar -->
<button hx-get="/api/more-items"
        hx-target="#item-list"
        hx-swap="beforeend"
        hx-indicator="#loading">
  Load More
</button>

<!-- Formulário com validação inline -->
<form hx-post="/api/contact"
      hx-target="#form-response"
      hx-swap="outerHTML">
  <input type="email" name="email"
         hx-post="/api/validate-email"
         hx-trigger="blur"
         hx-target="next .error" />
  <span class="error"></span>
</form>

Sistema de Design Tokens

Um sistema de tokens completo para consistência em toda sua aplicação.

:root {
  /* Cores */
  --color-text: #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;

  --color-background: #ffffff;
  --color-surface: #f8f9fa;
  --color-surface-elevated: #ffffff;

  --color-border: #e5e7eb;
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Tipografia */
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Espaçamento (base 8px) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* Bordas */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Transições */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 100ms;
  --duration-normal: 200ms;
}

Modo Escuro Bem Feito

Não apenas inverta—redesenhe para contextos escuros.

@media (prefers-color-scheme: dark) {
  :root {
    /* Neutros */
    --color-background: hsl(220, 13%, 10%);
    --color-surface: hsl(220, 13%, 15%);
    --color-surface-elevated: hsl(220, 13%, 18%);
    --color-border: hsl(220, 13%, 23%);

    /* Texto (invertido) */
    --color-text: hsl(220, 9%, 93%);
    --color-text-secondary: hsl(220, 9%, 70%);
    --color-text-muted: hsl(220, 9%, 55%);

    /* Ajustar saturação para modo escuro */
    --color-primary: hsl(220, 80%, 60%);
    --color-success: hsl(142, 70%, 45%);
    --color-error: hsl(0, 80%, 65%);

    /* Sombras no modo escuro precisam de ajuste */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  }
}

Princípios do modo escuro: - Reduza a saturação em superfícies grandes - Aumente a luminosidade das cores de destaque - Fortaleça as sombras (elas precisam de mais contraste) - Projete o modo escuro intencionalmente, não como algo secundário

Fluxos de Extração do Figma

Transformar arquivos de design em código de produção requer extração sistemática de design tokens—cores, tipografia, espaçamento e efeitos que definem sua linguagem de design.

Exportação de Variáveis do Figma

O recurso nativo de Variáveis do Figma fornece o caminho de extração mais limpo:

Passos de Exportação: 1. Abra o arquivo do Figma → painel de Variáveis Locais 2. Clique no menu da coleção → “Export to JSON” 3. Salve como figma-variables.json

Estrutura JSON dos Tokens:

{
  "colors": {
    "primitive": {
      "blue-500": { "value": "#3b82f6", "type": "color" },
      "blue-600": { "value": "#2563eb", "type": "color" }
    },
    "semantic": {
      "primary": { "value": "{colors.primitive.blue-500}", "type": "color" },
      "primary-hover": { "value": "{colors.primitive.blue-600}", "type": "color" }
    }
  },
  "spacing": {
    "1": { "value": "4px", "type": "spacing" },
    "2": { "value": "8px", "type": "spacing" },
    "4": { "value": "16px", "type": "spacing" }
  }
}

Transformação de Token para CSS

Propriedades Personalizadas CSS:

:root {
  /* Cores primitivas (valores diretos) */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-900: #1e3a8a;

  /* Cores semânticas (referenciam primitivas) */
  --color-primary: var(--color-blue-500);
  --color-primary-hover: var(--color-blue-600);
  --color-background: var(--color-white);
  --color-surface: var(--color-gray-50);

  /* Espaçamento (grid de 8px) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */

  /* Tipografia */
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* Efeitos */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

Tokens do Modo Escuro:

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--color-gray-900);
    --color-surface: var(--color-gray-800);
    --color-text: var(--color-gray-100);
    --color-text-secondary: var(--color-gray-400);

    /* Sombras ajustadas para modo escuro */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  }
}

Transformação de Token para SwiftUI

Extensão de Cores:

import SwiftUI

extension Color {
    // MARK: - Cores Primitivas
    static let blue50 = Color(hex: "eff6ff")
    static let blue500 = Color(hex: "3b82f6")
    static let blue600 = Color(hex: "2563eb")

    // MARK: - Cores Semânticas
    static let brandPrimary = Color.blue500
    static let brandPrimaryHover = Color.blue600

    // MARK: - Cores de Superfície
    static let surfaceBackground = Color(light: .white, dark: Color(hex: "0f172a"))
    static let surfaceElevated = Color(light: Color(hex: "f8fafc"), dark: Color(hex: "1e293b"))
}

extension Color {
    init(hex: String) {
        // Implementação padrão de parsing hexadecimal
    }

    init(light: Color, dark: Color) {
        self.init(UIColor { traits in
            traits.userInterfaceStyle == .dark ? UIColor(dark) : UIColor(light)
        })
    }
}

Constantes de Espaçamento:

enum Spacing {
    static let xs: CGFloat = 4    // --space-1
    static let sm: CGFloat = 8    // --space-2
    static let md: CGFloat = 16   // --space-4
    static let lg: CGFloat = 24   // --space-6
    static let xl: CGFloat = 32   // --space-8
}

// Uso
VStack(spacing: Spacing.md) {
    // ...
}
.padding(Spacing.lg)

Checklist de Handoff para Designers

O que Designers Devem Exportar:

Tipo de Ativo Formato Observações
Cores JSON de Variáveis Incluir modos claro + escuro
Tipografia Exportação de estilos Fonte, tamanho, peso, altura de linha
Espaçamento JSON de Variáveis Unidade base documentada
Ícones SVG Contornados, cor única
Imagens PNG @2x/@3x ou WebP Com compressão
Componentes Links do Figma Para referência durante implementação

Critérios de Quality Gate:

  • [ ] Todas as cores definidas como variáveis (sem hex hardcoded)
  • [ ] Tipografia usa estilos de texto definidos
  • [ ] Espaçamento segue sistema de grid (base 8px)
  • [ ] Variantes de modo escuro fornecidas
  • [ ] Estados interativos documentados (hover, active, disabled)
  • [ ] Breakpoints responsivos anotados
  • [ ] Requisitos de acessibilidade anotados (razões de contraste)

O Desenvolvedor Recebe:

  1. Arquivos de tokens (JSON/CSS/Swift dependendo da plataforma)
  2. Especificações de componentes com medidas
  3. Exportações de assets nos formatos necessários
  4. Documentação de interação (estados, animações)
  5. Anotações de acessibilidade

Tabelas de Referência Rápida

Princípios da Gestalt

Princípio Regra Uso
Proximidade Relacionado = próximo Formulários, seções
Similaridade Mesma aparência = mesma função Botões, cards
Figura-Fundo Separação clara de camadas Modais, cards
Continuidade Seguir linhas Timelines, alinhamento
Fechamento Cérebro completa formas Ícones, dicas de scroll

Tipografia

Elemento Tamanho Peso Altura de Linha
Corpo 16px 400 1.5-1.7
Títulos 24-48px 600-700 1.1-1.2
Labels de UI 12-14px 500 1.3-1.4
Legendas 12px 400 1.4

Papéis das Cores

Papel Modo Claro Modo Escuro
Background #ffffff #0f172a
Surface #f4f5f7 #1e293b
Border #e4e6ea #334155
Text #1a1a2e #f1f5f9
Text Muted #6b7280 #94a3b8
Primary #3b82f6 #60a5fa
Success #22c55e #4ade80
Error #ef4444 #f87171

Escala de Espaçamento

Token Valor Uso
–space-1 4px Espaços entre ícones
–space-2 8px Elementos inline
–space-4 16px Espaços padrão
–space-6 24px Padding de cards
–space-8 32px Espaços entre seções
–space-16 64px Seções de página

Checklist de Design

Antes de entregar qualquer interface, verifique:

Gestalt

  • [ ] Elementos relacionados estão mais próximos que os não relacionados (Proximidade)
  • [ ] Funções similares têm estilos similares (Similaridade)
  • [ ] Separação clara entre primeiro plano e fundo (Figura-Fundo)
  • [ ] O olho flui naturalmente pelo layout (Continuidade)

Tipografia

  • [ ] Tamanho base da fonte é pelo menos 16px
  • [ ] Altura de linha é 1.5+ para texto do corpo
  • [ ] Comprimento da linha está abaixo de 75 caracteres
  • [ ] Hierarquia é clara (3 níveis distinguíveis)
  • [ ] Escala consistente usada em todo o projeto

Cor

  • [ ] Todo texto passa no contraste 4.5:1 (WCAG AA)
  • [ ] Cor não é o único indicador (ícones/labels também)
  • [ ] Modo escuro projetado intencionalmente
  • [ ] Distribuição 60-30-10 seguida

Hierarquia Visual

  • [ ] É possível identificar o elemento #1 mais importante
  • [ ] O olho flui na ordem pretendida
  • [ ] Um CTA claro por seção
  • [ ] Escala tipográfica consistente

Espaçamento

  • [ ] Todo espaçamento usa escala definida (sem números mágicos)
  • [ ] Cards/componentes têm padding consistente
  • [ ] Espaçamento mobile é confortável
  • [ ] Alinhamento de grid é consistente (base 8px)

Verificação Dieter Rams

  • [ ] Algo pode ser removido?
  • [ ] Cada elemento serve uma função?
  • [ ] Isso pareceria datado em 5 anos?
  • [ ] Projetei todos os estados?

Recursos

Livros: - As Little Design as Possible de Sophie Lovell (Dieter Rams) - The Elements of Typographic Style de Robert Bringhurst

Ferramentas: - WebAIM Contrast Checker - Type Scale Generator - Figma Tokens Studio — Gerenciamento de design tokens

Design Systems: - Apple HIG - Material Design 3 - Radix UI - shadcn/ui

Estudos de Design

Análises aprofundadas de 16 produtos excepcionais, documentando padrões e princípios que vale a pena adotar.

Ferramentas para Desenvolvedores

Produto Contribuição Principal
Figma Presença multiplayer, painéis contextuais
Warp Terminal baseado em blocos, ponte CLI-GUI
Framer Design responsivo visual, controles de propriedades
Vercel Excelência em dark mode, status ambiente
Linear UI otimista, fluxo de trabalho keyboard-first
Raycast Sistema de extensões, ações rápidas

iOS Nativo (Vencedores do Apple Design Award)

Produto Contribuição Principal
Flighty 15 estados inteligentes, Live Activities, visualização de dados
Halide Ativação inteligente, controles por gestos
Bear Tipografia em primeiro lugar, tags inline
Craft Cross-platform nativo, páginas aninhadas
Things Datas adiadas, padrões de entrada rápida

Produtividade e IA

Produto Contribuição Principal
Superhuman Regra dos 100ms, treinamento de command palette, onboarding prático
Perplexity IA com citações em destaque, fases de streaming
Notion Sistema de blocos, slash commands
Arc Spaces, split view, barra de comandos
Stripe Excelência em documentação, design de API

Este guia cresce com a prática. Princípios de design são atemporais, mas sua aplicação evolui com a tecnologia e o conhecimento.