// horizontale
navigation, en-têtes, papeterie A4
min. 130 px en numérique · 5 cm en impression
↓ horizontal-dark.svg↓ horizontal-light.svg↓ horizontal-code.svg
design · system.
Cette page est la référence canonique de la marque Casa Hacker : logo, symbole, couleurs, typographie, sous-marques et règles d’usage. La documentation des composants — HTML, CSS et motifs prêts à l’emploi — est canonique dans le design system complet.
01 logo
quatre formes, un système
// verticale
cartes carrées, réseaux sociaux
min. 75 px en numérique · 4,5 cm en impression
// symbole H
symbole de la marque : filigrane, icône d’application de la marque, usages < 24 px
min. 15 px en numérique · 1 cm en impression
// «//» Estaiado
contextes techniques : favicon des plateformes (Cockpit, MCP du Cockpit, casahacker.org, MCP d’Administration) et icône d’application/PWA des outils. Il ne remplace pas le symbole H.
min. 16 px en numérique · fichiers en 16, 32, 48 et 180 px
// zone de respiration
Gardez au moins 1× la hauteur du H d’espace libre autour du logo. Aucun élément — texte, image ou bordure — n’entre dans cette zone. En dessous de la taille minimale, n’utilisez que le symbole H.
02 couleurs
le vocabulaire officiel est celui de la marque
Le code nouveau utilise les noms de marque ci-dessous. Les rôles sémantiques (primary, secondary, surface-*) continuent d’exister dans global.css — le tableau d’équivalence se trouve juste sous les échantillons.
- hacker-green#32FA96action, mise en avant, énergie
- electric-violet#AA78E6accent éditorial
- brand-blue#B3D9FEsurfaces d’appui, duotone
- deep-obsidian#1A1C1Atexte, contour, fond sombre
- clean-white#F8FCF8texte sur fond sombre
- muted-stroke#D1D5D1séparateurs discrets
| token de marque (officiel) | équivalent sémantique | remarque |
|---|---|---|
| hacker-green | primary-container (#32FA96) · inverse-primary (#00E384) | primary (#006D3C) est la version AA pour le texte |
| electric-violet | secondary-container ≈ (#C18EFE) | secondary (#7645B0) est la version AA pour le texte |
| brand-blue | tertiary-container ≈ (#BFDFFF) | tertiary (#3C6282) est la version AA pour le texte |
| deep-obsidian | on-background · on-surface | même valeur (#1A1C1A) |
| clean-white | ≈ surface (#FAF9F6) / surface-container-lowest (#FFFFFF) | les surfaces utilisent la gamme surface-* |
| muted-stroke | ≈ outline-variant (#BACBBB) | contours en faible relief |
couleurs par axe d’action
Une nouvelle couche par-dessus le design system, qui définit la couleur par sous-marque (programme). Sur les surfaces par axe — les quatre cartes de l’accueil, les repères de menu — la règle est la suivante : l’axe commande la couleur de la carte ; la sous-marque commande la couleur de la puce de l’initiative à l’intérieur. Toujours avec la paire de texte indiquée (contraste AA).
- éducation STEAMbrand-blue · #B3D9FEtexte #0E3A6B (on-brand-blue)
- innovation socialeelectric-violet · #AA78E6texte deep-obsidian
- inclusion numériquesoft-green · #E1FFDEtexte #0F5A33 (on-soft-green)
- politiques publiquessignal-yellow · #E8D048texte #3B443C (on-signal-yellow)
03 typographie
deux voix
// texte courant
IBM Plex Sans
Titres, paragraphes et tout ce qui se lit vraiment. Graisses 400, 600 et 700, avec une échelle fluide (clamp) sur les displays et les headlines. Auto-hébergée — aucune police ne passe par un CDN.
// voix système
IBM Plex Mono
Étiquettes, puces, métadonnées, navigation et microcopie en capitales avec un interlettrage large. C’est la voix « terminal » de l’identité — jamais utilisée pour le texte courant.
04 sous-marques
une famille, six signatures
PerifaImpacto↓ svgdirectives ↗
Minas em Tech↓ svgdirectives ↗
Inclusão Tech↓ svgdirectives ↗
Hackerclubes↓ svgdirectives ↗
Internet Segura↓ svgdirectives ↗
Mão na Massa↓ svgdirectives ↗
05 usage de la marque
trois règles
Casa Hacker est titulaire des marques « Casa Hacker », « PerifaImpacto », « Minas em Tech », « Inclusão Tech » et « Hackerclubes » — afin que chacun puisse distinguer les projets officiels des projets indépendants qui utilisent nos technologies, notre infrastructure, notre espace, notre investissement ou tout autre forme de soutien.
1 · usage libre
Mentionner Casa Hacker dans des textes et des présentations, faire un lien vers nos sites, dire que vous avez utilisé notre espace, expliquer que votre initiative utilise une de nos technologies.
2 · usage sous accord
Les projets soutenus formellement peuvent utiliser « Soutenu par Casa Hacker » et le label « Initiative soutenue/accélérée » — en gardant leur propre identité visuelle et en rendant la nature de la relation claire.
3 · usage interdit
Utiliser nos marques dans un nom de produit, d’entreprise ou de domaine ; vendre des produits portant les marques ; suggérer un partenariat qui n’existe pas ; modifier ou combiner le logo.
06 pièces de campagne
les visuels prêts pour l’imprimeur.
La campagne Outros Futuros 2026 est la première pièce physique dérivée du design system : un visuel de t-shirt et six affiches, chacun en SVG et en PDF. Les PDF sont vectoriels à la taille physique réelle — le visuel s’ouvre en 280 × 370 mm, les affiches en A3 — et la typographie est déjà vectorisée : aucun fichier ne demande IBM Plex par son nom, il n’y a donc pas de police que l’imprimeur puisse substituer. La source canonique est le dépôt casahacker/tshirt-outros-futuros-2026, dont l’intégration continue refuse toute couleur hors palette et tout trait sous le seuil de 0,8 mm de la sérigraphie. Les pièces sont en portugais ; les notes ci-dessous disent ce que chacune énonce.
visuelLe visuel du t-shirt : un panneau de fiche technique construit autour d’une éponge de Menger. Devant, centre de la poitrine.estampa-oco · 28 × 37 cmSVG ↗PDF ↗
manifesto.diffLe manifeste présenté comme un patch : ce que l’association retire et ce qu’elle met à la place, en lignes de diff.cartaz-diff · A3 · 297 × 420 mmSVG ↗PDF ↗
commencement« Les périphéries ne sont pas un lieu d’attente, elles sont un lieu de commencement. »cartaz-comeco · A3 · 297 × 420 mmSVG ↗PDF ↗
basculement« Le basculement ne vient pas de l’extérieur : il vient de la périphérie elle-même, dès qu’elle a accès aux opportunités, aux outils, aux connexions et au respect. »cartaz-virada · A3 · 297 × 420 mmSVG ↗PDF ↗
droit« La technologie comme un droit et comme un langage de pouvoir, et non comme le privilège de quelques-uns. »cartaz-direito · A3 · 297 × 420 mmSVG ↗PDF ↗
centre« Sortir la périphérie de la note de bas de page et la placer comme autrice principale des réponses aux défis de notre temps. »cartaz-centro · A3 · 297 × 420 mmSVG ↗PDF ↗
changement« Le changement que nous cherchons n’est pas un projet rapide : c’est une construction quotidienne de liens, de confiance et d’autonomie. »cartaz-mudanca · A3 · 297 × 420 mmSVG ↗PDF ↗
// mockupRecto et verso du t-shirt, pour visualisation. C’est une pièce d’écran, elle ne part pas à l’impression — pour imprimer, utilisez le visuel ci-dessus.Les pièces sont diffusées sous CC BY-NC-ND 4.0 ↗ : téléchargez, imprimez et diffusez chaque pièce entière et sans modification, en créditant Casa Hacker, à des fins non commerciales. L’usage des marques reste régi par les trois règles ci-dessus.
07 le design system complet
les composants vivent dans le dépôt
Le dépôt casahacker/design-system est la source canonique des composants, des motifs, de la dataviz et des supports imprimés — HTML + CSS sans étape de build, ouvert à la contribution.
- // composants ↗boutons, formulaires, navigation, tableaux — HTML + CSS prêts
- // motifs ↗compositions récurrentes de page et de parcours
- // dataviz ↗couleurs et règles pour les graphiques et la visualisation de données
- // imprimés ↗papeterie, affiches et supports physiques
- // directives ↗accessibilité, écriture, usage de l’IA