Principios de Design para Engenheiros de Software

Atualizado em 9 de fevereiro de 2026

Atualização de fevereiro de 2026: Adicionadas duas novas seções—Padrões de Interação (8 paradigmas a partir do estudo de Framer, Flighty, Halide, Warp, Bear, Craft e Superhuman) e Padrões de Interface com IA (design centrado em citações, fases de streaming, transparência de erros do Perplexity). Seção de Padrões Web atualizada para 2026 com anchor positioning, animações orientadas por scroll e @starting-style. Acessibilidade atualizada para refletir a padronização ISO do WCAG 2.2. Consulte 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 conhecimento na referência completa que eu gostaria que existisse quando comecei a me importar com a aparência e a experiência 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 que parece profissional está em compreender esses princípios e aplicá-los de forma consistente.

Este guia pressupõe que você já sabe escrever código. Ele ensina você a enxergar—a entender por que algumas interfaces parecem fluir naturalmente enquanto outras parecem caóticas e, mais importante, como construir as primeiras.

Índice

Parte 1: Fundamentos

1. Psicologia Gestalt
2. Tipografia
3. Teoria das cores
4. Hierarquia visual
5. Espaçamento e ritmo
6. Princípios de animação

Parte 2: Interação e IA

1. Padrões de interação
2. Padrões de interface com IA

Parte 3: Filosofia de design

1. Dieter Rams: Dez princípios

Parte 4: Implementação

1. Padrões web 2026
2. Sistema de design tokens
3. Modo escuro bem feito
4. Fluxos de extração do Figma

Parte 5: Referência

1. Tabelas de referência rápida
2. Checklist de design
3. Estudos de design

Psicologia Gestalt

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

A psicologia Gestalt, desenvolvida na Alemanha dos anos 1920, explica como os seres 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 uns dos outros são percebidos como um grupo.

Este é o princípio 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           │
│                 │
│ Input Field     │
│                 │
│ Label           │
│                 │
│ Input Field     │
└─────────────────┘

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

Implementação CSS:

.form-group {
  margin-bottom: 24px;  /* Between groups: wide */
}

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

Implementação SwiftUI:

VStack(alignment: .leading, spacing: 4) {  // Tight within group
    Text("Email")
        .font(.caption)
        .foregroundStyle(.secondary)
    TextField("[email protected]", text: $email)
        .textFieldStyle(.roundedBorder)
}
.padding(.bottom, 24)  // Wide between groups

Similaridade

Elementos que compartilham características visuais parecem relacionados.

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

Exemplo de navegação:
┌───────────────────────────────────┐
│ [Dashboard] [Projects] [Settings] │  ← Mesmo estilo = mesma função
│                                   │
│ ┌─────┐  ┌─────┐  ┌─────┐        │
│ │Card │  │Card │  │Card │         │  ← Mesmo estilo = mesmo tipo de conteúdo
│ └─────┘  └─────┘  └─────┘        │
│                                   │
│ [+ New Project]                   │  ← Estilo diferente = função diferente
└───────────────────────────────────┘

Figura-fundo

O conteúdo deve se separar claramente do plano de fundo.

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

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

/* Strong figure-ground relationship */
.card {
  background: var(--color-surface);     /* Figure */
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);  /* Elevation */
}

.modal-overlay {
  background: rgba(0, 0, 0, 0.5);  /* Dim ground */
  backdrop-filter: blur(4px);      /* Blur ground */
}

Região comum

Elementos dentro de um limite são percebidos como agrupados.

Envolver elementos dentro de um contêiner visual (card, caixa, área com borda) sinaliza que eles pertencem ao mesmo grupo.

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
├────────────────────────────────┤
│                                │
│ Headline                       │
│ ─────────────────────────────  │  ← O olho segue a borda esquerda
│ Paragraph text continues       │
│ along the same left edge       │
│                                │
│ [Primary Action]               │  ← Ainda na borda esquerda
└────────────────────────────────┘

Fechamento

O cérebro completa formas incompletas.

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

/* Horizontal scroll with partial card (closure) */
.card-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-right: 48px;  /* Show partial card = scroll hint */
}

.card-carousel .card {
  flex: 0 0 280px;  /* Fixed width, partial visible */
}

Referência rápida de Gestalt

Tipografia

