HTML em sistemas de design

Um sistema de projeto é uma biblioteca compartilhada de componentes, tokens, padrões e diretrizes usada nos produtos de uma organização. A parte de HTML do sistema encapsula convenções de marcação para que cada produto renderize estruturas consistentes de botões, janelas modais, formulários e cartões.

Tokens são valores atômicos de projeto (cor: blue-500, espaçamento: 16px). Componentes são unidades reutilizáveis de HTML+CSS+JS (Botão, janela modal, TextField). Padrões são composições de nível mais alto (formulário de login, cartão de conteúdo com avatar). A estrutura HTML é fixa no nível do componente; os padrões combinam componentes.

Os componentes incorporam boas práticas: todo Botão usa o elemento <button> (não uma div) com o atributo type correto. Toda janela modal mantém o foco dentro dela, oferece suporte à tecla Escape e tem as funções ARIA corretas. Adotar componentes evita reimplementar a acessibilidade para cada funcionalidade do produto.

O Storybook renderiza cada componente isoladamente com várias propriedades e variações. Profissionais de interface e gerentes de produto veem os componentes disponíveis sem ler código; desenvolvedores veem exemplos de uso sem procurar no código-fonte. Ele é o padrão consagrado para a documentação de sistemas de projeto.

Trate o sistema de projeto como um pacote publicado com versionamento semântico. Alterações incompatíveis de HTML/CSS (renomear uma classe CSS da qual os consumidores dependem, remover uma área de inserção de um componente) aumentam a versão principal. Os consumidores atualizam intencionalmente conforme o próprio cronograma, e não por surpresa.

As propriedades, áreas de inserção e partes expostas dos componentes formam a interface pública. Depois de disponibilizá-las aos consumidores, trate-as como caras de modificar. Descontinue-as gradualmente: adicione a nova interface ao lado da antiga, registre avisos para o uso antigo e remova-a somente após um período avaliado.

Os tokens permitem a tematização: troque o mapa de tokens de cores, e todos os componentes adotarão a nova paleta. A personalização de marca (marcas diferentes compartilhando componentes com visuais diferentes) se torna trivial quando os tokens controlam tudo e os componentes fazem referência a tokens em vez de valores codificados diretamente.

Para organizações que usam várias estruturas (React, Vue, Angular), os componentes web oferecem uma implementação que funciona em qualquer lugar. Crie com Lit, FAST ou JavaScript puro; use-os da mesma forma em qualquer estrutura. A estrutura HTML é o contrato, não a estrutura de desenvolvimento.

Os sistemas de projeto incorporam a acessibilidade uma única vez em cada componente: interação pelo teclado, funções ARIA, gerenciamento do foco e contraste de cores. As equipes de produto que adotam o sistema herdam a acessibilidade em vez de criar cada funcionalidade do zero — isso reduz de forma mensurável os erros de acessibilidade em toda a empresa.

Acompanhe quais produtos usam qual versão do sistema de projeto. Ferramentas como o catálogo de componentes do Backstage, bots personalizados do Slack que monitoram package.json ou simples painéis internos revelam onde a versão mais recente ainda não foi adotada. As métricas de adoção justificam a continuidade do investimento.

Decida quem pode adicionar componentes: somente uma equipe central de sistemas de projeto? Contribuições federadas das equipes de produto? Cada modelo tem suas vantagens e desvantagens. As equipes centrais lançam mais lentamente, mas mantêm a qualidade; as equipes federadas avançam rápido, mas correm o risco de fragmentação. Escolha conscientemente com base no porte da organização.

Os sistemas de projeto são produtos vivos. Adicione componentes à medida que novos padrões surgirem nos produtos, descontinue componentes que já não se encaixarem e refatore quando decisões fundamentais precisarem mudar. Trate o sistema como software com um roteiro, não como um artefato concluído.

Por que os tokens de projeto (como cor: blue-500, espaçamento: 16px) são preferidos a valores codificados diretamente nos componentes?

Os sistemas de projeto reúnem tokens (valores atômicos), componentes (unidades HTML reutilizáveis) e padrões (composições de nível mais alto) em uma biblioteca versionada compartilhada entre os produtos. Use o Storybook para documentação, componentes web para uso entre estruturas e versionamento semântico para estabilidade. Incorpore a acessibilidade em cada componente, acompanhe a adoção e evolua o sistema como um produto vivo.