Sistema Visual · v0.1
COBOGÓ
Modernismo brasileiro traduzido em interface.
HTML semântico. Sem classes. Sem carnavalizar.
Padrões
Quatro cobogós tileáveis — a linguagem visual do sistema.
O que é COBOGÓ
Cada letra é um princípio de design para interfaces públicas brasileiras.
- C Cívico
- Design orientado ao interesse e serviço público.
- O Organizado
- Informação estruturada com hierarquia editorial forte.
- B Brasileiro
- Referências locais com sofisticação contemporânea, sem caricatura.
- O Objetivo
- Clareza em primeiro lugar; ornamento apenas com função.
- G Geométrico
- Grids, blocos e padrões que constroem interfaces sólidas.
- Ó Ótimo
- Performance, acessibilidade e modularidade para o software moderno.
"COBOGÓ não é nostalgia modernista. É uma gramática visual para software brasileiro contemporâneo. Usa cor sem carnavalizar, geometria sem endurecer, ornamento sem ruído, e serviço público sem cara de repartição."
Componentes
HTML semântico. Classes proibidas. Variantes via data-intent.
Estados
Info Sucesso Atenção Erro Neutro
Alertas
Info Painel cívico publicado.
Sucesso Compra pública indexada.
Atenção Dado parcial — fonte em revisão.
Erro Falha ao carregar série temporal.
Formulário
Tabela
| Órgão | Contrato | Valor | Status |
|---|---|---|---|
| Saúde | Insumos UBS | R$ 1.240.000 | Ativo |
| Educação | Merenda escolar | R$ 980.500 | Em análise |
| Transporte | Sinalização viária | R$ 432.100 | Suspenso |
Tipografia & Cor
Tokens definidos uma vez. Mapeados em --pico-*. Nunca codificados.
Aa
Modernismo
brasileiro
traduzido em interface
Lede em Archivo: a tipografia carrega o ritmo cívico do sistema.
Corpo em Piazzolla, com serifa para densidade documental.
Micro · kicker · rótulo · sistema
- Papel
-
#FBF8F1
- Areia
-
#EDE7D8
- Mudo
-
#6B6455
- Carvão
-
#1A1814
- Azul
-
#1B2B4B
- Vermelho
-
#C8472E
- Ocre
-
#D9A441
- Verde
-
#2E6B4A
Pronto para começar?
Instale o pacote, importe os estilos e use HTML semântico.
npm install cobogo