pular para o conteúdo
identidade de marca · casa hacker

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

três formas, um sistema.

// á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
Equivalência entre os tokens de marca e os papéis semânticos
token de marca (oficial)equivalente semânticoobservação
hacker-greenprimary-container (#32FA96) · inverse-primary (#00E384)primary (#006D3C) é a versão AA para texto
electric-violetsecondary-container aproximado (#C18EFE)secondary (#7645B0) é a versão AA para texto
brand-bluetertiary-container aproximado (#BFDFFF)tertiary (#3C6282) é a versão AA para texto
deep-obsidianon-background · on-surfacemesmo 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)
  • Incidência Políticasignal-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.

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 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.

ABRIR_O_DESIGN_SYSTEM ↗REPOSITÓRIO ↗