“A tipografia é a arte de conferir à 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 — ela 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 sparingly */
  --text-sm: 0.8rem;     /* 12.8px - captions, labels */
  --text-base: 1rem;     /* 16px - body text */
  --text-lg: 1.25rem;    /* 20px - lead text */
  --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 drasticamente a legibilidade. Diferentes tipos de conteúdo precisam de entrelinhas diferentes.

Comprimento de linha (medida)

O comprimento ideal de linha previne a 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;  /* ch unit = width of '0' character */
}

.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; }  /* Bold */
h2 { font-weight: 600; }  /* Semibold */
h3 { font-weight: 600; }  /* Semibold */
.lead { font-weight: 500; }  /* Medium */
p { font-weight: 400; }   /* Regular */
.meta { font-weight: 400; color: var(--text-muted); }

Referência rápida de tipografia

Teoria das cores

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

A cor comunica mais rápido do que palavras. Ela estabelece atmosfera, 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 {
  /* Brand */
  --color-primary: hsl(220, 80%, 50%);
  --color-primary-hover: hsl(220, 80%, 45%);

  /* Semantic */
  --color-success: hsl(142, 76%, 36%);  /* Green - positive */
  --color-warning: hsl(38, 92%, 50%);   /* Amber - caution */
  --color-error: hsl(0, 84%, 60%);      /* Red - danger */

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

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

Psicologia das cores

Design dark-mode-first (Vercel)

A Vercel projeta primeiro para o modo escuro e depois deriva o modo claro. Isso produz interfaces escuras melhores, pois o modo escuro se torna a consideração principal, em vez de um ajuste posterior.

/* Design dark first, derive light */
:root {
  /* Dark mode defaults */
  --color-background: hsl(0, 0%, 0%);
  --color-surface: hsl(0, 0%, 7%);
  --color-border: hsl(0, 0%, 15%);
  --color-text: hsl(0, 0%, 93%);
  --color-text-secondary: hsl(0, 0%, 63%);
}

@media (prefers-color-scheme: light) {
  :root {
    --color-background: hsl(0, 0%, 100%);
    --color-surface: hsl(0, 0%, 97%);
    --color-border: hsl(0, 0%, 89%);
    --color-text: hsl(0, 0%, 9%);
    --color-text-secondary: hsl(0, 0%, 40%);
  }
}

Quando usar: Ferramentas para desenvolvedores, aplicativos de mídia, dashboards — contextos em que os usuários passam longas sessões e o modo escuro reduz a fadiga ocular.

Contraste de acessibilidade

O WCAG 2.2 tornou-se um padrão ISO (ISO/IEC 40500:2025) em outubro de 2025, adicionando critérios para visibilidade do foco, entrada redundante e autenticação acessível. Principais adições: indicadores de foco não devem ser totalmente obstruídos por outro conteúdo (2.4.11), e a autenticação não deve depender exclusivamente de testes de função cognitiva (3.3.8).

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 uma hierarquia clara, os usuários precisam se esforçar para encontrar informações. Com ela, as interfaces parecem fluir naturalmente.

As seis ferramentas da hierarquia

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

.hero-title { font-size: 3rem; }      /* Dominant */
.section-title { font-size: 1.5rem; } /* Secondary */
.body-text { font-size: 1rem; }       /* Baseline */

2. Peso — Negrito se destaca, 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); }  /* Near black */
.meta { color: var(--color-text-muted); }  /* Gray */

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

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

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

.hero { padding: 120px 48px; }  /* Generous space */
.data-table { padding: 12px; }  /* Dense content */

6. Profundidade e elevação — Elementos que se projetam para frente 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); }

Padrões aplicados

Presença colaborativa (Figma): Múltiplos cursores de usuários com rótulos de nome, destaques de seleção e contornos de componentes criam um documento vivo. A cor de cada colaborador é distinta, mas com peso visual igual — nenhum cursor é “mais alto” que outro.

Indicadores de status ambientais (Vercel): O status de deploy usa indicadores sutis e persistentes em vez de alertas intrusivos. Uma fina barra colorida no topo comunica o estado (construindo, implantado, falhou) sem interromper o fluxo de trabalho.

Analogias de design do mundo real (Flighty): As visualizações de progresso de voo espelham instrumentos reais de aviação — curvas de altitude, indicadores de velocidade e mapas de portão usam metáforas visuais familiares em vez de barras de progresso abstratas.

O teste do olhar semicerrado

