Pain Perdu, la charte graphique.
Un template de charte graphique pour une boulangerie de quartier, construit dans Figma.
- Type
- Template
- Marque
- Boulangerie fictive
- Contenu
- Logo · Couleurs · Typographie · Grille · Boutons
- Outil
- Figma
Ce que contient la charte.
Pain Perdu est une boulangerie de quartier fictive. La charte tient en six planches : logo, couleurs, combinaisons AA, typographie, grille et espacement et boutons.
Dans Figma, les couleurs et les espacements sont des variables, les textes sont des styles, et les boutons sont des composants. Les planches sont en anglais.
Le logo.
Une miche avec trois coups de lame, comme on la marque avant d’enfourner. Le nom s’écrit toujours en deux mots.
Les couleurs.
Huit couleurs tirées du four : la croûte, la mie, le miel, le cacao, avec un bleu torchon pour casser la chaleur. Chacune a son rôle, du fond de page au bouton.
Lisible, partout.
Chaque paire de texte et de fond a été mesurée. Seules celles qui passent le seuil AA, 4,5 pour 1, sont gardées : douze combinaisons, de 4,7:1 à 16:1.
La typographie.
Bricolage Grotesque pour les titres, Instrument Sans pour le texte courant. Cinq niveaux de titres, de 22 à 64 px, et quatre tailles de texte, de 12 à 20 px.
La grille et l’espacement.
Une zone de contenu de 1100 px : 4 colonnes sur mobile, 8 sur tablette, 12 sur ordinateur. L’espacement repose sur une unité de 4 px, de 4 à 96 px.
Les boutons.
48 px de haut, coins en pilule. Quatre états pour le bouton principal, trois tailles, et une version pleine largeur de 56 px sur mobile.
Outils utilisés
- Figma
Un projet de design ? Parlons‑en.
Le plus simple, c’est un courriel. Dites-moi ce que vous vendez et où vous en êtes, et on verra ensemble par où commencer.
Choisissez un sujet : le courriel s’ouvre avec un début de message déjà écrit.