// horizontal
navegación, encabezados, papelería A4
mín. 130 px digital · 5 cm impreso
↓ horizontal-dark.svg↓ horizontal-light.svg↓ horizontal-code.svg
design · system.
Esta página es la referencia canónica de la marca Casa Hacker: logotipo, símbolo, colores, tipografía, submarcas y reglas de uso. La documentación de componentes — HTML, CSS y patrones listos — es canónica en el design system completo.
01 logotipo
cuatro formas, un sistema
// vertical
tarjetas cuadradas, redes sociales
mín. 75 px digital · 4,5 cm impreso
// símbolo H
símbolo de la marca: marca de agua, ícono de app de la marca, usos < 24 px
mín. 15 px digital · 1 cm impreso
// «//» Estaiado
contextos técnicos: favicon de las plataformas (Cockpit, MCP del Cockpit, casahacker.org, MCP de Administración) e ícono de app/PWA de las herramientas. No sustituye al símbolo H.
mín. 16 px digital · archivos en 16, 32, 48 y 180 px
// área de respiro
Mantén al menos 1× la altura de la H de espacio libre alrededor del logotipo. Ningún elemento — texto, imagen o borde — invade esa zona. En reducciones por debajo del tamaño mínimo, usa solo el símbolo H.
02 colores
el vocabulario oficial es el de marca
El código nuevo usa los nombres de marca de abajo. Los papeles semánticos (primary, secondary, surface-*) siguen existiendo en global.css — la tabla de equivalencia está justo debajo de las muestras.
- hacker-green#32FA96acción, destaque, energía
- electric-violet#AA78E6acento editorial
- brand-blue#B3D9FEsuperficies de apoyo, duotono
- deep-obsidian#1A1C1Atexto, contorno, fondo oscuro
- clean-white#F8FCF8texto sobre fondo oscuro
- muted-stroke#D1D5D1divisores discretos
| token de marca (oficial) | equivalente semántico | observación |
|---|---|---|
| hacker-green | primary-container (#32FA96) · inverse-primary (#00E384) | primary (#006D3C) es la versión AA para texto |
| electric-violet | secondary-container ≈ (#C18EFE) | secondary (#7645B0) es la versión AA para texto |
| brand-blue | tertiary-container ≈ (#BFDFFF) | tertiary (#3C6282) es la versión AA para texto |
| deep-obsidian | on-background · on-surface | mismo valor (#1A1C1A) |
| clean-white | ≈ surface (#FAF9F6) / surface-container-lowest (#FFFFFF) | las superficies usan la rampa surface-* |
| muted-stroke | ≈ outline-variant (#BACBBB) | contornos de bajo relieve |
colores por área de actuación
Capa nueva sobre el design system, que define color por submarca (programa). En las superficies por área — las cuatro tarjetas de la home, los marcadores de menú — vale la regla: el área manda en el color de la tarjeta; la submarca manda en el color del chip de la iniciativa dentro de ella. Siempre con el par de texto indicado (contraste AA).
- educación STEAMbrand-blue · #B3D9FEtexto #0E3A6B (on-brand-blue)
- innovación socialelectric-violet · #AA78E6texto deep-obsidian
- inclusión digitalsoft-green · #E1FFDEtexto #0F5A33 (on-soft-green)
- políticas públicassignal-yellow · #E8D048texto #3B443C (on-signal-yellow)
03 tipografía
dos voces
// lectura corrida
IBM Plex Sans
Títulos, párrafos y todo lo que de hecho se lee. Pesos 400, 600 y 700, con escala fluida (clamp) en los displays y headlines. Autoalojada — ninguna fuente sale de CDN.
// voz de sistema
IBM Plex Mono
Rótulos, chips, metadatos, navegación y microcopy en mayúsculas con tracking amplio. Es la voz “de terminal” de la identidad — nunca se usa para lectura corrida.
04 submarcas
una familia, seis firmas
PerifaImpacto↓ svgdirectrices ↗
Minas em Tech↓ svgdirectrices ↗
Inclusão Tech↓ svgdirectrices ↗
Hackerclubes↓ svgdirectrices ↗
Internet Segura↓ svgdirectrices ↗
Mão na Massa↓ svgdirectrices ↗
05 uso de marca
tres reglas
Casa Hacker es titular de las marcas “Casa Hacker”, “PerifaImpacto”, “Minas em Tech”, “Inclusão Tech” y “Hackerclubes” — para que las personas puedan distinguir entre proyectos oficiales y proyectos independientes que usan nuestras tecnologías, infraestructura, espacio, inversión o cualquier otro tipo de apoyo.
1 · uso libre
Mencionar a Casa Hacker en textos y presentaciones, enlazar a nuestros sitios, decir que usó nuestro espacio, explicar que su iniciativa usa una tecnología nuestra.
2 · uso con acuerdo
Los proyectos apoyados formalmente pueden usar “Apoyado por Casa Hacker” y el sello “Iniciativa Apoyada/Acelerada” — manteniendo identidad visual propia y la naturaleza de la relación bien clara.
3 · uso prohibido
Usar nuestras marcas en el nombre de un producto, empresa o dominio; vender productos con las marcas; sugerir una alianza inexistente; modificar o combinar el logotipo.
06 piezas de campaña
el arte listo para la imprenta.
La campaña Outros Futuros 2026 es la primera pieza física derivada del design system: una estampa y seis carteles, cada uno en SVG y PDF. Los PDF son vectoriales en tamaño físico real — la estampa abre en 280 × 370 mm, los carteles en A3 — y la tipografía ya va en curvas: ningún archivo pide IBM Plex por su nombre, así que no hay fuente que la imprenta pueda sustituir. La fuente canónica es el repositorio casahacker/tshirt-outros-futuros-2026, cuya integración continua rechaza cualquier color fuera de la paleta y cualquier trazo por debajo del piso de 0,8 mm de la serigrafía. Las piezas están en portugués; las notas de abajo dicen qué se lee en cada una.
estampaEl arte de la camiseta: un panel de ficha técnica construido sobre una esponja de Menger. Frente, centro del pecho.estampa-oco · 28 × 37 cmSVG ↗PDF ↗
manifesto.diffEl manifiesto presentado como patch: lo que la casa quita y lo que pone en su lugar, en líneas de diff.cartaz-diff · A3 · 297 × 420 mmSVG ↗PDF ↗
comienzo«Las periferias no son un lugar de espera, son un lugar de comienzo.»cartaz-comeco · A3 · 297 × 420 mmSVG ↗PDF ↗
giro«El giro no viene de afuera: viene de la propia periferia cuando tiene acceso a oportunidades, herramientas, conexiones y respeto.»cartaz-virada · A3 · 297 × 420 mmSVG ↗PDF ↗
derecho«La tecnología como un derecho y como un lenguaje de poder, y no como privilegio de unos pocos.»cartaz-direito · A3 · 297 × 420 mmSVG ↗PDF ↗
centro«Sacar a la periferia del pie de página de la conversación y colocarla como autora principal de las respuestas a los desafíos de nuestro tiempo.»cartaz-centro · A3 · 297 × 420 mmSVG ↗PDF ↗
cambio«El cambio que buscamos no es un proyecto rápido: es una construcción diaria de vínculos, confianza y autonomía.»cartaz-mudanca · A3 · 297 × 420 mmSVG ↗PDF ↗
// mockupFrente y dorso de la camiseta, para visualización. Es una pieza de pantalla y no va a la imprenta — para imprimir, usá la estampa de arriba.Las piezas están bajo CC BY-NC-ND 4.0 ↗: descargá, imprimí y distribuí cada pieza entera y sin alteraciones, citando a Casa Hacker, con fines no comerciales. El uso de las marcas sigue regido por las tres reglas de arriba.
07 design system completo
los componentes viven en el repositorio
El repositorio casahacker/design-system es la fuente canónica de componentes, patrones, dataviz e impresos — HTML + CSS sin build, abierto a contribución.