Design System

Design System — Fundamentos

Tokens, componentes, documentação e governança. Por que um DS existe e quando não criar um.

Definição

Um Design System é a fonte única de verdade para UI: tokens de design (cores, tipografia, espaçamento), componentes reutilizáveis, padrões de interação, e documentação. Resolve inconsistência visual entre times, acelera desenvolvimento (componentes prontos) e facilita mudanças de tema. Não é só uma lib de componentes — inclui processo, governança e documentação.

Problema → Solução

Problema

Times diferentes implementam o mesmo botão de 5 formas diferentes. Mudar a cor primária da marca exige alterar 300 arquivos. Novos devs não sabem quais componentes existem. Design e código ficam dessincronizados.

Solução

Design Tokens (CSS custom properties ou JSON) como fonte de verdade para valores visuais. Componentes que consomem tokens, nunca hardcode. Documentação com Storybook. Processo de contribuição claro. Versionamento semântico para breaking changes.

Dica de entrevista

Tip

Não crie um Design System antes de ter produto estável. Um DS prematuro engessa decisões de produto. Comece com tokens + uns 10 componentes base. Cresça sob demanda. "Pave the cowpaths" — pavimente os caminhos que o time já usa.

Código

// Design Tokens como CSS custom properties
:root {
  /* Primitivos — não usar diretamente */
  --blue-500: oklch(0.55 0.2 250);
  --blue-600: oklch(0.48 0.2 250);

  /* Semânticos — usar nos componentes */
  --color-primary:        var(--blue-500);
  --color-primary-hover:  var(--blue-600);
  --color-bg:             oklch(0.99 0 0);
  --color-text:           oklch(0.15 0 0);
  --color-border:         oklch(0.88 0 0);

  --space-1: 4px;  --space-2: 8px;
  --space-4: 16px; --space-8: 32px;

  --radius-sm: 4px; --radius-md: 8px; --radius-full: 9999px;

  --text-sm: 12px; --text-base: 14px; --text-lg: 16px;
}

/* Tema escuro — só muda os semânticos */
[data-theme="dark"] {
  --color-bg:    oklch(0.14 0 0);
  --color-text:  oklch(0.95 0 0);
  --color-border: oklch(0.3 0 0);
}

/* Componente consome tokens, nunca hardcode */
.btn-primary {
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
}

Perguntas de entrevista

Q.Qual a diferença entre Design Tokens e variáveis CSS?▾

A.Design Tokens são a camada semântica: --color-primary em vez de --blue-500. Permitem rebranding completo sem tocar nos componentes — só os tokens mudam. Variáveis CSS são o mecanismo; tokens são o padrão. W3C Design Tokens Community Group está padronizando o formato JSON.

Q.Quando um DS próprio vale o investimento?▾

A.Vale quando: múltiplos produtos compartilham identidade visual, time de design+dev dedicado, produto estável (não MVP). Não vale quando: startup validando produto, time pequeno, UI não é diferencial. Alternativa: customizar um DS existente (shadcn/ui, Radix, Chakra).

Q.Como lidar com breaking changes no DS?▾

A.Versionamento semântico (semver): MAJOR para breaking changes de API, MINOR para novos componentes, PATCH para bugfixes. Codemods para migração automática. Período de deprecation com warnings antes de remover. Changelog detalhado com exemplos de migração.

61/122← →