Do brief aos tokens: a consistência visual como contrato determinístico.
Como transformamos a identidade da marca em variáveis invioláveis, eliminamos a dívida de design e garantimos contraste WCAG 2.2 AA medido em tempo de compilação.
O Problema: A Inconsistência Reincidente
Em equipes sem um time dedicado de design em cada squad, cada novo frontend ou tela é uma oportunidade para reinventar o estilo. Variáveis de cores são criadas com nomes arbitrários, classes hexadecimais soltas surgem no markup, botões apresentam paddings divergentes e contrastes de texto quebram os requisitos mínimos de acessibilidade.
No ecossistema de 8 engines da FGSS, esse cenário gerava retrabalho crônico: ao revisar telas, surgiam gradientes não-autorizados, fundos fora do tom de preto canônico e telas mobile com rolagem horizontal. O objetivo deste projeto foi encerrar a subjetividade visual criando uma fundação técnica inviolável.
Tokens Canônicos: O Contrato Visual
A base de todo o sistema foi extraída diretamente do FGSS Brand Book v2. Em vez de permitir escolhas ad-hoc, seis cores centrais foram convertidas em propriedades customizadas globais:
• --fgss-ink: #050505 (Fundo principal ultra-profundo)
• --fgss-surface: #0A0A0A (Superfícies de cards e containers)
• --fgss-bone: #F8F7F2 (Texto de leitura e títulos de alto contraste)
• --fgss-acao: #FF5F1F (Laranja exclusivo de ação, CTAs e estados de foco)
• --fgss-evidencia: #B8FF4D (Verde-limão para confirmação e métricas auditadas)
• --fgss-sol: #FF8A0A (Âmbar para alertas e destaques secundários)
A tipografia foi rigorosamente fixada em duas famílias: Space Grotesk para display e leitura longa, e Space Mono para números, metadados, código e o glifo institucional da marca. Nenhuma outra fonte é permitida nos pacotes gerados.
Guard Determinístico: Fim do Hexadecimal Solto
Uma lei de design só tem eficácia se for verificável por código. O Design System Engine inclui um guard estático (tools/check_consistency.js) executado em pipelines de integração.
O guard analisa os arquivos CSS e JSX em busca de qualquer valor hexadecimal direto, referências circulares ou aliases não resolvidos. Além disso, o guard calcula matematicamente a luminância relativa real dos pares de cores para garantir conformidade com WCAG 2.2 AA.
Execução de test_check_consistency.js: 21/21 verificações passando com exit code 0. O algoritmo computa contraste exato (ex.: bone/ink = 19.00:1; ação/bone = 2.83:1, que reprova automaticamente para texto normal de leitura).
Empacotamento Verificável: SHA-256 por Arquivo
Para que outras engines e aplicações consumam os tokens sem dependência direta de repositórios externos ou monorepos pesados, a ferramenta inclui o gerador package_tokens.js.
O gerador cria um pacote autocontido com tokens.css, tokens.json, documentação e um arquivo manifest.json contendo o hash criptográfico SHA-256 de cada elemento e do pacote total. Qualquer alteração de um único byte modifica o checksum, garantindo rastreabilidade e idempotência.
Execução de test_package_tokens.js: 10/10 verificações com validação de import em consumidor limpo. Mesmo input gera exatamente o mesmo hash criptográfico em qualquer máquina.
Evidências Reais & Limites Honestos
Seguindo as leis de honestidade da FGSS, toda capacidade declarada é acompanhada de sua prova concreta e dos seus limites operacionais:
1. Inspector WCAG com cálculo vivo: razão de contraste calculada dinamicamente via luminância relativa real (19.00:1 bone/ink, 16.94:1 evidência/ink).
2. 31 verificações de testes de núcleo: 21 verificações de guard + 10 de empacotamento determinístico.
3. Piloto visual aprovado: artefato gerado via Open Design e validado contra os critérios do Gestor de Webdesign.
• Não substitui Figma completo: O pacote exporta tokens e regras para código CSS/JSON; não cria arquivos vetoriais proprietários nem substitui a prototipagem de fluxos complexos.
• Decisões de marca requerem discernimento: A ferramenta valida proporções e contrastes técnicos, mas o posicionamento de marca e direção de arte continuam sendo prerrogativa humana.
• Escopo circunscrito ao Design System: A aprovação deste piloto comprova o percurso e a arquitetura estática, mas não atesta o funcionamento de integrações externas ainda pendentes em outras engines.
Deseja conhecer a entrega do Design System?
Acesse a landing page do produto para conferir os pilares práticos de uso e os requisitos de implementação.