Princípios 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.

Sumário

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. Dark mode feito do jeito certo
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

“The whole is other than the sum of its parts.” — Kurt Koffka

A psicologia Gestalt, desenvolvida na Alemanha dos anos 1920, explica como os seres humanos percebem informação visual. O cérebro não enxerga 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 entre si 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     │
└─────────────────┘

CORRETO (espaçamento desigual = grupos claros):
┌─────────────────┐
│ Label           │
│ Input Field     │ ← Apertado (4px) - relacionados
│                 │
│                 │ ← Amplo (24px) - separando grupos
│ Label           │
│ Input Field     │ ← Apertado (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 assumem que funcionam da mesma forma. É por isso que sistemas de design usam estilos de botão consistentes, tratamentos de cards e tipografia padronizada.

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 fracas entre figura e fundo criam confusão visual.

Técnicas: - Contraste (figura clara sobre fundo escuro, ou vice-versa) - Sombras (elevar a figura acima do fundo) - Bordas (delimitar as arestas da figura) - Desfoque (desfocar o fundo, manter a figura nítida)

/* 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 em 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 ao longo da sua interface.

CONTINUIDADE NO ALINHAMENTO:
┌────────────────────────────────┐
│ Logo    [Nav]  [Nav]  [Nav]   │  ← Alinhados no eixo horizontal
├────────────────────────────────┤
│                                │
│ Headline                       │
│ ─────────────────────────────  │  ← O olho segue a margem esquerda
│ Paragraph text continues       │
│ along the same left edge       │
│                                │
│ [Primary Action]               │  ← Ainda na margem 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

“Typography is the craft of endowing human language with a durable visual form.” — 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.

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 (leading)

A altura de linha afeta dramaticamente a legibilidade. Diferentes conteúdos precisam de diferentes espaçamentos entre linhas.

Comprimento de linha (medida)

O comprimento ideal de linha previne fadiga visual e melhora a compreensão na 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 peso para estabelecer hierarquia, não apenas 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 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ário (Cards, seções)
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░│
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓██████▓▓▓▓▓▓▓▓▓▓░░░░░░░░│ 10% - Destaque (Botões, links)
└──────────────────────────────────────────┘

Construindo uma Paleta de Cores

Toda interface precisa dessas 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 porque o modo escuro se torna a consideração principal em vez de algo adicionado depois.

/* 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 o cansaço visual.

Contraste para Acessibilidade

As WCAG 2.2 se tornaram um padrão ISO (ISO/IEC 40500:2025) em outubro de 2025, adicionando critérios para visibilidade de foco, entrada redundante e autenticação acessível. Principais adições: indicadores de foco não podem ser totalmente obscurecidos 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 a 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 (content pages):     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 equivalente — 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 barra fina colorida no topo comunica o estado (construindo, publicado, falhou) sem interromper o fluxo de trabalho.

Analogias de Design do Mundo Real (Flighty): 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 ao olhar seu design. Ainda consegue enxergar a hierarquia? Se sim, ela está 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. Um espaçamento consistente cria ritmo visual — a sensação de que os elementos pertencem a 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 um ritmo consistente sem cálculos complexos

: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 geralmente deve ser 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

“Animation is not the art of drawings that move but the art of movements that are drawn.” — Norman McLaren

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

O princípio fundamental

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

Má animação: 1. Existe apenas porque “fica legal” 2. Atrasa o usuário 3. Chama atenção para si mesma 4. Gera 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);  /* Slight press before action */
}

2. Continuidade — Deixe o movimento se completar naturalmente com uma acomodação 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.

4. Encenação — Direcione a atenção para o que importa. Apenas um elemento 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 tempo

Performance: a regra de ouro

Anime apenas transform e opacity — esses 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 acrescenta informação — spinners gratuitos, elementos saltitantes

3. O usuário está 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ê consegue 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

“The best interface is no interface.” — Golden Krishna

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. Framer transforma breakpoints de 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, scrubbing de timeline.

Interfaces sensíveis ao contexto (Flighty, Figma)

Mostre apenas o que é relevante para o momento atual. 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
    }
}

Anti-padrão: Mostrar todos os controles e deixar os irrelevantes esmaecidos. Isso cria ruído visual.

Ativação inteligente (Halide)

