Sistema de design

O que existe de fato e o que está só no documento

A maioria das descrições de um sistema de design é uma lista de artefatos: tokens, componentes, padrões, documentação. A lista é correta e um pouco enganosa, porque descreve o que você produz e não o que faz aquilo funcionar. Cada camada existe em duas versões: a que está escrita e a que algo realmente vai te impedir de quebrar.

• Tokens — valores nomeados para cor, tipografia, espaçamento e raio. Sem nada que os faça valer, viram uma paleta de onde as pessoas copiam códigos hexadecimais.
• Componentes — a implementação única de um elemento que se repete. Sem nada que os faça valer, uma pasta de exemplos ao lado de uma dúzia de variantes feitas à mão.
• Padrões — como os componentes se combinam para um trabalho recorrente, como um cabeçalho de página ou um estado vazio. Sem nada que os faça valer, cada página resolve o mesmo problema de um jeito diferente.
• Documentação — o raciocínio, e os casos em que uma regra deliberadamente não se aplica. Sem nada que a faça valer, um site que ninguém abre depois da primeira semana.

A distinção morde mais forte em times pequenos, onde o sistema costuma ser a memória de uma pessoa. Memória não falha fazendo barulho. Ela falha como deriva — o mesmo título em cinco tamanhos, o mesmo botão em três pesos — e cada caso isolado parece defensável por si só.

A falha que ninguém pega: uma regra inerte

Aqui vai uma do nosso próprio produto, e é a razão de esta entrada existir. Nossa tipografia de display vem com exatamente um peso. Uma regra global colocava todos os títulos no peso 500, e ela não fazia nada, porque a correspondência de pesos do CSS resolve um pedido de 500 de volta para o único peso que a fonte realmente tem. A declaração estava lá, era plausível e era inerte. O que a tornou cara foi a gambiarra: cerca de 180 dos 223 lugares que usavam aquela tipografia tinham passado a escrever à mão um peso 400 para consertar uma declaração que nunca tinha surtido efeito, e a mesma superfície tinha derivado para 44 tamanhos de fonte distintos.

Nada disso é visível para um verificador de tipos, porque cada uma dessas variantes é um objeto de estilo válido. Também mal aparece na revisão: cada diff é uma linha, e cada linha é defensável. O conserto foi estrutural e não cosmético — um componente virou o único lugar onde o tamanho do título de uma página pode ser escrito, e agora um teste quebra o build quando uma página faz o seu à mão. Esse teste é o sistema de design. Os tokens sempre foram apenas uma descrição dele.

O que um time pequeno realmente precisa

• Comece pela repetição, não por um template. As primitivas que valem ser nomeadas são as que você já redigitou três vezes. O resto é estoque que você vai manter e nunca usar.
• Ponha a regra onde ela é aplicada, não onde ela é lida. Um componente compartilhado, uma regra de lint ou um teste que falha valem mais que uma página de wiki, porque só uma dessas coisas sobrevive a uma sexta-feira corrida.
• Julgue mudanças em composição, nunca isoladas. Um peso ou um tamanho parece certo sozinho e fica errado ao lado de um selo, de um cabeçalho de tabela e de um trecho de texto em negrito. Renderize a tela real com todos eles juntos.
• Fique atento a declarações que não podem fazer nada. Um token apontando para algo que a sua fonte, o seu framework ou a sua política de segurança de conteúdo não conseguem honrar é pior que um token ausente, porque se lê como resolvido.
• Deixe o sistema parar na borda do seu produto. Páginas de marketing e interface de produto muitas vezes querem tipografias diferentes; restringir uma exceção a uma das duas é uma decisão, e virar o padrão global sem querer não é.

Se é uma IA que escreve as suas interfaces, isso importa mais e não menos: um modelo puxa para a mediana a não ser que algo o estreite, que é exatamente a lacuna que pacotes de regras de design como o UI UX Pro Max tentam fechar. Consistência é também o tipo mais barato de credibilidade nas páginas em que alguém está decidindo — a mesma razão pela qual Core Web Vitals e o trabalho de conversão costumam chegar no mesmo mês.