Aller au contenu
20h42 Parler de votre projet

Document interne — v1.0

Charte graphique

Une règle tient tout le reste : le kaki marque le chemin qu’on a choisi de prendre, le vert vif marque l’endroit où l’on arrive. Partout ailleurs, la page reste calme.

01

Le concept

20h42 est une heure qui n’est pas ronde. C’est tout le concept. Personne n’annonce 20h42 : on annonce 20h30, ou 21h. Une heure précise et décalée signifie que quelqu’un a vraiment regardé, et qu’il ne s’est pas contenté d’arrondir.

L’image directrice n’est pas le détour, c’est le choix du chemin. Plusieurs routes mènent au même endroit ; certaines sont bloquées, d’autres coûtent trop cher, l’une passe. Le travail de l’agence est de les étudier toutes, puis d’en recommander une seule et de l’assumer. Il arrive souvent que ce soit la plus directe : la marque ne valorise jamais le détour pour lui-même.

Trois principes de design en découlent. Le premier : toute forme part d’un point A et arrive à un point B — les tracés sont des trajets, jamais des ornements. Le deuxième : on montre les options écartées en trait fin, la retenue en trait plein ; la valeur est dans l’écart entre les deux. Le troisième : deux accents, deux rôles — le kaki porte les décisions et le texte, le vert vif ponctue les points d’arrivée. Ils ne se remplacent jamais.

Registre de marque : précis, sobre, sûr de lui. On donne un avis, on ne présente pas un catalogue. L’humour existe, il est sec et il tient en une ligne.

02

Le logo

Le symbole est un « h » dont l’épaule est détachée du fût. La lettre reste parfaitement lisible, mais le trait ne prend pas la liaison attendue : il marque une hésitation, le temps de vérifier qu’il n’existe pas mieux. C’est la lettre au centre du nom, et c’est la méthode en un glyphe.

20h42

Version principale — sur Aube ou Blanc

20h42

Version inversée — sur Nuit

  • Le « h » du logotype est toujours en Kaki et d’une graisse plus légère que les chiffres. C’est le pivot du nom : il doit se voir.
  • Chiffres en Archivo largeur 112 (élargie), graisse 700. Le logotype ne se compose dans aucune autre fonte.
  • Zone de protection : une demi-hauteur de symbole tout autour du bloc.
  • Taille minimale : 20 px de haut pour le symbole, 90 px de large pour le logotype.
  • Le nom s’écrit « 20h42 » — pas « 20H42 », pas « 20:42 » en communication. Les deux-points sont réservés aux horodatages internes du site.
  • Interdits : recoller l’épaule du « h », incliner le symbole, l’étirer, le poser sur une photo chargée, ou lui ajouter une ombre.

03

Couleurs

Un gris chaud très pâle en fond, un gris presque noir pour le texte, un vert kaki pour tout ce qui relève d’une décision — liens, boutons, chemin recommandé — et un vert vif, beaucoup plus clair, pour les points d’arrivée. Deux verts de la même famille, à deux distances différentes.

Argile

#F3F4EF

--c-argile

Fond général du site

Blanc

#FFFFFF

--c-blanc

Surfaces posées : cartes, formulaires

Encre

#1E201C

--c-encre

Texte principal, sections sombres

14,9:1 sur Argile

Fumée

#5F6459

--c-fumee

Texte secondaire, horodatages

5,5:1 sur Argile

Trait

#E0E2D9

--c-trait

Filets, bordures, séparateurs

Voile

#E4E9DE

--c-voile

Aplats de mise en avant

Kaki

#45543F

--c-kaki

Couleur de marque : liens, boutons, tracés

7,3:1 sur Argile · 8,1:1 avec Blanc

Kaki clair

#A8B79E

--c-kaki-clair

Kaki sur fond Encre

7,8:1 sur Encre

Vert vif

#55951A

--c-vif

Ponctuation sur fond clair : arrivée, jauge, chiffre clé

3,3:1 sur Argile — graphique et grand texte

Vert vif clair

#9CE93F

--c-vif-clair

Ponctuation sur fond Encre

11,1:1 sur Encre