Ferramentas devem perceber o contexto e se ativar automaticamente. 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 Auto e Manual do Halide são interfaces completamente diferentes. Warp conecta CLI e GUI por meio de quatro métodos de entrada (digitação, paleta, IA, mouse) sem forçar os usuários a adotar um único paradigma.

Conteúdo estruturado (Warp, Bear, Craft)

Adicione estrutura a conteúdo tradicionalmente não-estruturado. Warp transforma a saída do terminal em blocos discretos que podem ser copiados, compartilhados ou reexecutados. Bear permite organizar notas inline enquanto escreve (#tag/subtag). 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 rápido por meio de exposição repetida. A paleta Cmd+K do Superhuman sempre exibe atalhos de teclado junto aos resultados. Cada uso é uma micro-liçã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;
}

Anti-padrão: Modais de tutorial que explicam funcionalidades. Explicação é esquecida; prática é lembrada.

Padrões de interface com IA

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

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

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 pré-visualização ao passar o mouse e um painel persistente de fontes.

.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);
}

Anti-padrão: interfaces de IA que geram afirmações sem fontes rastreáveis. Se o modelo não consegue citar, a interface deve sinalizar isso.

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 claramente — não esconda por trás de texto que soa confiante.

Insight fundamental: usuários perdoam uma IA que é honesta sobre suas incertezas. Não perdoam uma 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 XX. Como diretor de design na 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 Cada elemento deve servir a um propósito. A forma segue a função.

3. Bom design é estético 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 prometa demais. Seja transparente sobre limitações.

7. Bom design é duradouro Evite tendências que vão envelhecer rápido. 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 consciente Performance é uma questão 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 for necessário. O melhor design é invisível.

Padrões web 2026

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

Container queries

Dimensione componentes com base no contêiner, não no 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 — antes 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 nativo do 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 nativo via CSS de um elemento em relação a outro — sem necessidade de JavaScript. Tooltips, popovers e menus dropdown que acompanham seus gatilhos.

/* 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 scroll. 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;
}

Dark mode feito do jeito certo

Não basta inverter — 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 dark mode: - Reduza a saturação em superfícies grandes - Aumente a luminosidade das cores de destaque - Reforce as sombras (elas precisam de mais contraste) - Projete o dark mode intencionalmente, não como algo secundário

Workflows de extração do Figma

Transformar arquivos de design em código de produção exige a extração sistemática de design tokens — cores, tipografia, espaçamento e efeitos que definem a linguagem visual do seu projeto.

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 de tokens em JSON:

{
  "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

Propriedades personalizadas em CSS:

: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 dark mode:

@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 qualidade:

• [ ] 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 de dark mode fornecidas
• [ ] Estados interativos documentados (hover, active, disabled)
• [ ] Breakpoints responsivos anotados
• [ ] Requisitos de acessibilidade registrados (taxas de contraste)

O que o desenvolvedor recebe:

1. Arquivos de tokens (JSON/CSS/Swift dependendo da plataforma)
2. Especificações de componentes com medidas
3. Exportação de assets nos formatos necessários
4. Documentação de interações (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 os não relacionados (Proximidade)
• [ ] Funções similares têm estilos similares (Similaridade)
• [ ] Separação clara entre primeiro plano e fundo (Figura-Fundo)
• [ ] O olhar flui naturalmente pelo layout (Continuidade)

Tipografia

• [ ] Tamanho base da fonte é no mínimo 16px
• [ ] Line height é 1.5+ para texto corrido
• [ ] Comprimento da linha é inferior a 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)
• [ ] Dark mode projetado intencionalmente
• [ ] Distribuição 60-30-10 respeitada

Hierarquia visual

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

Espaçamento

• [ ] Todo espaçamento usa a escala definida (sem números mágicos)
• [ ] Cards/componentes têm padding consistente
• [ ] Espaçamento mobile é confortável
• [ ] Alinhamento ao 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 tem uma fonte rastreável
• [ ] O streaming mostra fases do processo, não apenas um spinner
• [ ] Estados de erro são transparentes, não ocultos
• [ ] Outputs de baixa confiança são visualmente diferenciados

Checklist de Dieter Rams

• [ ] Algo pode ser removido?
• [ ] Cada elemento serve a 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

iOS nativo (vencedores do Apple Design Award)

Produtividade e IA

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