Isothermes
Le système graphique de l'Africa Digital Infrastructures Summit. Une identité construite comme une caméra thermique : des cartes de chaleur, des viseurs et une échelle du froid au chaud.
Concept
Voir le numérique par sa chaleur
Un data center est d'abord une question d'énergie : il consomme, il chauffe, il faut le refroidir, puis le financer. La caméra thermique rend visible cette réalité physique que les visuels « tech » habituels effacent.
Chaque image du site est une carte de chaleur posterisée en dix paliers, séparés par des isothermes, les lignes d'égale température. Les cartes sont calculées en direct dans le navigateur : elles dérivent lentement et réagissent au curseur, qui réchauffe la zone qu'il survole.
La même échelle sert de palette. Plus une section est proche de la décision, plus elle est chaude : contenus sur fond froid, formulaires sur blanc chaud, appel final en orange.
Couleurs
L'échelle thermique
Dix paliers, du froid au chaud. Les paliers 0 à 4 restent dans les images. Les paliers 5 à 9 portent l'interface, toujours avec du texte nuit dessus.
--t0Fond du site.
--t1Bruit de fond des cartes.
--t2Zones tièdes des cartes.
--t3Contour du logo, pied de page.
--t4Cartes uniquement, jamais en texte.
--t5Pilier Financement, erreurs. Texte nuit dessus.
--t6Pilier Énergie, appel final, focus des champs.
--t7Pilier Connectivité, intitulés du pied de page.
--t8L'action : boutons, mots clés, section des résultats.
--t9Le texte, les formulaires, le pilier Souveraineté.
Neutres
--surfaceSections tièdes.
--surface-2Cartes et tuiles sur fond froid.
--filetFilets sur fond froid.
--lavandeTexte secondaire sur nuit (10,9:1).
--brumeLégendes sur nuit (6,5:1).
--encre-douceTexte secondaire sur blanc chaud (9:1).
Températures
Une section, une température
Une seule classe bascule le fond, le texte, l'accent et la couleur de focus d'une section.
Fond par défaut : hero, contenus, programme.
.z-froidAlternance : piliers, pass, lettre d'information.
.z-tiedeLà où l'on écrit : formulaires.
.z-blancCe que le Summit doit produire.
.z-chaudL'appel final à s'accréditer.
.z-orangeTypographie
Condensé, capitales, sans hésiter
Big Shoulders Display, une grotesque condensée dessinée pour la ville de Chicago, en capitales et en graisse 900 pour tous les titres. Schibsted Grotesk pour le texte. Noto Kufi Arabic pour le nom de l'événement en arabe.
Rabat
Six points chauds
Demande d'accréditation
Green Data Centers & Energy
Deux jours à Rabat avec ceux qui conçoivent, régulent et financent les data centers du continent.
Les informations saisies servent uniquement à traiter votre demande. Elles ne sont ni vendues ni cédées.
Les six piliers
قمة إفريقيا للبنيات التحتية الرقمية
Les trois familles sont sous licence SIL OFL et hébergées sur le serveur du site.
Moteur thermique
Six signatures thermiques
Chaque pilier a sa propre disposition de points chauds. Survolez une carte pour la faire vivre. Sans JavaScript ou avec le mouvement réduit, une image fixe calculée de la même façon s'affiche.
Un seul foyer, aux bords nets.
Une grappe de points, comme une baie de GPU.
Des nappes diffuses et étalées.
Une source qui monte du bas de l'image.
Des relais alignés, de bout en bout.
Des foyers de plus en plus chauds, par paliers.
Viseurs
L'interface de la caméra
Trois éléments seulement. Le viseur rond marque le sujet principal d'une image. Le point carré et son étiquette nomment un foyer secondaire. Les équerres cadrent l'image. Au survol, une lecture indique le palier sous le curseur.
Logo
Un point chaud
Quatre isothermes imbriquées, du pourpre au blanc chaud, légèrement décentrées comme un vrai relevé thermique. À côté, le sigle ADIS en Big Shoulders 900 et le nom complet sur trois lignes.
Infrastructures Summit
Rabat
À faire
Symbole sur fond nuit ou jaune. Taille minimale : 20 px. Le symbole seul sert de favicon.
À éviter
Recolorer les isothermes, les centrer parfaitement, poser le logo sur une carte thermique chargée.
Composants
Rectangles et équerres
Aucun arrondi, aucune ombre. Les boutons passent du jaune à l'orange au survol, comme une montée en température.
Encart d'avertissement : programme provisoire, champs à compléter.
Ton éditorial
Direct, vérifiable, sans emphase
On écrit pour des ministres, des directeurs techniques et des investisseurs. Les noms des formats et des piliers restent en anglais, comme dans le dossier de présentation. Espaces fines insécables avant : ; ? ! et dans les guillemets.
Pas de fausse opposition
Ce n'est pas un salon de plus, c'est une intersection unique.
Le Summit réunit data centers, IA, cloud, souveraineté, énergie et capital.
Pas de grands mots
Un rendez-vous incontournable, une plateforme d'exception.
500 à 800 décideurs, sélectionnés sur accréditation.
Pas de fausse donnée thermique
Des data centers à 45 °C qui consomment 30 % d'énergie en trop.
Les cartes sont des images : aucun chiffre de température n'est affiché.
Pas de promesse inventée
Plus de 50 pays représentés dès la première édition.
Les pays participants seront annoncés avec le programme.
Jetons
Tout part de tokens.css
Les couleurs, typographies et zones vivent dans assets/css/tokens.css. Le moteur thermique est dans assets/js/main.js ; les images de repli sont générées par src/thermo.py.
:root {
/* l'échelle thermique, du froid au chaud */
--t0: #0B0614; --t1: #22083F; --t2: #4A0D6E; --t3: #7E1180; --t4: #B8186F;
--t5: #E5334B; --t6: #FF6A1F; --t7: #FF9E1A; --t8: #FFD23F; --t9: #FFF4C2;
--f-titre: "Big Shoulders Display"; /* 100-900, capitales */
--f-texte: "Schibsted Grotesk"; /* 400-900 */
--f-arabe: "Noto Kufi Arabic";
--rayon: 0; --trait: 2px; --equerre: 22px;
}
/* la température d'une section */
.z-froid { --fond: var(--t0); --texte: var(--t9); --accent: var(--t8); }
.z-blanc { --fond: var(--t9); --texte: var(--t0); --accent: var(--t5); }
/* une carte thermique */
<div class="thermo" data-thermo='{"spots":[[0.5,0.5,0.12,1]],"graine":3}'>
<img class="thermo__poster" src="poster.png" alt=""><canvas></canvas>
</div>