Deux accents, deux rôles, jamais interchangeables. Le kaki est assez sombre pour porter du texte : liens dans un paragraphe, libellés, fonds de boutons avec du blanc dessus. Le vert vif plafonne à 3,3:1 sur fond Argile — il est réservé aux éléments graphiques et au texte de plus de 24 px : points d’arrivée, jauge d’avancement, tirets d’horodatage. Sur fond Encre, c’est le vert vif clair qui prend le relais. Répartition indicative : Argile 70 %, Encre 16 %, Blanc 8 %, Voile 4 %, Kaki 2 %, Vert vif moins de 1 %.

04

Typographie

Archivo

Titrage

L’itinéraire bis

Variable, axe de largeur 62–125. Titres en largeur 92 (légèrement resserrée), logotype en largeur 112 (élargie). Une seule famille, deux voix : c’est le principe.

Manrope

Texte courant

On a le droit de ne pas être d’accord avec vous.

Poids 400 pour le corps, 700 pour les accroches et les boutons. Interligne 1,62, largeur de ligne max. 62 signes.

DM Mono

Horodatage

20:42

Heures, étiquettes, livrables, mentions. C’est la fonte qui porte le nom de la marque : elle ne sert jamais à écrire une phrase entière.

Échelle

Mega — 42 à 90 px

XXL — 32 à 53 px

XL — 25 à 34 px

L — 18 à 22 px

M — 17 px, texte courant

S — 15 px, texte secondaire

XS — 12 PX, HORODATAGE

05

Grille & espacements

  • Largeur utile : 1 184 px maximum, gouttières de 20 à 56 px selon l’écran.
  • Unité de base : 4 px. Toutes les valeurs d’espacement en sont des multiples (4, 8, 12, 16, 24, 32, 48, 64, 96).
  • Respiration entre sections : 72 à 136 px, avec un filet 1 px en Trait.
  • Rayons : 3 px sur les boutons et les champs, 10 px sur les cartes et les fenêtres. Rien d’autre.
  • Ombres : une seule, très basse et très diffuse, réservée à la fenêtre d’aperçu d’un site client. Partout ailleurs : filets et aplats.

12 colonnes de référence — un repère, pas une contrainte.

06

Composants

Boutons

Action principaleAction secondaire

Un seul bouton plein par section. Le libellé nomme l’action : « Parler de votre projet », jamais « En savoir plus ».

Horodatage

Le forfaitRéalisations

Ouvre chaque section. Le tiret vert vif est le seul rappel de marque autorisé à cet endroit.

Le motif 42

42 € / mois42 minutes

Le nombre n’apparaît que sur des engagements commerciaux, et à ces deux endroits seulement : l’abonnement mensuel et la durée du premier échange. Le prix du site — 790 € TTC — n’en fait plus partie : c’est un prix de marché, il doit se lire avant de se remarquer. Ailleurs — étapes de méthode, délais, numérotation — on emploie des nombres ordinaires. Le clin d’œil ne fonctionne que s’il reste rare : deux occurrences suffisent.

Livrables

Audit d’existantDonnées structuréesFiche Google

Fond Halo, texte Nuit en DM Mono 12 px. Trois maximum par prestation.

Le tracé des chemins

Motif propriétaire. Une occurrence par page, toujours de gauche à droite. Les chemins écartés restent visibles en trait fin — c’est le principe : on montre qu’on a regardé ailleurs. Les jalons sur le chemin retenu marquent les points de décision, l’arrivée est toujours en vert vif.

07

Ton de voix

Phrases courtes, verbes actifs, chiffres quand on en a. On dit ce qu’on fait, pas ce qu’on est. Vouvoiement toujours.

L’humour est autorisé à trois conditions : il est sec, il tient en une ligne, et il arrive après l’information — jamais à sa place. Une réponse d’un seul mot vaut mieux qu’un paragraphe malin. Aucun trait d’humour dans un message d’erreur de formulaire ; la page 404 fait exception, c’est la seule.

On écrit

On n’écrit pas

Une refonte complète est parfois la mauvaise réponse à une bonne question.

Nous proposons des solutions digitales sur-mesure à 360°.

Vous êtes une grosse agence ? Non.

Nous sommes une équipe passionnée et à taille humaine.

Réponse sous deux jours ouvrés.

Nous reviendrons vers vous dans les meilleurs délais.

Cette adresse email n’existe pas. Vérifiez la saisie.

Oups ! Une erreur est survenue 😅