Semicerre os olhos para o seu design. Você ainda consegue enxergar 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;    /* Tight: icon gaps */
  --space-2: 8px;    /* Compact: inline elements */
  --space-3: 12px;   /* Snug: form fields */
  --space-4: 16px;   /* Default: most gaps */
  --space-6: 24px;   /* Spacious: card padding */
  --space-8: 32px;   /* Section gaps */
  --space-12: 48px;  /* Major sections */
  --space-16: 64px;  /* Page sections */
  --space-20: 80px;  /* Hero spacing */
}

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;        /* Internal: spacious */
  margin-bottom: 16px;  /* External: less than 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; }  /* Tight to subtitle */

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

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

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 fundamental

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 relações 3. Parece natural e esperada 4. Desaparece da percepção consciente

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 está por vir.

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

.button:active {
  transform: scale(0.97);  /* Slight press before action */
}

2. Continuidade — Deixe o movimento se completar naturalmente com um assentamento semelhante a uma 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.

4. Encenação — Direcione a atenção para o que importa. Apenas uma coisa deve se mover por vez, a menos que coreografada como um 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 tempo

Performance: a regra de ouro

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

/* BAD: Animating layout */
.panel { transition: left 0.3s, width 0.3s; }

/* GOOD: Using transform */
.panel { transition: transform 0.3s; }

Quando NÃO animar

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

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

3. Os usuários estão com pressa — estados de erro, validação de formulário, resultados de busca
4. A animação atrasaria ações repetidas — atalhos de teclado devem ignorar animações
5. Os dados já estão carregados — Bear usa zero estados de carregamento ao pré-carregar o conteúdo, fazendo o app parecer instantâneo. Se você pode pré-carregar, pule o skeleton/spinner completamente.

// Bear's approach: preload so no loading state is needed
struct NoteListView: View {
    @Query var notes: [Note]  // SwiftData loads from disk instantly
    // No loading state, no skeleton, no spinner — data is always there
    var body: some View {
        List(notes) { note in
            NoteRow(note: note)
        }
    }
}

Referência rápida de animação

:root {
  /* Durations */
  --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);
}

Padrões de interação

“A melhor interface é nenhuma interface.” — Golden Krishna

Os padrões de interação definem como os usuários manipulam, navegam e compreendem seu produto. Esses padrões foram extraídos do estudo de produtos que entregam interações excepcionais.

Manipulação direta (Framer)

Torne conceitos abstratos tangíveis. O Framer transforma breakpoints CSS — números abstratos — em alças arrastáveis. Os usuários veem os layouts se adaptarem em tempo real.

/* Breakpoint handle styling */
.breakpoint-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
  cursor: col-resize;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.breakpoint-handle:hover,
.breakpoint-handle:active {
  opacity: 1;
  width: 6px;
}

Quando usar: Qualquer configuração em que o resultado é visual — arrastar para redimensionar, seletores de cor, navegação em linha do tempo.

Interfaces sensíveis ao contexto (Flighty, Figma)

Mostre apenas o que é relevante para o momento atual. O Flighty usa 15 estados distintos para rastreamento de voos. O painel de propriedades do Figma se transforma completamente com base no que você selecionou.

enum ContextState: CaseIterable {
    case farOut, dayBefore, headToAirport, atAirport
    case atGate, boarding, inFlight, landed, connection

    static func current(for flight: Flight, context: UserContext) -> ContextState {
        // Factor in: time, location, flight status
        // Return the single most relevant state
    }
}

Antipadrão: Mostrar todos os controles e desabilitar visualmente os irrelevantes. Isso cria ruído visual.

Ativação inteligente (Halide)

As ferramentas devem perceber o contexto e se ativar sozinhas. A lupa de foco do Halide aparece ao arrastar o foco e desaparece ao soltar. Nenhum botão de alternância necessário.

struct IntelligentlyActivated<Content: View>: ViewModifier {
    let isInteracting: Bool
    @State private var isVisible = false

    func body(content: Content) -> some View {
        content
            .opacity(isVisible ? 1 : 0)
            .scaleEffect(isVisible ? 1 : 0.95)
            .animation(.easeInOut(duration: 0.2), value: isVisible)
            .onChange(of: isInteracting) { _, newValue in
                if newValue {
                    withAnimation { isVisible = true }
                } else {
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                        if !isInteracting { isVisible = false }
                    }
                }
            }
    }
}

Design de modo duplo (Halide, Warp)

Mudanças de modo devem transformar a UI, não apenas alternar elementos. Os modos Automático e Manual do Halide são interfaces completamente diferentes. O Warp conecta CLI e GUI através de quatro métodos de entrada (digitação, paleta, IA, mouse) sem forçar os usuários a um único paradigma.

