COBOGÓ

Um sistema visual brasileiro, escrito em HTML semântico sobre Pico CSS.

Padrões

Quatro cobogós tileáveis. Renderizados em SVG, controlados por size, color, density.

CircularA curva. Niemeyer.
HexagonalA colmeia. Bulcão.
LosangoA calçada. Burle Marx.
CruzA grelha. Costa.

Tokens

Definidos uma vez, mapeados em --pico-*. Componentes nunca leem cor crua.

Cor

--papel-00
#FBF8F1
--papel-20
#EDE7D8
--concreto-60
#6B6455
--concreto-90
#1A1814
--azul
#1B2B4B
--vermelho
#C8472E
--ocre
#D9A441
--verde
#2E6B4A

Tipografia

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 · micro

Raio & Sombra

--r-1 · --shadow-1
--r-soft · --shadow-2
--r-pill

Componentes

HTML semântico, classes proibidas. Variantes via data-intent.

Botões

Badges

Info Sucesso Atenção Erro Neutro

Alertas

Formulário

Período

Tabela

ÓrgãoContratoValorStatus
SaúdeInsumos UBSR$ 1.240.000Ativo
EducaçãoMerenda escolarR$ 980.500Em análise
TransporteSinalização viáriaR$ 432.100Suspenso