Construir um design system

Porquê um sistema, e não páginas

O erro clássico do principiante — humano ou assistido por IA — consiste em desenhar páginas uma a uma. A página inicial é bonita, a página de preços é bonita, mas postas lado a lado, não parecem pertencer ao mesmo produto: os azuis diferem ligeiramente, os espaçamentos mudam, os botões não têm o mesmo arredondamento. O resultado parece amador, mesmo que cada página isolada seja bem conseguida.

Um bom design não é uma acumulação de páginas bonitas, é um sistema coerente: um pequeno conjunto de decisões (cores, tipografias, espaçamentos, raios, sombras) tomadas uma vez e reutilizadas em todo o lado. A coerência tem um efeito psicológico mensurável: inspira confiança. O utilizador sente — sem o conseguir verbalizar — que um produto coerente é um produto cuidado, logo fiável. Para uma app de meditação que pede uma subscrição, essa confiança é literalmente dinheiro.

Com a IA, o sistema torna-se ainda mais crucial: cada nova conversa parte do zero. Se não forneceres as tuas decisões visuais, o modelo improvisará valores diferentes a cada geração. O design system é a tua memória externa: colas-o no início de cada prompt, e todos os ecrãs gerados falam a mesma língua.

Os design tokens: a gramática da tua interface

Concretamente, um design system começa por design tokens: variáveis nomeadas que carregam cada decisão visual. Em vez de escreveres #4A7C6F em quarenta sítios, defines --color-primary: #4A7C6F uma única vez e referencias a variável em todo o lado. No dia em que o cliente quiser um verde mais profundo, mudas uma linha e toda a interface acompanha.

Os tokens cobrem tipicamente cinco famílias: as cores, a tipografia (famílias, tamanhos, espessuras, alturas de linha), os espaçamentos, os raios de borda e as sombras. Em CSS, tudo isso cabe num bloco :root de cerca de cinquenta linhas. É esse bloco que vais pedir à IA para gerar — e que reinjetarás depois em cada prompt do projeto.

:root {
  /* Cores — papéis, não tons */
  --color-primary: #4A7C6F;      /* verde-salva: ações principais */
  --color-primary-hover: #3D685D;
  --color-accent: #E8A87C;       /* pêssego suave: destaques pontuais */
  --color-surface: #FAF8F5;      /* fundo creme quente */
  --color-surface-raised: #FFFFFF;
  --color-text: #2D3A36;         /* contraste 11.2:1 sobre surface */
  --color-text-muted: #5C6B66;   /* contraste 5.1:1 — AA ok */
  --color-success: #4A7C5F;
  --color-error: #B5544D;

  /* Tipografia — escala 1.25 (terça maior) */
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;
  --leading-tight: 1.2;
  --leading-body: 1.6;

  /* Espaçamentos — base 4 px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Raios e sombras */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-soft: 0 2px 12px rgba(45, 58, 54, 0.06);
  --shadow-raised: 0 8px 28px rgba(45, 58, 54, 0.10);
}

Cores: papéis, não tons

Repara em como os tokens de cor acima estão nomeados: primary, surface, text-muted — papéis funcionais, nunca tons (--verde-1, --bege). A nuance é capital. Um papel descreve o uso: «a cor das ações principais», «o fundo dos cartões elevados». Se mudares de paleta, os nomes continuam válidos. E sobretudo, a IA compreende os papéis: «usa --color-accent apenas para os destaques pontuais» é uma instrução que ela saberá respeitar ecrã após ecrã.

Do lado da composição, a regra empírica 60-30-10 continua a ser uma excelente salvaguarda: cerca de 60 % do ecrã em cor de superfície, 30 % em cores de texto e de estrutura, e apenas 10 % para a cor de destaque. É essa dosagem que torna um destaque impactante — uma cor usada em todo o lado já não destaca nada. O resultado «IA genérico» satura muitas vezes o ecrã de cor; o teu sistema, esse, impõe a contenção.

Cria um design system para uma app de meditação, ambiente calmo e premium (briefing: generosidade de espaço, suavidade colorida, tipografia nítida):
- 8 cores com papéis funcionais (primary, primary-hover, accent, surface, surface-raised, text, text-muted, error) em variáveis CSS
- contrastes acessíveis: AA no mínimo para todo o texto, indica o rácio de cada combinação texto/fundo
- escala tipográfica em rácio 1.25, de small a h1, com alturas de linha
- escala de espaçamento em base 4 px (4 → 96)
- 3 raios de borda e 2 sombras discretas
Entrega tudo num bloco :root { } CSS comentado, depois explica em 3 frases as escolhas de cor.

