// horizontal
navegação, headers, papelaria A4
mín. 130 px digital · 5 cm impresso
↓ horizontal-dark.svg↓ horizontal-light.svg↓ horizontal-code.svg
design · system.
Esta página é a referência canônica da marca Casa Hacker: logotipo, símbolo, cores, tipografia, submarcas e regras de uso. A documentação de componentes — HTML, CSS e padrões prontos — é canônica no design system completo.
01 logotipo
quatro formas, um sistema
// vertical
cards quadrados, redes sociais
mín. 75 px digital · 4,5 cm impresso
// símbolo H
símbolo da marca: watermark, app icon da marca, usos < 24 px
mín. 15 px digital · 1 cm impresso
// «//» Estaiado
contextos técnicos: favicon das plataformas (Cockpit, MCP do Cockpit, casahacker.org, MCP de Administração) e ícone de app/PWA das ferramentas. Não substitui o símbolo H.
mín. 16 px digital · arquivos em 16, 32, 48 e 180 px
// área de respiro
Mantenha pelo menos 1× a altura do H de espaço livre em volta do logotipo. Nenhum elemento — texto, imagem ou borda — invade essa zona. Em reduções abaixo do tamanho mínimo, use apenas o símbolo H.
02 cores
o vocabulário oficial é o de marca
Código novo usa os nomes de marca abaixo. Os papéis semânticos (primary, secondary, surface-*) continuam existindo em global.css — a tabela de equivalência está logo abaixo das amostras.
- hacker-green#32FA96ação, destaque, energia
- electric-violet#AA78E6acento editorial
- brand-blue#B3D9FEsuperfícies de apoio, duotone
- deep-obsidian#1A1C1Atexto, contorno, fundo escuro
- clean-white#F8FCF8texto sobre fundo escuro
- muted-stroke#D1D5D1divisores discretos
| token de marca (oficial) | equivalente semântico | observação |
|---|---|---|
| hacker-green | primary-container (#32FA96) · inverse-primary (#00E384) | primary (#006D3C) é a versão AA para texto |
| electric-violet | secondary-container ≈ (#C18EFE) | secondary (#7645B0) é a versão AA para texto |
| brand-blue | tertiary-container ≈ (#BFDFFF) | tertiary (#3C6282) é a versão AA para texto |
| deep-obsidian | on-background · on-surface | mesmo valor (#1A1C1A) |
| clean-white | ≈ surface (#FAF9F6) / surface-container-lowest (#FFFFFF) | superfícies usam a rampa surface-* |
| muted-stroke | ≈ outline-variant (#BACBBB) | contornos de baixo relevo |
cores por área de atuação
Camada nova sobre o design system, que define cor por submarca (programa). Nas superfícies por área — os quatro cartões da home, os marcadores de menu — vale a regra: a área manda na cor do cartão; a submarca manda na cor do chip da iniciativa dentro dele. Sempre com o par de texto indicado (contraste AA).
- educação STEAMbrand-blue · #B3D9FEtexto #0E3A6B (on-brand-blue)
- inovação socialelectric-violet · #AA78E6texto deep-obsidian
- inclusão digitalsoft-green · #E1FFDEtexto #0F5A33 (on-soft-green)
- políticas públicassignal-yellow · #E8D048texto #3B443C (on-signal-yellow)
03 tipografia
duas vozes
// leitura corrida
IBM Plex Sans
Títulos, parágrafos e tudo que se lê de fato. Pesos 400, 600 e 700, com escala fluida (clamp) nos displays e headlines. Auto-hospedada — nenhuma fonte sai de CDN.
// voz de sistema
IBM Plex Mono
Rótulos, chips, metadados, navegação e microcopy em caixa alta com tracking largo. É a voz "de terminal" da identidade — nunca é usada para leitura corrida.
04 submarcas
uma família, seis assinaturas
PerifaImpacto↓ svgdiretrizes ↗
Minas em Tech↓ svgdiretrizes ↗
Inclusão Tech↓ svgdiretrizes ↗
Hackerclubes↓ svgdiretrizes ↗
Internet Segura↓ svgdiretrizes ↗
Mão na Massa↓ svgdiretrizes ↗
05 uso de marca
três regras
A Casa Hacker detém as marcas "Casa Hacker", "PerifaImpacto", "Minas em Tech", "Inclusão Tech" e "Hackerclubes" — para que as pessoas saibam distinguir entre projetos oficiais e projetos independentes que usam nossas tecnologias, infraestrutura, espaço, investimento ou qualquer outro tipo de apoio.
1 · uso livre
Mencionar a Casa Hacker em textos e apresentações, linkar para nossos sites, dizer que usou nosso espaço, explicar que sua iniciativa usa uma tecnologia nossa.
2 · uso com acordo
Projetos apoiados formalmente podem usar "Apoiado pela Casa Hacker" e o selo "Iniciativa Apoiada/Acelerada" — mantendo identidade visual própria e a natureza da relação nítida.
3 · uso proibido
Usar nossas marcas em nome de produto, empresa ou domínio; vender produtos com as marcas; sugerir parceria inexistente; modificar ou combinar o logotipo.
06 peças de campanha
a arte pronta para a gráfica.
A campanha Outros Futuros 2026 é a primeira peça física derivada do design system: uma estampa e seis cartazes, cada um em SVG e PDF. Os PDFs são vetoriais no tamanho físico real — a estampa abre em 280 × 370 mm, os cartazes em A3 — e a tipografia já vai em curvas: nenhum arquivo pede IBM Plex por nome, então não há fonte para a gráfica substituir. A fonte canônica é o repositório casahacker/tshirt-outros-futuros-2026, cuja integração contínua recusa cor fora da paleta e traço abaixo do piso de 0,8 mm da serigrafia.
estampaA arte da camiseta: painel de ficha técnica com uma esponja de Menger. Frente, centro do peito.estampa-oco · 28 × 37 cmSVG ↗PDF ↗
manifesto.diffO manifesto apresentado como patch: o que a casa tira e o que põe no lugar, em linhas de diff.cartaz-diff · A3 · 297 × 420 mmSVG ↗PDF ↗
começo«As periferias não são um lugar de espera, são um lugar de começo.»cartaz-comeco · A3 · 297 × 420 mmSVG ↗PDF ↗
virada«A virada não vem de fora, vem da própria periferia quando tem acesso a oportunidade, ferramentas, conexões e respeito.»cartaz-virada · A3 · 297 × 420 mmSVG ↗PDF ↗
direito«Tratar tecnologia como direito e como linguagem de poder, e não como privilégio de poucos.»cartaz-direito · A3 · 297 × 420 mmSVG ↗PDF ↗
centro«Tirar a periferia do rodapé da conversa e colocá-la como autora principal das respostas para os desafios do nosso tempo.»cartaz-centro · A3 · 297 × 420 mmSVG ↗PDF ↗
mudança«A mudança que buscamos não é um projeto rápido, é uma construção diária de vínculos, confiança e autonomia.»cartaz-mudanca · A3 · 297 × 420 mmSVG ↗PDF ↗
// mockupFrente e verso da camiseta, para visualização. É peça de tela e não vai à gráfica — para imprimir, use a estampa acima.As peças estão sob CC BY-NC-ND 4.0 ↗: baixe, imprima e distribua a peça inteira e sem alterações, citando a Casa Hacker, para fins não comerciais. O uso das marcas continua regido pelas três regras acima.
07 design system completo
componentes moram no repositório
O repositório casahacker/design-system é a fonte canônica de componentes, padrões, dataviz e impressos — HTML + CSS sem build, aberto para contribuição.