Low Tide, la charte graphique.
Un template de charte graphique pour un bar à huîtres, construit dans Figma.
- Type
- Template
- Marque
- Bar à huîtres fictif
- Contenu
- Logo · Couleurs · Typographie · Grille · Boutons
- Outil
- Figma
Ce que contient la charte.
Low Tide est un bar à huîtres fictif. 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 perle qui est aussi une lune, posée sur trois vagues à marée basse. Low Tide s’écrit toujours en deux mots, avec « Oyster Bar » en dessous.
Les couleurs.
Cinq couleurs prises sur la plage à marée basse : l’eau profonde, l’écume, le sable mouillé et le varech. Le corail est le seul accent chaud, comme la perle.
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 : dix combinaisons, de 4,9:1 à 14,8:1.
La typographie.
DM Serif Display pour les titres, DM 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, texte marine sur le corail, jamais blanc. 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.