Marque

Charte graphique.

L’apparence et le ton de LFW : le nom, le logo, la couleur, la typographie, et les règles derrière chaque page.

Le nom et le logo.

Toujours LFW. Une adresse de site web seule s’écrit LFW.com. Là où l’entité juridique s’impose, utilisez LFW.com LLC d/b/a LFW. Le logo est en Source Serif 4 Display, graisse 600, le seul endroit où l’empattement apparaît.

Clair Sur fond sombre, comme dans le thème sombre SVG PNG
Presque noir Sur fond blanc ou clair SVG PNG
Icône de profil Blanc sur Bleu LFW, carrée, pour les profils sur les réseaux sociaux et les icônes d’application. Supporte un recadrage en cercle. SVG PNG

Les fichiers du logo sont transparents et recadrés au plus près, avec les lettres vectorisées ; l’icône de profil est un carré plein. Laissez de l’espace autour de la marque, gardez ses proportions, et ne la recolorez ni ne la déformez jamais.

Couleur.

Une palette claire. Le Bleu LFW ouvre et ferme chaque page, et signale les actions entre les deux. Chaque association de texte respecte le contraste AA des WCAG, dans les deux thèmes.

Bleu LFW #1849B8 La couleur de la marque : l’en-tête, les sections de clôture, les boutons principaux, les surtitres et les états actifs.
Bleu profond #123A96 Le Bleu LFW pour les fonds sombres : l’en-tête et les sections de clôture dans le thème sombre, et les états au survol.
Encre #0A0A0A Titres et texte courant sur les pages claires ; le fond du thème sombre.
Gris 600 #555555 Texte secondaire et descriptions.
Gris 500 #666666 Libellés, légendes et petits caractères.
Trait #EBEBEB Contours des cartes et lignes de tableau. L’espace, et non les traits, sépare les éléments.
Surface #FAFAFA Panneaux doux, cartes sur fond blanc et pied de page.
Blanc #FFFFFF La page. LFW.com est clair par défaut.
Vert #0E7D57 Uniquement pour un bon état : vérifications réussies, disponibilité, publié.

Typographie.

Public Sans pour tout ce que l’on lit. Cinq niveaux de titre, de Display à Petit titre, puis le texte courant et le libellé. Chaque titre du site utilise l’un d’eux. Un interlettrage serré aux grandes tailles, aucun aux petites. Rien en dessous de 14px.

DisplayPublic Sans 500 · 72px · 1.02 · −0.045emVotre agence web attitrée.
TitrePublic Sans 500 · 48px · 1.08 · −0.035emCe que couvre le forfait.
Sous-titrePublic Sans 500 · 28px · 1.15 · −0.025emLe formulaire d’inscription tourne en boucle sur iPhone
IntituléPublic Sans 600 · 20px · 1.25 · −0.02emPetites modifications illimitées
Petit titrePublic Sans 600 · 16px · 1.35 · −0.01emHoraires du bureau
Texte courantPublic Sans 400 · 17px · 1.65Nous apportons les modifications que vous envoyez, tenons votre site à jour et le vérifions chaque jour.
LibelléPublic Sans 500 · 14pxDonnées d’exemple pour une organisation fictive.

Éléments d’interface.

Des boutons en pilule, des cartes douces et des fenêtres de produit avec un contour fin et une ombre douce.

Demander un devis Réserver un appel Lien texte Étiquette État

CarteUne surface douce, des coins de 12px, 28px de marge intérieure, avec un contour sur fond blanc.

Fenêtre de produit

De vrais écrans du produit, dessinés à une taille lisible et signalés comme exemples.

Règles de mise en page.

Clair par défautDes pages blanches, avec un thème sombre pour qui le choisit.
Le bleu est un accentBoutons, liens et états actifs. Jamais une bande sur toute la largeur.
Montrer le serviceLes visuels du Portail, de Monitor et du rapport expliquent le travail. Chaque exemple est signalé.
Épuré et facile à parcourirDes titres courts, une ligne sous chacun, puis la preuve.
Le texte sous son titreJamais à côté. Les boutons se placent sous les mots qui les justifient.
De l’espace entre les élémentsLes cartes et les éléments sont séparés par de l’espace, pas par des séparateurs.
Des cartes, pas des tableauxLes options, les délais et les comparaisons sont des cartes. Des tableaux seulement dans les visuels de produit.
L’empattement pour le logo seulementChaque titre et intitulé est en Public Sans.

Ton.

Assuré, précis et simple. Parler comme les personnes qui font le travail.

Positionnement: Des opérations web critiques.
La relation: Votre agence web attitrée.
L’attitude: Aucune charge n’est trop lourde.

Être direct sur ce que nous faisons, ce que cela coûte et ce qui se passe ensuite.
Des faits simples, dans les mots du client. Pas de slogans qui laissent le lecteur se demander ce qu’ils veulent dire.
Prendre au sérieux les demandes ambitieuses, et être honnête sur le périmètre, les compromis et les outils que nous utilisons, y compris l’IA.
Promettre ce que les clients obtiendront, comme les délais de réponse et la pleine propriété de leur site. Ne rien affirmer sur la taille de l’équipe ni sur qui fait le travail, qui changent à mesure que LFW grandit.
Indiquer les heures d’ouverture partout où figure un délai de réponse.
Des paragraphes courts. Quand le contenu est une liste d’étapes, de fonctionnalités ou d’exigences, en faire une vraie liste.
Pas de tirets cadratins. En anglais, l’orthographe américaine. Le domaine s’écrit LFW.com, et en minuscules seulement quand un chemin le suit.
WordPress uniquement comme descripteur, comme dans « sites sous WordPress ».
Un peu d’humour quand il sonne personnel, jamais dans les textes juridiques, de sécurité ou d’achat public.