Conteúdo estruturado (Warp, Bear, Craft)

Adicione estrutura a conteúdos tradicionalmente não estruturados. O Warp transforma a saída do terminal em blocos discretos que podem ser copiados, compartilhados ou reexecutados. O Bear permite organizar notas inline enquanto você escreve (#tag/subtag). O Craft permite que qualquer bloco se torne uma página — a estrutura emerge do uso, não de uma hierarquia predefinida.

Treinamento progressivo (Superhuman)

Ensine aos usuários o caminho mais rápido através da exposição repetida. A paleta Cmd+K do Superhuman sempre exibe atalhos de teclado ao lado dos resultados. Cada uso é uma microlição.

/* Always show shortcut alongside command name */
.command-result {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
}

.command-shortcut {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 2px 6px;
  border-radius: 4px;
}

Antipadrão: Modais de tutorial que explicam funcionalidades. Explicações são esquecidas; a prática é lembrada.

Padrões de interface com IA

“As melhores interfaces de IA tornam o processo da máquina visível e o resultado da máquina verificável.”

Interfaces de IA enfrentam desafios únicos: os usuários não conseguem prever o resultado, não conseguem verificar a precisão por inspeção e frequentemente não conseguem distinguir se o sistema está funcionando ou com defeito.

O problema central

Design orientado a citações (Perplexity)

Toda afirmação factual deve ter link para sua fonte. O Perplexity incorpora citações inline [1] em cada afirmação, com previews ao passar o mouse e um painel de fontes persistente.

.citation-marker {
  position: relative;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.8em;
  vertical-align: super;
}

.citation-preview {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Antipadrão: Interfaces de IA que geram afirmações sem fontes rastreáveis. Se o modelo não consegue citar, a interface deve sinalizar.

Indicadores de fase em streaming (Perplexity)

Mostre aos usuários o que a IA está fazendo, não apenas que está funcionando. Substitua spinners genéricos por indicadores de fase: “Pesquisando…” → “Lendo 4 fontes…” → “Escrevendo resposta…”

.phase-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--phase-color) 10%, transparent);
  border-radius: 16px;
  font-size: 13px;
  color: var(--phase-color);
  transition: all 0.3s ease;
}

.loading-dots span {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
}

Transparência em erros

Quando a IA falha ou está incerta, mostre isso claramente — não se esconda atrás de texto que soa confiante.

Insight principal: Os usuários perdoam a IA que é honesta sobre incertezas. Eles não perdoam a IA que está confiantemente errada.

Dieter Rams: dez princípios

“Menos, porém melhor.” — Dieter Rams

Dieter Rams é o designer industrial mais influente do século 20. Como diretor de design da Braun de 1961 a 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 em avanço 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 Os usuários não deveriam 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 é o protagonista, não a sua UI.

/* Obtrusive: UI competes with content */
.editor {
  background: linear-gradient(135deg, purple, blue);
  border: 3px dashed gold;
}

/* Unobtrusive: UI recedes, content shines */
.editor {
  background: var(--color-background);
  border: 1px solid var(--color-border);
}

6. Bom design é honesto Não use dark patterns. Não faça promessas exageradas. Seja transparente sobre limitações.

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

TRENDY (will date):           TIMELESS:
- Extreme glassmorphism       - Clean typography
- Neon colors, glitch effects - Subtle elevation
- Aggressive gradients        - Neutral palette with considered accent

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

9. Bom design é ambientalmente responsável 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 2026

O design web moderno aproveita capacidades nativas do CSS que eliminam a necessidade de JavaScript em muitos casos. O período 2025-2026 trouxe anchor positioning, scroll-driven animations e @starting-style para navegadores em produção.

Container Queries

Dimensione componentes com base no 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 with image gets different padding */
.card:has(img) {
  padding: 0;
}

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

/* Form group with error */
.form-group:has(.input:invalid) .form-label {
  color: var(--color-error);
}

/* Highlight navigation when on that page */
.nav-item:has(a[aria-current="page"]) {
  background: var(--color-surface);
}

Aninhamento CSS

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.

<!-- Load content on click -->
<button hx-get="/api/more-items"
        hx-target="#item-list"
        hx-swap="beforeend"
        hx-indicator="#loading">
  Load More
</button>

<!-- Form with inline validation -->
<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>

Anchor Positioning

