Um design system que começou pela acessibilidade

Contexto

Somos um time pequeno de UX num órgão do governo federal, e cada designer cuida de vários projetos ao mesmo tempo. Tem sistema legado, sistema em desenvolvimento e sistema ainda em planejamento, muitos deles integrados entre si. Somando tudo, são dezenas.

O problema

Por mais que a gente alinhasse o visual, cada sistema puxava para um lado. Uns eram legados, outros usavam linguagens e estilos de desenvolvimento diferentes, e cada PO ou cliente tinha seus pedidos. O resultado era um conjunto de sistemas parecidos por fora e diferentes por dentro.

A acessibilidade deixou isso evidente. Eu estava à frente da acessibilidade de um dos principais sistemas do órgão, e não fazia sentido deixar só ele acessível enquanto os outros continuavam como estavam. As cores também tinham virado um problema: cada sistema tinha a sua paleta, e as combinações com contraste suficiente estavam acabando.

A decisão

Em vez de corrigir sistema por sistema, juntamos forças. Com alguns desenvolvedores engajados, começamos um design system em paralelo aos projetos. Liderei a parte de UX e, como tudo tinha começado pela acessibilidade, ela virou a regra: nenhum componente entra sem passar pelos critérios.

Por que gov.br e Material UI

O Padrão Digital de Governo já estava no nosso radar. O cidadão reconhece o gov.br, e ele foi pensado para serviço público. O Material UI já era o padrão dos desenvolvedores. Juntar os dois deu ao design system uma linguagem familiar para quem usa e um caminho curto para quem implementa.

Como construímos

Tokens primeiro. Uma paleta de primitivos e, em cima dela, tokens semânticos para os temas claro e escuro, com as regras de contraste embutidas. Trocamos a variedade de cores de cada sistema por um único tom institucional, e isso resolveu boa parte do problema de contraste.

Fundamentos antes de componentes. Foco e navegação por teclado, links de salto, tipografia, espaçamento, bordas, sombras e elevação vieram antes de qualquer botão.

Componentes como peças de Lego. Seguimos a ideia de design atômico: peças pequenas se combinam em componentes maiores. O editor de texto rico, por exemplo, é montado com peças do próprio design system. Num órgão que vive de formulários, isso faz muita diferença.

IA na parte mecânica. Usei um agente de IA no Figma para o trabalho repetitivo, como criar variantes e aplicar tokens em cada uma. As decisões de design e de acessibilidade continuaram comigo. O agente só tirou da frente o que antes eu faria à mão.

Acessibilidade como processo

Criei um checklist de critérios WCAG adaptado à realidade do órgão, que vale tanto para os componentes quanto para os sistemas que os usam. No dia a dia, o axe DevTools fica aberto no navegador e o Stark confere o contraste no Figma. Junto com o design system, ficou um processo de usabilidade e acessibilidade que o time inteiro segue.

Governança

Um design system é um organismo vivo e precisa de regras para mudar sem virar bagunça. Correções pequenas entram direto. Componentes novos e mudanças grandes passam por um comitê com o PO, que acompanha o trabalho e vota. Componentes complexos podem ser customizados quando um sistema realmente precisa, com ressalvas e aprovação. E patch notes no Figma registram cada mudança.

Curadoria

Como meus projetos seriam os primeiros a usar o design system, assumi a curadoria. Ajusto os componentes, testo e trabalho junto com os desenvolvedores para que o código acompanhe o Figma.

Resultados

O design system já foi lançado e está sendo implementado nos primeiros sistemas, começando pelos meus. Como todo design system, ele continua evoluindo.

No primeiro experimento com o design system, prototipei um sistema de cerca de 200 telas em 10 dias. Antes, com folhas de estilo e componentes soltos, isso levaria bem mais tempo.

Pela primeira vez tivemos breakpoints consistentes no celular, no tablet e no desktop. O time aprendeu rápido, justamente por ser tudo padronizado, e o cliente gostou de ver um visual mais moderno e coerente entre os sistemas.

O que eu faria diferente

Não medimos quanto tempo as coisas levavam antes do design system, então hoje só consigo comparar pela experiência. Num próximo, eu registraria alguns números desde o começo: o tempo para prototipar uma tela, as idas e vindas no handoff e os problemas de acessibilidade encontrados por sistema. Assim o ganho deixaria de ser impressão e viraria um antes e depois.