Les personnes
Des photographies documentaires de vraies scènes de travail, en lumière naturelle. Personne ne regarde l’objectif.
Charte Klimat
Klimat rend lisible ce qui ne se voit pas : le climat d’une équipe. Cette charte vaut pour l’application, le site klimat.io, les présentations, les e-mails, les PDF et les exports. Chaque règle a son fichier, prêt à télécharger.
Trame 23
Trois matières, et rien d’autre.
Le dynamisme vient de la typographie, de la trame de pastilles et du vert qui ne sert qu’à agir. Il ne vient jamais de la décoration. Les surfaces restent claires quand l’écran est clair.
68sur 100
La mesure
Des chiffres francs, six zones de lecture, des données toujours sourcées et protégées par un seuil.
Le collectif
Le champ de pastilles : chaque point est une personne, la trame un collectif, et la pastille Véroné le point qui compte.
Les règles d’or
Une seule famille de caractères
Schibsted Grotesk, de l’affiche de 96 px à la légende de 12 px. La hiérarchie vient de la graisse, de 400 à 820.
Le Véroné agit ou signe
action peint ce qu’on presse et les liens ; signature porte la marque. Jamais de texte blanc sur signature (3,35:1).
Les zones ne servent qu’aux scores
Si ce n’est pas un score, ce n’est pas une couleur de zone : ni fond, ni icône, ni illustration.
L’Orge marque une question
La pastille question précède la source d’une question du catalogue, et rien d’autre.
Une seule élévation
La levée pour ce qui flotte (modale, menu, panneau sur une photo). Une carte posée a un filet, pas d’ombre.
Ce qu’on presse est une pilule
Boutons, filtres, onglets segmentés. Champs à 10 px, panneaux à 14 px, photos à 4 px.
Aucune illustration de banque
Ni undraw, ni personnage vectoriel, ni 3D : des photos documentaires, des pictogrammes au trait ouvert, le champ de pastilles.
AA partout, dans les deux thèmes
Texte à 4,5:1, contrôles et focus à 3:1, mouvements réduits respectés, contenu visible sans JavaScript.
Le logo, tel quel.
Une pastille Véroné où s’élance un « k » calligraphié, et le mot-symbole « klimat » qui en reprend l’initiale. Rien n’est redessiné : les fichiers ci-dessous sont extraits des tracés officiels.
Ce que ce kit règle (lot 0)
- La pastille passe de
#03a687au Véroné#009f7f, la couleursignaturede toute la charte. - L’encre du mot-symbole devient la nuit
#0e1917, celle des titres. - Le signe © disparaît : il ne protège rien sur une marque et se perd sous 40 px.
- La pastille renversée de l’application, blanche sur blanche, était invisible : elle est désormais ajourée.
Les fichiers de public/img restent inchangés tant que le lot 0 n’est pas appliqué à l’application.
Quatre compositions
Horizontal
La version par défaut : en-tête, site, documents, signature.
Vertical
Formats carrés ou étroits : affiche, kakémono, page de garde centrée.
Mot-symbole
Quand la pastille est déjà présente ailleurs sur le support.
Pastille
Favicon, avatar, pied de diapositive, icône d’application.
Quatre traitements, chacun sur son fond
{{LOGO_TRAITEMENTS}}
Zone de protection et taille minimale
xx
x = le rayon de la pastille
Aucun texte, aucun bord ni aucune image n’entre dans cette marge, tout autour du logo. Elle vaut à peu près la hauteur du « k » de la pastille.
En dessous, employez la pastille seule.
À ne pas faire
Déformer, étirer ou compresser.
Changer les couleurs, même pour s’accorder à un client.
Ajouter une ombre, un contour ou un effet.
Incliner ou faire pivoter.
Poser le logo couleur sur du Véroné : employez la version blanche.
Poser le logo sur une photo sans voile nuit.
Tous les fichiers
{{LOGO_FICHIERS}}
PNG transparents. Le SVG reste le format de référence ; le PNG sert à la bureautique et aux e-mails.
Une palette où la couleur est une information.
Vert-gris presque neutre. La couleur saturée a toujours un sens : agir, signer, marquer une question, mesurer. Cliquez une teinte pour copier sa valeur.
{{MARQUE}}
Rampes
{{RAMPES}}
Appoint pour les séries sans score seulement : Cybergrappe #5d407b et Vignoble #a73856.
Rôles
Le code emploie des rôles, dont la valeur change avec le thème ; une rampe seulement quand aucun rôle ne dit l’intention ; un hexadécimal jamais, sauf dans le fichier de thème.
{{ROLES}}
Fichiers de couleurs
Un score se lit partout de la même façon.
Chaque réponse vaut de 1 à 5 ; le score d’une équipe est ramené sur 100 et situé dans six zones. Faites glisser le curseur : la zone se calcule sur l’entier affiché.
68sur 100
Point d’amélioration
Zone 4, de 60 à 70 · famille des points d’amélioration
Texte blanc sur les zones 1 et 6 seulement, nuit sur les zones 2 à 5. Le chiffre est toujours écrit : la couleur ne porte jamais seule l’information.
Les six zones
20 à 39Facteur de risque
40 à 50Risque modéré
51 à 59Zone intermédiaire
60 à 70Point d’amélioration
71 à 79Facteur de protection
80 à 100Protection forte
{{ICONE_DL}}Grille de lecture PNG transparentDistance entre deux zones voisines au moins 10,8 (OKLab) pour les trois formes de daltonisme.
Carte de chaleur
Données d’exemple. NC : moins de 6 réponses ; la ligne entière se masque, effectif compris.
Écarts (organisation, sondage précédent, référentiel Klimat) : sept pas aux mêmes teintes que les zones, seuils à 2, 5 et 10 points. Un écart s’écrit toujours signé : « ▲ +6 », « ▼ −4 », « = 0 ». La forme dit le sens, la couleur l’ampleur.
−10et moins
−5à −9
−2à −4
0±1
+2à +4
+5à +9
+10et plus
Sous le seuil, aucune valeur ne quitte le serveur : « NC » sur une rayure à 45°, ou le cadenas et « Résultat masqué » sur une tuile. Le seuil se juge case par case.
Ce qui n’est pas un score
Séries catégorielles
Genre, tranche d’âge, participation : cat-1 à cat-6 dans cet ordre, jamais à côté d’une zone.
OsmiumCybergrappeVignobleOrgeVéroné 900Onyx 400
eNPS
Une répartition ordinale : détracteurs, passifs et promoteurs prennent les teintes d’écart. Le score, de −100 à +100, s’écrit signé, en encre.
+18
Détracteurs (0 à 6), passifs (7 et 8), promoteurs (9 et 10). Données d’exemple.
Carte des risques QR Best
Part de personnes exposées. Toute exposition est à proscrire : seule une case plus exposée que l’ensemble se colore, du corail au brique ; une case moins exposée reste neutre. Données d’exemple.
HarcèlementViolenceIncivilitésLongues heures
Ensemble8 %5 %21 %12 %
Urgences11 %13 %34 %10 %
Pharmacie4 %2 %24 %19 %
Une grotesque de presse, du titre à la légende.
Schibsted Grotesk, libre (licence OFL), dense et franche en titre, posée en texte, avec des chiffres tabulaires pour les scores. Une seule famille : la hiérarchie vient de la graisse.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz àâçéèêëîïôœùûü « ’ » 0123456789 % € → ▲▼
Mesurez ce que vivent vos équipes.
Échelle
t-display-xl
96 / 0,98 · 820
Couverture
t-display
64 / 1 · 800
Une campagne, étape par étape.
t-headline
44 / 1,04 · 790
Comprendre les résultats
t-quote
28 / 1,22 · 560
J’ai le temps nécessaire pour accomplir mes tâches
t-title-xl · lg · md
28 · 22 · 17, de 760 à 680
Résultats du baromètre
Synthèse par thématique
Score global
t-body · t-body-sm
15 / 24 · 14 / 20 · 400
Texte de lecture : questionnaire, aide, e-mails. Le texte d’interface par défaut, celui de Flux, descend à 14 px dans les tableaux et les formulaires.
t-label · t-caption
13 · 620 / 12 · 450
Participation
Baromètre Empreinte Humaine × Ipsos BVA, T16, mai 2026
t-score-xl · t-data
56 · 820 / 14 · 560, tabulaires
68 64 · 57 · 74 · 76
- Titres serrés dès 22 px (approche négative) et
text-wrap: balance. - Pas de capitales espacées : les surtitres passent en casse de phrase, en
t-label. - Chiffres tabulaires sur les nombres purs seulement : score, compte, pourcentage, téléphone.
- Espaces fines insécables avant « : », « ; », « ? », « ! », « % » et dans les guillemets.
Doux sans être rond, retenu sans être figé.
La photo reste un tirage de presse, l’interface s’arrondit, ce qu’on presse devient une pilule. Le mouvement accompagne un geste, il ne décore pas.
radius-photo 4 pxradius-chip 6 pxradius-field 10 pxradius-panel 14 pxradius-pill piluleCarte posée
Un filet line, pas d’ombre. C’est le cas de tous les panneaux de l’application.
Ce qui flotte
La seule ombre, shadow-levee : modale, menu, toast, fragment d’interface posé sur une photo.
Espacement, base 4 px
space-14space-28space-312space-416space-524space-632space-748space-864space-996space-10144Les chiffres s’écrivent
Un score compte de 0 à sa valeur en 600 ms, une seule fois, à son apparition. C’est l’un des trois mouvements signés, avec la photo qui se pose et la trame qui respire.
74
120 ms au survol, 200 ms pour un menu, 320 ms pour une modale. Un seul mouvement signé par écran ; aucun avec prefers-reduced-motion.
Le champ de pastilles, signature de Klimat.
Une trame de points dont la taille suit des cellules de pression. Chaque point est une personne, l’ensemble un collectif : on ne voit jamais un point seul, comme dans les résultats. La plus grosse pastille, en Véroné, répond au disque du logo. L’en-tête de cette page est calculé ainsi, en direct.
Règles de dessin
| Élément | Règle |
|---|---|
| Trame | Points en quinconce, 72 colonnes sur la largeur du support. |
| Taille | De 0 à 0,44 du pas, selon un champ lisse fait de quatorze cellules de pression ; aucun point sous 0,55 px. |
| Couleur des points | Brume : onyx-400 à 95 %. Nuit : verone-300 à 50 %. Blanc : #b9c6c2. Jamais une couleur de zone. |
| Pastille | Une seule, de 0,62 du pas, en signature (verone-300 sur la nuit), posée sur le plus gros point hors des marges. |
| Zones calmes | Une ellipse par titre, logo ou mention ; les points s’y effacent sur 35 % du rayon. Jamais de texte posé sur la trame. |
| Mouvement | Sur le web, les points se posent depuis la pastille (900 ms), puis la trame respire (14 s). Rien avec prefers-reduced-motion. |
Où l’employer
- Couverture de présentation (brume) et clôture (nuit).
- Page de connexion, sur la moitié droite.
- En-tête des e-mails, visuels de partage et bannières.
- États vides et pages d’erreur, en filigrane.
Où ne jamais l’employer
- Derrière un texte courant, un tableau, un graphique ou une carte de chaleur.
- Sur une photographie, ou dans le questionnaire répondant.
- En couverture d’un PDF : brume unie, logo et titre (décision du 27 octobre 2026).
- Avec deux pastilles Véroné, ou des points en couleur de zone.
Pour un nouveau format, on génère une variante plutôt que d’étirer un fichier : chaque zone calme se décrit par une ellipse, en fractions de la largeur et de la hauteur.
python3 pastilles/pastilles.py couverture.svg 1920 1080 23 brume "0.30,0.86,0.46,0.30;0.10,0.09,0.14,0.12"
# fichier largeur hauteur graine fond zones calmes : cx,cy,rx,ry séparées par ;Fichiers
{{PASTILLES}}
Le champ de pastilles remplace les isolignes depuis le 6 novembre 2026 : la pastille était déjà partout dans la marque (logo, pictogrammes, menu, question du catalogue), la trame la prolonge au lieu d’ajouter une forme.
Le reportage, pas la banque d’images.
De vraies scènes de travail, comme si un photojournaliste avait passé la journée sur place et que tout le monde l’avait oublié. Des métiers variés, des visages, la lumière disponible.
{{PHOTOS}}
Ce qu’on cherche
- Soins, industrie, logistique, enseignement, bureau, services publics.
- Un geste saisi en plein mouvement ; personne ne regarde l’objectif.
- Des détails vrais : câbles, tasses, blouses, gants.
Ce qu’on refuse
- Sourires de banque d’images, poignées de main, pouces levés.
- Écrans de tableau de bord, hologrammes, graphiques flottants.
- Toute photo présentée comme un client de Klimat.
Traitement
- Étalonnage neutre, désaturé d’environ 10 %, ombres vert-gris.
- Coins de 4 px, jamais d’ombre ni de cadre.
- Texte seulement sur un voile nuit, jamais sur un visage.
Générer une image quand Unsplash n’a pas la scène
Aucune personne réelle sans son accord écrit ; aucune image générée présentée comme un client ; la mention « Image générée par IA » dans la légende ou les crédits ; le prompt gardé dans les métadonnées ; un contrôle humain des mains, visages, textes et logos avant publication. Le modèle de prompt, en anglais :
Generate exactly one image, PNG, [landscape 3:2 | 16:9 | portrait 4:5].
Scene: [lieu, moment], during a real working day. [Une à trois personnes, tenue, action en cours.]
Camera: [position], [35 | 50 | 85] mm at f/2.8, available light only from [source], no flash.
Style: a genuinely candid, stolen photograph by a photojournalist everyone has forgotten.
Nobody poses, nobody looks at the lens. Slightly imperfect framing, natural film grain,
neutral slightly desaturated colour, shadows towards green-grey, no teal-and-orange grade.
Composition: keep the [left | right] third calm for a title.
Exclusions: no logos, no readable text, no dashboards, no handshake, no posed group.Le trait ouvert.
Un trait régulier, une ouverture entre 1 h et 2 h qui reprend l’élan du « k », et une seule pastille pleine, posée sur le point qui porte le sens. Trente-deux pictogrammes : les dix-huit marqués d’un point Orge sont nouveaux.
Thématiques
{{PICTOS_THEMES}}
Fonctionnalités
{{PICTOS_FONCTIONS}}
États vides et erreurs
{{PICTOS_ETATS}}
Spécification
- Grille de 48, zone utile de 40, trait de 2, terminaisons rondes.
- Cercles, arcs, droites horizontales, verticales ou à 45°.
- Une ouverture par forme principale ; cadenas et bouclier restent fermés.
- Une pastille :
signature, ou Orge pour une question ou un commentaire. - Huit éléments au plus, lisible à 32 px.
324896Trois versions par pictogramme
Mono, à currentColor, est la source : intégré dans une page, sa pastille (.k-pastille) prend la couleur signature du thème. Duo (encre nuit) et nuit (trait clair) servent en image, dans un e-mail ou PowerPoint ; le PNG duo de 192 px aussi.
Les icônes d’interface restent les Heroicons de Flux, à 16, 20 ou 24 px. Les deux familles ne se mélangent jamais dans un même bloc.
La charte, support par support.
L’application s’efface devant les données ; le questionnaire reste calme ; les présentations ouvrent sur la brume et referment sur la nuit. Chaque gabarit se télécharge.
Application
AccueilSondagesRésultatsPlan d’actionsOrganisationRésultats du baromètre
Baromètre QVCT 2026, clos le 31 octobre · Données d’exemple
Score global
68
Point d’améliorationParticipation
74 %
▲ +6 depuis 2025Charge de travail
46
Risque modéréProchaine action
Créer un plan d’actionsExporter
Barre latérale brume (nuit en thème sombre), élément courant en carte blanche, filet, graisse 620 et pastille : les trois signes sont obligatoires, la carte se distinguant peu de la brume.
Questionnaire répondant
J’ai le temps nécessaire pour accomplir mes tâches
Pas du tout d’accordPlutôt pas d’accordNi l’un ni l’autrePlutôt d’accordTout à fait d’accord
Enregistré
L’écran le plus vu, souvent sur mobile. Sol blanc, colonne de 44rem, aucune illustration ni trame. Cinq choix larges (cible de 44 px), le choix fait en action-soft avec une coche ; « Ne s’applique pas » et « Je préfère ne pas répondre » à part. La couleur du client remplace action si le blanc y atteint 4,5:1.
Présentations
{{DIAPOS}}
16:9, 1 920 × 1 080, marges de 96 px. Couverture en brume et pastilles, chapitre sur photo voilée, clôture en nuit. Fonds seuls : voir le champ de pastilles en PNG.
E-mail d’invitation et signature
Invitation
600 px, tables imbriquées, styles en ligne, six couleurs en dur. En-tête brume : Outlook, qui ignore l’image de fond, l’affiche unie et lisible. Jamais de bandeau nuit.
Signature
Pastille, nom, fonction, téléphone et klimat.io. Arial en repli : la mise en page tient avec elle.
Documents et exports
Document A4
Couverture en brume unie, logo couleur et titre ; rien de noir en aplat, la page se photocopie proprement. Marges de 18 mm, titres de 22 pt, texte de 10,5 pt, tableaux à en-tête brume, cellules de score aux couleurs de zone. Dans un export Excel, chaque feuille qui sort des scores écrit ses zéros (WithStrictNullComparison).
Réseaux et icônes
Icônes de site
16
32
Apple 180
Masquable 512
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#009f7f">Une voix experte, bienveillante, concrète.
Vouvoiement. On explique comment c’est calculé, qui voit quoi et ce qu’on en fait. Une question du catalogue se cite telle quelle, avec sa thématique en source.
Mon responsable reconnaît les efforts que je déploie pour réaliser mon travail
Question Klimat : Reconnaissance
- Capitalisation de phrase partout, pas de capitales espacées.
- Titre du site ou d’une diapositive : une affirmation, point final compris. Titre d’interface : un nom, sans point.
- « campagne » côté vente, « sondage » côté administration, « questionnaire » côté répondant.
- Tout chiffre fictif porte « Données d’exemple », tout chiffre réel sa source et sa date.
- Pas d’emoji, pas de point d’exclamation dans l’interface, pas de « Oups ».
| Écrivez | Évitez |
|---|---|
| Aucun résultat n’est affiché sous un seuil minimal de répondants, fixé avec vous. | Vos réponses sont 100 % anonymes. |
| La charge de travail recule dans quatre unités sur six. | Résultats |
| Plan d’actions | Plan d’Actions |
| Le lien a expiré. Demandez une nouvelle invitation à votre administrateur. | Oups ! Une erreur est survenue. |
| tableau de bord, qualité de vie et des conditions de travail | dashboard, QVT 2.0 |
| « 32 % », « 68/100 », « 12 octobre 2026 », « 9 h 30 » | 32%, 68 / 100, 12/10/26, 9h30 |
Tout le kit, en un fichier.
Logos, icônes, couleurs, police, pictogrammes, champ de pastilles, gabarits et photographies créditées. Tout se reconstruit depuis ce dossier par python3 outils/construire.py.
{{KIT}}