Aplicações
Sistemas do CIC rodando com o design system aplicado. Não são protótipos: é o código que está de pé, com a camada de tokens por cima.
Event Manager
Gestão de eventos e reservas de sala do CIC.
O que o design system mudou
- Seis níveis de cinza colapsados nos três do CIC — base, surface e overlay.
- Botão de ação deixou de ser bloco roxo e virou bloco de contraste máximo.
- Aba ativa marcada por peso e barra branca, não por sublinhado roxo.
- Chips de status com o tint marcando a categoria e o label em texto legível.
- Raios de 8px zerados; sobrou 2px em chip e pill, e círculo onde a forma informa.
- Space Grotesk trocada pela pilha do CIC, com Chivo nos valores numéricos.
Como foi aplicado
O arquivo original não foi reescrito. Ele recebeu uma camada de tokens e overrides em CSS, e as 727 linhas de JavaScript seguem byte a byte idênticas — o que demonstra o que o design system faz por um sistema que já existe, não por um app novo.
1930linhas originais
727linhas de JS intactas
319linhas de camada
Um ganho que não é estético
A aplicação usava dois níveis de cinza para texto de apoio que não passam o mínimo de contraste exigido pelo princípio 05. Somados, são 71 ocorrências de texto ilegível — datas, contagens, rótulos de campo.
| Classe original | Valor | Usos | Contraste |
|---|---|---|---|
| text-gray-500 | #6B7280 | 35 | 4.34:1 |
| text-gray-600 | #4B5563 | 36 | 2.78:1 |
O mínimo para texto normal é 4.5:1. Os valores acima estão medidos sobre preto puro, o fundo mais generoso do app — sobre os painéis eles caem mais ainda. Ao aplicar o design system os dois viraram --color-text-secondary, que dá de 5.04:1 a 6.82:1 conforme a superfície. Não foi decisão de gosto — foi a regra do sistema sendo cumprida.
Duas frentes, e a segunda engana
Reaproveitar um app existente não é só remapear as classes do Tailwind. Depois de cobrir todas elas, a aplicação ainda tinha laranja e vermelho nos ícones e três cinzas de texto abaixo do mínimo — porque cor também chega por caminhos que não são classe.
- Classes utilitárias — o caminho óbvio, e o único que uma busca por `text-gray-` encontra.
- CSS próprio do app: `.tab-btn`, `th`, `.fb-card` definem cor direto, com especificidade que override de utility não alcança.
- Atributo `stroke` nos SVG, que não aparece nem em `color` nem em `background-color` — foi o último vazamento a cair.
- `style` inline gerado em runtime pelo JavaScript, alcançado por seletor de atributo para não precisar tocar no JS.
- O preflight do Tailwind, que põe `border-color` de tema claro em todo elemento via `*`.