// horizontal
navigation, headers, A4 stationery
min. 130 px digital · 5 cm in print
↓ horizontal-dark.svg↓ horizontal-light.svg↓ horizontal-code.svg
design · system.
This page is the canonical reference for the Casa Hacker brand: logo, symbol, colours, typography, sub-brands and usage rules. The documentation of components — ready-made HTML, CSS and patterns — is canonical in the full design system.
01 logo
four forms, one system
// vertical
square cards, social media
min. 75 px digital · 4.5 cm in print
// H symbol
brand symbol: watermark, brand app icon, uses under 24 px
min. 15 px digital · 1 cm in print
// «//» Estaiado
technical contexts: favicon of the platforms (Cockpit, Cockpit MCP, casahacker.org, Administration MCP) and app/PWA icon of the tools. It does not replace the H symbol.
min. 16 px digital · files at 16, 32, 48 and 180 px
// clear space
Keep at least 1× the height of the H of clear space around the logo. No element — text, image or border — may enter that zone. Below the minimum size, use the H symbol alone.
02 colours
the official vocabulary is the brand one
New code uses the brand names below. The semantic roles (primary, secondary, surface-*) still exist in global.css — the equivalence table is just below the swatches.
- hacker-green#32FA96action, emphasis, energy
- electric-violet#AA78E6editorial accent
- brand-blue#B3D9FEsupporting surfaces, duotone
- deep-obsidian#1A1C1Atext, outline, dark background
- clean-white#F8FCF8text on a dark background
- muted-stroke#D1D5D1discreet dividers
| brand token (official) | semantic equivalent | note |
|---|---|---|
| hacker-green | primary-container (#32FA96) · inverse-primary (#00E384) | primary (#006D3C) is the AA version for text |
| electric-violet | secondary-container ≈ (#C18EFE) | secondary (#7645B0) is the AA version for text |
| brand-blue | tertiary-container ≈ (#BFDFFF) | tertiary (#3C6282) is the AA version for text |
| deep-obsidian | on-background · on-surface | same value (#1A1C1A) |
| clean-white | ≈ surface (#FAF9F6) / surface-container-lowest (#FFFFFF) | surfaces use the surface-* ramp |
| muted-stroke | ≈ outline-variant (#BACBBB) | low-relief outlines |
colours by area of work
A new layer on top of the design system, which defines colour by sub-brand (programme). On the by-area surfaces — the four cards on the homepage, the menu markers — the rule is: the area sets the colour of the card; the sub-brand sets the colour of the initiative chip inside it. Always with the text pairing indicated (AA contrast).
- STEAM educationbrand-blue · #B3D9FEtext #0E3A6B (on-brand-blue)
- social innovationelectric-violet · #AA78E6text deep-obsidian
- digital inclusionsoft-green · #E1FFDEtext #0F5A33 (on-soft-green)
- public policysignal-yellow · #E8D048text #3B443C (on-signal-yellow)
03 typography
two voices
// running text
IBM Plex Sans
Headings, paragraphs and everything that is actually read. Weights 400, 600 and 700, with fluid scaling (clamp) on displays and headlines. Self-hosted — no font leaves a CDN.
// system voice
IBM Plex Mono
Labels, chips, metadata, navigation and microcopy in uppercase with wide tracking. It is the “terminal” voice of the identity — never used for running text.
04 sub-brands
one family, six signatures
PerifaImpacto↓ svgguidelines ↗
Minas em Tech↓ svgguidelines ↗
Inclusão Tech↓ svgguidelines ↗
Hackerclubes↓ svgguidelines ↗
Internet Segura↓ svgguidelines ↗
Mão na Massa↓ svgguidelines ↗
05 brand usage
three rules
Casa Hacker owns the marks “Casa Hacker”, “PerifaImpacto”, “Minas em Tech”, “Inclusão Tech” and “Hackerclubes” — so that people can tell the difference between official projects and independent projects that use our technologies, infrastructure, space, investment or any other kind of support.
1 · free use
Mentioning Casa Hacker in texts and presentations, linking to our sites, saying you used our space, explaining that your initiative uses a technology of ours.
2 · use by agreement
Formally supported projects may use “Supported by Casa Hacker” and the “Supported/Accelerated Initiative” seal — keeping their own visual identity and the nature of the relationship clear.
3 · prohibited use
Using our marks in a product, company or domain name; selling products bearing the marks; suggesting a partnership that does not exist; modifying or combining the logo.
06 campaign assets
artwork ready for the printer.
The Outros Futuros 2026 campaign is the first physical piece derived from the design system: one T-shirt print and six posters, each in SVG and PDF. The PDFs are vector files at real physical size — the print opens at 280 × 370 mm, the posters at A3 — and the type is already converted to outlines: no file asks for IBM Plex by name, so there is no font for the printer to substitute. The canonical source is the casahacker/tshirt-outros-futuros-2026 repository, whose CI rejects any colour outside the palette and any stroke below the 0.8 mm screen-printing floor. The pieces are in Portuguese; the notes below say what each one reads.
printThe T-shirt artwork: a spec-sheet panel built around a Menger sponge. Front, centre chest.estampa-oco · 28 × 37 cmSVG ↗PDF ↗
manifesto.diffThe manifesto set as a patch: what the organisation takes out and what it puts in, in diff lines.cartaz-diff · A3 · 297 × 420 mmSVG ↗PDF ↗
beginning“The peripheries are not a place of waiting — they are a place of beginning.”cartaz-comeco · A3 · 297 × 420 mmSVG ↗PDF ↗
turning point“The turning point does not come from outside; it comes from the periphery itself, once it has access to opportunity, tools, connections and respect.”cartaz-virada · A3 · 297 × 420 mmSVG ↗PDF ↗
right“Technology as a right and as a language of power, not as the privilege of a few.”cartaz-direito · A3 · 297 × 420 mmSVG ↗PDF ↗
centre“To take the periphery out of the footnote of the conversation and place it as the lead author of the answers to the challenges of our time.”cartaz-centro · A3 · 297 × 420 mmSVG ↗PDF ↗
change“The change we seek is not a quick project; it is a daily construction of bonds, trust and autonomy.”cartaz-mudanca · A3 · 297 × 420 mmSVG ↗PDF ↗
// mockupFront and back of the T-shirt, for viewing. It is a screen piece and does not go to the printer — to print, use the artwork above.The pieces are released under CC BY-NC-ND 4.0 ↗: download, print and distribute each piece whole and unaltered, crediting Casa Hacker, for non-commercial purposes. Use of the trademarks remains governed by the three rules above.
07 the full design system
components live in the repository
The casahacker/design-system repository is the canonical source of components, patterns, dataviz and print pieces — HTML + CSS with no build step, open to contribution.