Charte graphique · B Électrique

Typographie et composants

Une seule famille, Manrope, de Google Fonts : lisible, gratuite, différente de celle de MEG. Quatre graisses suffisent pour tout le site.

01

Manrope, une famille pour tout

Aa
Manrope
Google Fonts, licence libre OFL. Formes ouvertes et chiffres nets : lisible dès 14 px. Une seule famille pour tout le site.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 € % « » ’ é è à ç ô ï œ
Quatre graisses
FranchiseMoyen 500Texte courant
FranchiseDemi-gras 600Petit texte, liens
FranchiseGras 700Titre 3, boutons
FranchiseExtra-gras 800Titres, logo, chiffres
02

L’échelle des textes

Tailles sur ordinateur, puis sur mobile. Les titres sont en extra-gras, jamais en dégradé.

Grand titre800 · 72 / 40 px · interligne 1,05 · −0,03 em
Trouvez la franchise
Titre 1800 · 56 / 32 px · interligne 1,1 · −0,025 em
Franchises à petit apport
Titre 2800 · 32 / 24 px · interligne 1,2 · −0,02 em
Les chiffres clés du réseau
Titre 3700 · 22 / 19 px · interligne 1,3
Formation et accompagnement
Texte500 · 17 / 16 px · interligne 1,6
Chaque chiffre est daté et relié à sa source publique. Le réseau peut demander une rectification à tout moment.
Petit texte600 · 14 px · interligne 1,5 · ardoise
Mis à jour le [date] · source : [source]
Surtitre700 · 13 px · capitales · +0,1 em · violet 700
Le média de la franchise
Chiffre clé800 · 40 / 28 px · chiffres tabulaires · bleu lien
0123456789 €
Lien600 · taille du texte · souligné · bleu lien
Voir la source
03

Le texte en situation

Même article, en clair et en nuit violette.

Guide · Avant de signer
Lire le document d’information précontractuel
Le franchiseur remet ce document au moins vingt jours avant la signature du contrat. Il présente le réseau, son marché, ses comptes et les conditions du contrat.
Comparez les chiffres annoncés avec ceux de la fiche, puis consultez les sources avant votre premier rendez-vous.
Mis à jour le [date] · lecture [N] min
Guide · Avant de signer
Lire le document d’information précontractuel
Le franchiseur remet ce document au moins vingt jours avant la signature du contrat. Il présente le réseau, son marché, ses comptes et les conditions du contrat.
Comparez les chiffres annoncés avec ceux de la fiche, puis consultez les sources avant votre premier rendez-vous.
Mis à jour le [date] · lecture [N] min
04

Composants, version claire

Arrondis de 14 px pour les boutons et les champs, 20 px pour les cartes.

Boutons
Recevoir la documentationÊtre rappeléVoir la fiche →
CandidaterNormalCandidaterSurvolCandidaterFocusCandidaterDésactivé
Puces et étiquettes
✓ Sans localMoins de 20 000 €Reconversion
SponsoriséChiffre sourcé · [date]Nouveau
Champs
E-mail vous@exemple.fr
E-mail vous@exemple Saisissez une adresse e-mail valide.
Consentement et focus
Téléphone 06 00 00 00 00
✓J’accepte que ma demande soit transmise à [Enseigne], et à elle seule.
Jauge et message
Fiche complétée[N] %
✓Candidature envoyée à [Enseigne].
Carte de fiche
[Logo]
[Enseigne]Services à la personne · depuis [année]
Sponsorisé
Apport[montant] €
Investissement[montant] €
Unités[N]
Chiffres sourcés · [date]Voir la fiche →
Onglets de la fiche
Le conceptLes chiffresImplantations
Règle
Seuls le bouton principal et la jauge sont en dégradé. Tout le reste est uni.
05

Composants, version sombre

Boutons
Recevoir la documentationÊtre rappeléVoir la fiche →
Puces et étiquettes
✓ Sans localMoins de 20 000 €Reconversion
SponsoriséChiffre sourcé · [date]Nouveau
Champs
E-mail vous@exemple.fr
E-mail vous@exemple Saisissez une adresse e-mail valide.
Consentement et focus
Téléphone 06 00 00 00 00
✓J’accepte que ma demande soit transmise à [Enseigne], et à elle seule.
Jauge et message
Fiche complétée[N] %
✓Candidature envoyée à [Enseigne].
Carte de fiche
[Logo]
[Enseigne]Services à la personne · depuis [année]
Sponsorisé
Apport[montant] €
Investissement[montant] €
Unités[N]
Chiffres sourcés · [date]Voir la fiche →
Onglets de la fiche
Le conceptLes chiffresImplantations
Règle
En sombre, les liens et chiffres passent en lilas ; les puces sur #3D2C80, texte blanc.
06

Formes et espacements

Arrondis
8 pxÉtiquettes
14 pxBoutons, champs
20 pxCartes
28 pxGrandes zones, icône
999 pxPuces, jauges
Espacements
4
8
12
16
24
32
48
72
Ombre des cartes
franchıplace
0 1px 2px / 0 12px 32px · nuit violette 6 % et 10 %
Une seule ombre, au survol des cartes. Jamais d’ombre grise sur le logo.