O básico de UI para programadores

Você não precisa ser designer para fazer uma interface que pareça profissional. A maioria dos problemas visuais que programadores enfrentam vêm de alguns poucos conceitos mal aplicados — e esses conceitos são aprendíveis.

Objetivo desse post: dar o vocabulário e as regras práticas que cobrem 80% dos casos. Não é um curso de design — é o suficiente para você parar de fazer interfaces feias sem saber por quê.

Cores

Paleta: menos é mais

Uma paleta bem construída geralmente tem:

1 cor primária — identidade, botões, links, destaques
1 cor de fundo — geralmente neutro (branco, cinza claro, quase-preto)
1 cor de texto — nunca preto puro (#000), prefira algo como #1a1a1a ou #111
Tons derivados da primária — versões mais claras/escuras para hover, disabled, backgrounds

Evite inventar uma cor nova para cada situação. Quanto mais variações, mais difícil fica manter consistência.

HSL é mais intuitivo que HEX

Para manipular cores no código, HSL (Hue, Saturation, Lightness) é muito mais intuitivo que HEX:

/* HEX — difícil de ajustar mentalmente */
color: #3b82f6;

/* HSL — fácil de derivar tons */
color: hsl(217, 91%, 60%);       /* primária */
color: hsl(217, 91%, 45%);       /* mais escura (hover) */
color: hsl(217, 91%, 95%);       /* quase branco (background) */

Mesma matiz (217), só muda o L (lightness). Fácil de manter uma família de cores coesa.

Teoria das cores

O círculo cromático

O círculo cromático organiza as cores por relação entre si. As combinações mais usadas:

Esquema	Como funciona	Transmite
Complementar	Cores opostas no círculo (ex: azul + laranja)	Contraste, energia
Análogo	Cores vizinhas (ex: azul + azul-esverdeado)	Harmonia, suavidade
Monocromático	Tons da mesma matiz	Elegância, sofisticação
Triádico	3 cores equidistantes	Vibração, diversidade

Para a maioria das interfaces, monocromático + 1 cor de destaque já resolve bem.

Círculo cromático com esquemas complementar, análogo, monocromático e triádico

Temperatura

Cores têm temperatura, e ela afeta a percepção:

Quentes (vermelho, laranja, amarelo) — urgência, energia, atenção. Bom para alertas e CTAs.
Frias (azul, verde, roxo) — calma, confiança, profissionalismo. Dominantes em fintechs e SaaS.
Neutros (cinza, bege, branco) — base, não competem com o conteúdo.

Tipografia

Os tipos de fonte

Tipo	Características	Quando usar
Serif	Tem serifa (traços nas extremidades) — ex: Georgia, Times	Conteúdo longo, editorial
Sans-serif	Sem serifa — ex: Inter, Roboto, Geist	Interfaces, dashboards, web em geral
Monospace	Largura fixa — ex: JetBrains Mono, Fira Code	Código, dados técnicos
Display	Expressiva, decorativa	Títulos de impacto, marketing

Para interfaces web, sans-serif é quase sempre a escolha certa. Inter e Geist são os mais usados em produtos modernos.

Comparação visual entre Serif, Sans-serif, Monospace e Display

Regras práticas

Use no máximo 2 fontes. Uma para títulos, uma para corpo. Mais do que isso, a página começa a parecer um recorte de revista.

Font weight cria hierarquia sem precisar mudar tamanho:

/* Hierarquia só com peso */
font-weight: 700;  /* título */
font-weight: 500;  /* subtítulo */
font-weight: 400;  /* corpo */
font-weight: 300;  /* caption, metadata */

Line height para corpo de texto: entre 1.5 e 1.7. Texto muito comprimido cansa os olhos.

Letter spacing: títulos grandes geralmente ficam melhor com letter-spacing ligeiramente negativo (-0.02em). Texto pequeno (labels, captions) com ligeiramente positivo (0.05em).

Espaçamento

Sistema de grid (8px base)

A regra mais simples e eficaz: use múltiplos de 8px para todos os espaçamentos.

4px  — separações mínimas (entre ícone e texto)
8px  — espaçamento pequeno
16px — espaçamento padrão
24px — espaçamento médio
32px — espaçamento grande
48px — separação de seções
64px — separação de blocos maiores

Quando todos os espaçamentos seguem esse ritmo, a interface parece “organizada” mesmo que você não saiba exatamente por quê — porque o olho percebe o padrão.

Sistema de espaçamento base 8px

Whitespace não é espaço desperdiçado

O erro mais comum de iniciantes é encher a tela com elementos para “aproveitar o espaço”. Respiro visual é intencional — ele direciona o olhar, separa conceitos e reduz carga cognitiva.

Se um elemento parece estar “perdido”, geralmente é falta de contexto ao redor dele — não excesso de espaço.

Hierarquia visual

O olho percorre a tela em busca de ordem. Hierarquia visual é você definir essa ordem.

Os três ferramentas principais:

Tamanho — o maior chama atenção primeiro
Peso (font-weight) — negrito se destaca do texto normal
Cor — elementos de destaque em cor primária, secundários em cinza

/* Hierarquia bem aplicada */
h1 { font-size: 2.5rem; font-weight: 700; color: #111; }
h2 { font-size: 1.5rem; font-weight: 600; color: #333; }
p  { font-size: 1rem;   font-weight: 400; color: #555; }

Se você olhar para a sua tela e tudo parecer com a mesma importância, a hierarquia está quebrada.

Hierarquia visual quebrada vs aplicada corretamente

Contraste

Contraste de cor (WCAG)

Texto precisa ter contraste suficiente com o fundo para ser legível. O padrão WCAG define:

AA (mínimo): razão de contraste 4.5:1 para texto normal, 3:1 para texto grande
AAA (ideal): razão de contraste 7:1

Ferramentas como coolors.co ou a própria DevTools do browser checam isso automaticamente.

Erro comum: texto cinza claro em fundo branco. Parece elegante no Figma, mas é ilegível na prática.

Comparação de contraste: falha vs passa WCAG

Simetria e Assimetria

Simetria — estabilidade

Grids simétricos transmitem ordem, confiança e profissionalismo. Dashboards, tabelas, cards em grid — todos se beneficiam de simetria.

[ Card ] [ Card ] [ Card ]
[ Card ] [ Card ] [ Card ]

Assimetria — dinamismo

Assimetria controlada cria movimento e guia o olhar. Hero sections com texto de um lado e imagem do outro são um exemplo clássico.

[ Título e CTA      |  Imagem/Ilustração ]
[ Subtítulo         |                   ]

A assimetria funciona bem quando há um elemento âncora — algo que equilibra visualmente o peso dos dois lados.

Na prática

A maioria das boas interfaces mistura os dois: grid simétrico como base, assimetria nos pontos de destaque. O grid dá ordem, a assimetria evita que fique monótono.

Consistência

O princípio mais subestimado. Uma interface pode ter cores medíocres e tipografia razoável — e ainda assim parecer profissional se for consistente.

Consistência significa:

Os mesmos espaçamentos usados em todos os lugares
Os mesmos pesos de fonte para os mesmos níveis de hierarquia
Os mesmos raios de borda (border-radius) em todos os cards
Os mesmos estados de hover em todos os botões interativos

A ferramenta prática para isso são as variáveis CSS (ou design tokens):

:root {
  --color-primary: hsl(217, 91%, 60%);
  --color-text: #1a1a1a;
  --radius-md: 8px;
  --space-md: 16px;
}

Quando você precisa mudar algo, muda em um lugar só. E quando você cria algo novo, tem um vocabulário para seguir.

Por onde começar

Se você quer aplicar tudo isso de uma vez, pode ser difícil. Uma sugestão de ordem:

Escolha uma paleta de 3–4 cores e defina variáveis CSS para elas
Escolha 1 fonte sans-serif e defina os tamanhos e pesos que vai usar
Adote o grid de 8px para todos os espaçamentos
Verifique contraste nos textos principais
Cheque hierarquia — o que é mais importante está visualmente maior/mais pesado?