Contraste e acessibilidade: inegociável

Falemos do assunto que o resultado «bonito» faz esquecer demasiadas vezes: a acessibilidade. O contraste entre um texto e o seu fundo mede-se por um rácio que vai de 1:1 (invisível) a 21:1 (preto sobre branco). As WCAG definem dois patamares: AA exige 4,5:1 para o texto corrente (3:1 para os grandes títulos), e AAA sobe para 7:1. AA é o teu mínimo absoluto — não um objetivo, um piso.

Porquê ser intransigente? Primeiro porque cerca de uma pessoa em doze perceciona mal certas cores, e toda a gente lê um dia o telemóvel em pleno sol. Depois porque os ambientes «suaves e tranquilizantes» — precisamente o que pede o nosso cliente — puxam naturalmente para cinzentos claros sobre fundo creme que ficam abaixo dos patamares. Um design premium que não é legível não é premium: é um defeito de fabrico. Pede sistematicamente à IA para indicar os rácios de contraste de cada combinação texto/fundo, e manda verificar os casos-limite.

A tipografia: uma escala, não tamanhos ao acaso

A tipografia carrega sozinha metade da impressão «premium». Duas decisões estruturam tudo: a escolha das famílias (uma para os títulos, uma para o texto corrente — raramente mais de duas) e a escala dos tamanhos. Em vez de escolher cada tamanho por intuição, derivam-se todos os tamanhos de um rácio constante: cada nível é 1,25 vezes maior do que o anterior, por exemplo. Esse rácio cria uma harmonia matemática que o olho perceciona sem a compreender — exatamente como os intervalos na música.

Um rácio moderado (1,2 – 1,25) dá uma hierarquia suave, adaptada às interfaces densas; um rácio forte (1,333 – 1,5) cria títulos espetaculares, perfeitos para uma landing page em que a hero deve impor-se. Para a Sereno, um 1,25 com uma serifa elegante nos títulos (calor, humanidade) e uma sem serifa neutra no corpo (legibilidade) traduz bem a «calma premium». Não esqueças as alturas de linha: 1,5 a 1,6 para o corpo de texto, mais apertado (1,1 – 1,2) para os grandes títulos, senão eles flutuam.

O espaçamento: o ritmo invisível

O espaçamento é o parâmetro mais invisível e mais determinante de uma interface. Uma página «que respira» e uma página «apertada» usam muitas vezes os mesmos componentes — só os espaços diferem. O princípio: uma escala fixa em base 4 px (4, 8, 12, 16, 24, 32, 48, 64, 96) da qual nunca se sai. Nada de margens de 17 px ou de 23 px: cada espaço é um múltiplo escolhido na escala.

Esta restrição produz o ritmo vertical: a regularidade dos intervalos cria uma grelha invisível que acalma o olho. Ela explora também a lei da proximidade: os elementos próximos são percecionados como ligados, os elementos afastados como distintos. Um título deve por isso estar mais próximo do parágrafo que introduz do que da secção que fecha — regra simples, violada por metade das páginas web. Por fim, sê generoso entre as secções: 96 px de intervalo em desktop não é vazio, é pontuação. O genérico aperta; o premium respira.

Do token aos ecrãs: fazer viver o sistema

Uma vez definidos os teus tokens, o sistema segue uma lógica de irrigação: os tokens alimentam componentes (botões, cartões, campos de formulário), e os componentes montam ecrãs. A cada nova geração, pede explicitamente à IA que reutilize as variáveis existentes em vez de inventar valores: «usa exclusivamente os tokens fornecidos; se uma necessidade não estiver coberta, propõe um novo token em vez de um valor fixo».

flowchart TD
  T["Tokens: cores + tipografia + espaçamentos"] --> CP["Componentes: botões, cartões, formulários"]
  CP --> E1["Landing page"]
  CP --> E2["Página de preços"]
  CP --> E3["Ecrãs seguintes"]

Esta última instrução — propor um token em vez de um valor fixo — é preciosa: faz crescer o teu sistema de forma controlada. Ao longo do projeto, verás aparecer necessidades que a versão inicial não cobria (uma cor de borda, um espaçamento intermédio). Cada adição passa por ti, é nomeada, documentada, e junta-se ao ficheiro de referência. O sistema continua a ser a fonte de verdade única.