Princípios do Design System

Como usar tokens de design, mapas SCSS e variáveis CSS customizadas para manter a consistência visual da interface.

Princípios do Design System

Nossa interface é baseada em três regras essenciais para manter a consistência e a facilidade de manutenção a longo prazo:

1. Única Fonte da Verdade (Tokens)

Todo espaçamento, borda, sombra e tipografia é derivado diretamente dos tokens definidos em src/styles/_tokens.scss. Componentes nunca devem usar valores fixos (padding: 13px), mas sim valores semânticos (padding: tokens.$space-3).

2. Componentes Semânticos

Componentes não decidem suas próprias cores de forma estática. Eles consomem propriedades CSS do tema ativo:

.meu-componente {
  background: var(--c-surface);
  color: var(--c-fg);
  border: 1px solid var(--c-line);
}

3. Temas Dinâmicos em Runtime

Temos mais de 15 esquemas de cores ativos que modificam as variáveis CSS sob o atributo data-theme em runtime, adaptando-se instantaneamente a temas escuros, claros ou de alto contraste para acessibilidade.