Posicionamento CSS nativo de um elemento em relação a outro — sem necessidade de JavaScript. Tooltips, popovers e menus dropdown que acompanham seus elementos de gatilho.

/* Anchor an element to another */
.trigger {
  anchor-name: --my-trigger;
}

.tooltip {
  position: fixed;
  position-anchor: --my-trigger;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;
}

Scroll-Driven Animations

Vincule o progresso da animação à posição de rolagem. Indicadores de progresso de leitura, efeitos parallax e sequências de revelação sem JavaScript.

/* Reading progress bar */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-primary);
  transform-origin: left;
  animation: progress linear;
  animation-timeline: scroll();
}

@keyframes progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@starting-style

Defina estilos iniciais para elementos que entram no DOM — permitindo animações de entrada apenas com CSS, sem JavaScript.

.card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;

  @starting-style {
    opacity: 0;
    transform: translateY(10px);
  }
}

Sistema de design tokens

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

:root {
  /* Colors */
  --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;

  /* Typography */
  --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;

  /* Spacing (8px base) */
  --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 */

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

  /* Shadows */
  --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);

  /* Transitions */
  --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 {
    /* Neutrals */
    --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%);

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

    /* Adjust saturation for dark mode */
    --color-primary: hsl(220, 80%, 60%);
    --color-success: hsl(142, 70%, 45%);
    --color-error: hsl(0, 80%, 65%);

    /* Shadows in dark mode need adjustment */
    --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 a extração sistemática de design tokens — cores, tipografia, espaçamento e efeitos que definem a linguagem visual do seu design.

Exportação de variáveis do Figma

O recurso nativo de Variables do Figma oferece o caminho de extração mais limpo:

Passos para exportação: 1. Abra o arquivo no Figma → painel Local Variables 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 tokens para CSS

CSS Custom Properties:

:root {
  /* Primitive colors (direct values) */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-900: #1e3a8a;

  /* Semantic colors (reference primitives) */
  --color-primary: var(--color-blue-500);
  --color-primary-hover: var(--color-blue-600);
  --color-background: var(--color-white);
  --color-surface: var(--color-gray-50);

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

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

  /* Effects */
  --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 para 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);

    /* Adjusted shadows for dark mode */
    --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 tokens para SwiftUI

Extensão de cores:

import SwiftUI

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

    // MARK: - Semantic Colors
    static let brandPrimary = Color.blue500
    static let brandPrimaryHover = Color.blue600

    // MARK: - Surface Colors
    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) {
        // Standard hex parsing implementation
    }

    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
}

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

Checklist de handoff para designers

O que os designers devem exportar:

Critérios de quality gate:

• [ ] Todas as cores definidas como variáveis (sem hex hardcoded)
• [ ] Tipografia usa estilos de texto definidos
• [ ] Espaçamento segue o sistema de grid (base de 8px)
• [ ] Variantes para modo escuro fornecidas
• [ ] Estados interativos documentados (hover, active, disabled)
• [ ] Breakpoints responsivos anotados
• [ ] Requisitos de acessibilidade anotados (proporçõ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 de Gestalt

Tipografia

Funções das cores

Escala de espaçamento

Checklist de design

Antes de publicar qualquer interface, verifique:

Gestalt

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

Tipografia

• [ ] O tamanho base da fonte é de pelo menos 16px
• [ ] A altura de linha é 1.5+ para texto corrido
• [ ] O comprimento da linha é inferior a 75 caracteres
• [ ] A hierarquia é clara (3 níveis distinguíveis)
• [ ] Escala consistente usada em toda a interface

Cor

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

Hierarquia visual

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

Espaçamento

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

Interação

• [ ] Os usuários conseguem alcançar seus objetivos sem pensar na ferramenta?
• [ ] A UI se adapta ao contexto atual?
• [ ] As ferramentas ficam visíveis apenas quando relevantes?
• [ ] O uso repetido ensina métodos mais rápidos?

Interfaces de IA

• [ ] Toda afirmação factual possui uma fonte rastreável
• [ ] O streaming mostra fases do processo, não apenas um spinner
• [ ] Estados de erro são transparentes, não ocultos
• [ ] Resultados de baixa confiança são visualmente diferenciados

Verificação Dieter Rams

• [ ] Algo pode ser removido?
• [ ] Cada elemento cumpre uma função?
• [ ] Isso pareceria ultrapassado em 5 anos?
• [ ] Todos os estados foram projetados?

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

iOS nativo (vencedores do Apple Design Award)

Produtividade e IA

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