Relatório técnico
raio-x do design system lions
diagnóstico de conformidade cromática, tipográfica e de componentes — antes da publicação em claude design
sumário executivo
a lions tem um design system escrito com qualidade de empresa grande e aplicado com aderência de zero. essa é a frase inteira do diagnóstico.
a doutrina cromática — o padrão 360 v2.0, publicado ontem, 25 de julho — é exemplar: quatro cores de marca com justificativa declarada, rampas completas de 50 a 900, aliases semânticos, contraste wcag medido por par de cores, tabela de-para da paleta aposentada, preset tailwind e json legível por máquina. isso é material de design system maduro, não de operação solo.
o problema é a distância entre o documento e o código. em 10.173 declarações de cor encontradas nos sete projetos auditados, apenas 402 usam uma cor que existe no sistema — 3,95%. de sete projetos, um único importa os tokens. a paleta v1, aposentada há vinte e quatro horas, ainda aparece 233 vezes em código vivo. e a fonte de display mais usada no ecossistema não é a poppins oficial: é a space grotesk, com quase quatro vezes mais ocorrências.
achado crítico de governança: o próprio CLAUDE.md do workspace e a skill kael-lions-documentos ainda instruem qualquer ia a usar navy/gold/teal — a paleta que a 360 v2.0 declarou proibida. ou seja: a fábrica de documentos da lions está programada para produzir peças fora da marca. toda proposta gerada hoje sai dourada.
placar
score = média simples das seis dimensões. a nota é baixa por adoção, não por qualidade do sistema — e essa é uma boa notícia: adoção se corrige com script, qualidade de sistema não.
metodologia
varredura direta no workspace 01_Dev_Rodrigo_Google_Appe, em sete projetos com propriedade digital viva: site-lionsintelligence, RAIOXJURIDICO, dossie-minerva-foods, prime-diagnostico, crm-lions, lions-hub e Spectrum-X-byLionsIntelligence. arquivos considerados: html, css, js, jsx, ts, tsx e svg, excluídos node_modules, dist e build. a lista de cores oficiais usada como gabarito é a rampa completa do tokens-lions.json v2.0, mais branco e preto puros.
achado 1 — cobertura de tokens
| projeto | declarações de cor | dentro do sistema | conformidade | importa tokens |
|---|---|---|---|---|
| site-lionsintelligence | 604 | 111 | 18,4% | sim |
| crm-lions | 1.220 | 70 | 5,7% | não |
| RAIOXJURIDICO | 344 | 19 | 5,5% | não |
| lions-hub | 223 | 8 | 3,6% | não |
| Spectrum-X | 7.639 | 192 | 2,5% | não |
| prime-diagnostico | 94 | 2 | 2,1% | não |
| dossie-minerva-foods | 49 | 0 | 0,0% | não |
| total | 10.173 | 402 | 3,95% | 1 de 7 |
o spectrum-x concentra 75% de todas as declarações de cor do ecossistema e tem 851 hexadecimais distintos — mais de vinte vezes o tamanho da paleta oficial. é o projeto mais ambicioso da casa e o mais distante da marca.
o dossie-minerva-foods merece atenção imediata pelo calendário: zero conformidade, e há reunião com a minerva marcada para amanhã, 27 de julho.
achado 2 — as cores que não são da lions
doze hexadecimais mais frequentes entre os que estão fora do sistema:
| cor | ocorrências | diagnóstico |
|---|---|---|
| #f5b800 | 232 | amarelo quase-oficial — o token é #F5C518. diferença invisível a olho nu, fatal para consistência |
| #8f9bb8 | 187 | cinza-azulado sem token equivalente |
| #00e5ff | 181 | ciano — proibido explicitamente pela 360 |
| #ef4444 | 179 | vermelho tailwind concorrendo com o danger #DC2626 |
| #b11e2a | 171 | vinho — segundo vermelho não previsto |
| #ffc107 | 170 | amarelo bootstrap — terceiro amarelo do ecossistema |
| #c9a961 | 162 | gold spectrum-x — aposentado em 25.07.2026 |
| #c5a059 | 158 | quarta variante de dourado |
| #0b1f3a | 153 | navy alternativo — não é #1A2638 |
| #fff3cd | 151 | fundo de alerta bootstrap |
| #1a3a5c | 151 | quinto azul escuro do ecossistema |
| #9b4dff | 140 | roxo — não existe roxo na lions |
leitura estratégica: três amarelos, cinco azuis escuros, quatro dourados e um roxo convivendo. isso não é variedade — é o custo de cada peça ter nascido sem gabarito. cada tela nova gasta tempo escolhendo cor de novo, e o cliente percebe como falta de acabamento antes de perceber como falta de padrão.
achado 3 — a paleta v1 ainda está viva
a 360 v2.0 aposentou navy/gold/teal em 25.07.2026. vinte e quatro horas depois, os hexadecimais da lista de-para ainda aparecem 233 vezes em código vivo:
| projeto | ocorrências da paleta aposentada |
|---|---|
| Spectrum-X | 161 |
| site-lionsintelligence | 49 |
| RAIOXJURIDICO | 11 |
| prime-diagnostico | 6 |
| dossie-minerva-foods · crm-lions · lions-hub | 2 cada |
o site institucional é o caso mais urgente: é a vitrine, é o único projeto que já importa os tokens, e ainda assim carrega 49 resíduos da paleta velha. quem chega pelo lionsintelligence.com.br vê as duas identidades ao mesmo tempo.
achado 4 — tipografia
| família | ocorrências | situação |
|---|---|---|
| JetBrains Mono | 1.167 | oficial (mono) |
| Space Grotesk | 301 | fora do sistema |
| Cormorant Garamond | 289 | fora do sistema — serifa, proibida pela 360 |
| Inter | 176 | oficial (corpo) |
| Orbitron | 100 | fora do sistema |
| Playfair Display | 88 | fora do sistema — serifa |
| Poppins | 85 | oficial (display) |
| Arial · Verdana · Courier New | 70 | fallback de sistema, sem intenção de design |
37,3% das declarações de fonte estão fora do sistema. e o dado que mais dói: a poppins, fonte oficial de display, aparece 85 vezes — enquanto a space grotesk, que não é fonte da lions, aparece 301. na prática, a tipografia de título da lions hoje é a space grotesk.
a cormorant garamond (289 ocorrências) e a playfair (88) são herança do padrão editorial dos dossiês. a 360 v2.0 encerrou a exceção de marca em 25.07 — o spectrum-x passou a vestir poppins. essa migração ainda não aconteceu em código.
achado 5 — componentes
não existe biblioteca. existem redefinições. cada arquivo que precisa de um botão desenha um botão:
| componente | arquivos que o redefinem do zero | leitura |
|---|---|---|
| hero | 56 | 56 versões da primeira impressão da marca |
| card | 45 | o componente mais usado, zero canônico |
| botão | 34 | o .btn-primary já existe nos tokens e é ignorado |
| badge | 32 | — |
| kpi | 30 | núcleo de todo dashboard e dossiê |
| footer | 20 | onde vai a assinatura da marca |
| tab · modal · header | 18 | — |
| tabela | 2 | lacuna — produto de dados sem componente de tabela |
| input | 1 | lacuna crítica — não há sistema de formulário |
| toast / feedback | 0 | lacuna crítica — nenhum padrão de erro, carregamento ou confirmação |
a lacuna de formulário e de feedback é a mais cara. a lions vende produto de dados — raio-x jurídico, spectrum-x, crm — e produto de dados é feito de entrada de dado e resposta ao dado. sem input padronizado e sem estado de erro/carregamento, cada tela improvisa a hora em que o cliente mais julga o sistema: quando ele digita algo e espera resposta.
ações prioritárias
corrigir as instruções antes de corrigir o código
atualizar o CLAUDE.md (§ identidade visual) e a skill kael-lions-documentos para a paleta v2.0. enquanto não fizer isso, toda ia da casa continua gerando peça dourada — e o volume de código fora do padrão cresce mais rápido do que a migração corrige.
esforço: 30 minutos · impacto: estanca a fonte do problemarepintar o dossiê minerva antes da reunião de 27.07
zero conformidade, 49 declarações de cor, apresentação amanhã. é o menor esforço de migração da lista e o de maior exposição comercial.
esforço: 1 hora · impacto: a peça que vai à mesa da minerva veste a marcaconstruir a biblioteca canônica e sincronizar com o claude design
uma pasta lions-design-system/ com os tokens v2.0 mais doze componentes documentados — botão, card, input, select, badge, kpi, tabela, header, footer, hero, modal e toast — cada um com variantes, estados, acessibilidade e preview. essa pasta, e só ela, é o alvo do /design-sync.
esforço: 1 a 2 dias · impacto: toda entrega futura nasce padronizada, em qualquer iao caminho até a nuvem
a publicação em claude design não é o primeiro passo — é o terceiro. sincronizar o estado atual publicaria a bagunça em alta resolução e ainda a distribuiria para toda a organização.
# 1. estancar — instruções na paleta v2.0 CLAUDE.md · kael-lions-documentos · demais skills visuais # 2. construir — a pasta canônica lions-design-system/ tokens/ # css · json · preset tailwind (já existem, só mudam de casa) componentes/ # 12 peças em html standalone, com preview e doc README.md # 3. publicar — claude code no mac, apontando só para a pasta limpa cd lions-design-system claude /design-login # uma única vez /design-sync
observação técnica: o /design-sync exige terminal interativo. esta sessão roda na nuvem e não tem autorização de design-system — a etapa 3 é obrigatoriamente executada por você, no seu mac. as etapas 1 e 2 podem ser feitas daqui.
o que isso destrava comercialmente
a lions tem oito linhas de produto e faturamento zero. o gargalo declarado é monetização, e design system parece assunto de estética — não é. é assunto de custo marginal de entrega.
hoje, cada one-pager, cada dashboard e cada dossiê é artesanato: escolhe-se cor, redesenha-se botão, reinventa-se card. quarenta e cinco cards diferentes é o retrato exato disso. com biblioteca canônica publicada, a linha 5 do ecossistema — one-pagers e sites para clientes — deixa de ser hora vendida e vira entrega replicável em minutos, com margem de produto e não de serviço. e a linha 7, plugins e skills vendidos como produto, ganha o ativo que faltava: um design system proprietário é exatamente o tipo de coisa que se licencia.
a crítica construtiva, direta: a 360 v2.0 foi escrita ontem com rigor de manual de marca de multinacional, e vinte e quatro horas depois nenhum código a obedece. sistema que não é aplicado não é sistema — é intenção documentada. o trabalho difícil, que é decidir, você já fez. falta o trabalho mecânico, que é propagar, e esse dá para automatizar.
riscos
- migração em massa do #0f172a: a própria 360 alerta — esse hexadecimal também é o slate-900 do tailwind em projetos não-lions. substituição automática quebra layout de terceiros. tratar arquivo por arquivo.
- documentos já enviados: propostas e contratos assinados são registro histórico e não se repintam. a migração vale só para propriedade digital viva.
- assets de terceiros: prime-P.png e cores de marca de cliente entram como acento sobre arquitetura lions — não são desvio de padrão.
- atendeai,oh!: a própria 360 marca a marca como pendente — brand book e logos ainda em verde. decidir antes de sincronizar, ou ela entra no sistema como exceção não resolvida.
anexo — números brutos
| indicador | valor |
|---|---|
| projetos auditados | 7 |
| declarações de cor encontradas | 10.173 |
| declarações dentro do sistema | 402 (3,95%) |
| hexadecimais distintos só no spectrum-x | 851 |
| ocorrências da paleta v1 aposentada | 233 |
| projetos que importam os tokens | 1 de 7 |
| declarações de fonte fora do sistema | 848 (37,3%) |
| arquivos que redefinem card do zero | 45 |
| arquivos que redefinem hero do zero | 56 |
| componentes de formulário padronizados | 0 |
| tokens de cor definidos na v2.0 | 38 + semânticos |
varredura executada em 26.07.2026 sobre o workspace 01_Dev_Rodrigo_Google_Appe. contagens obtidas por expressão regular sobre arquivos html, css, js, jsx, ts, tsx e svg, excluídos node_modules, dist e build. gabarito de conformidade: rampa completa do tokens-lions.json v2.0, mais branco e preto puros.