Charte graphique Strawberry,
cas & usage.
Quatorze couleurs, sept logos, quatre polices. Mais une charte ne sert à rien tant qu'on n'a pas vu ce qu'elle donne : cette page montre nos vrais assets — annonces, posts, bannières — et la règle qui les tient tous ensemble.
01 — Couleurs
Le nuancier.
Trois gammes, et un ordre de priorité qui ne bouge pas : la signature porte tout, l'arc-en-ciel ne sort que pour les moments qui le méritent, les secondaires ne font que du soutien. Cliquez une nuance pour copier son code.
Gamme signature — 4 nuances
Un écart à trancher. La charte déclare le Rouge Fraise à #dc3434, mais le site est bâti sur #db3535 — deux rouges à un cheveu l'un de l'autre, invisibles à l'œil, bien réels dans le code. Cette page affiche les valeurs de la charte. Tant que l'un des deux n'a pas été désigné comme faisant foi, l'écart se propage à chaque nouvel asset.
Gamme arc-en-ciel — 6 nuances
Gamme secondaire — 4 nuances
02 — Le principe
La règle des deux mots.
C'est le geste qui revient sur presque tous nos visuels depuis le début, et personne ne l'avait jamais écrit : un titre se coupe en deux, la première moitié prend une couleur, la seconde en prend une autre. Rien d'autre. C'est ça, la signature Strawberry.
STRAWBERRY CREW
Votre nouveau serveur créatif ! Ramène ta fraise.
Vert Fraise puis Rouge Fraise. Sur fond sombre, le premier mot peut passer en blanc — le second reste rouge.
On coupe là où l'information bascule : /WARP · ARBRE, SERVEUR DÉSORMAIS EN · 1.20.4. Le mot coloré est celui qu'on retient.
Gris foncé, jamais coloré, jamais plus d'une phrase. Il explique, il ne crie pas.
Le screenshot passe sous un voile blanc à ~90 %. Il donne la texture et le lieu, jamais le contraste.
03 — Typographie
Quatre polices, chacune à sa place.
Toutes sans empattement, toutes gratuites. La règle est simple : Poppins parle fort, Open Sans parle longtemps.
Poppins
Titres, navigation, boutons, assets
Ramène ta fraise.
Regular 400 · Medium 500 · SemiBold 600 · Bold 700
Exo 2
Hero d'accueil uniquement
Votre nouveau serveur créatif
Light 300 · Regular 400 · SemiBold 600 · Bold 700
Montserrat
Sous-titres — à la charte, pas dans le code
Serveur Minecraft créatif
SemiBold 600
Open Sans
Corps de texte, paragraphes, listes
Un serveur créatif francophone où l'on construit des villes entières, bloc par bloc, depuis 2021.
Regular 400 · SemiBold 600
Deux points à trancher. Montserrat est téléchargée sur les neuf pages du site mais n'est appelée nulle part dans la feuille de style : soit on lui rend les sous-titres, soit on la retire du chargement. Et Clear Sans, que l'ancienne charte donnait pour la police d'interface, n'a jamais été chargée — son spécimen s'affichait en Open Sans. Elle est retirée d'ici en attendant d'être acquise, ou abandonnée.
04 — Logos
Un bloc de fraise, sept déclinaisons.
Le bloc isométrique est la marque. On choisit sa version selon le fond, jamais selon l'envie — et on ne la redessine pas.
Les quatre versions officielles
Les trois versions particulières
Zone de protection
- Une pastille de marge, minimum. La hauteur de la tache verte du logo donne la marge à laisser de chaque côté. Rien n'entre dans ce cadre : ni texte, ni bord de visuel, ni autre logo.
- 34 px de large au plus petit. C'est la taille dans la pilule du header. En dessous, les pépites blanches se bouchent et le bloc devient une tache rouge.
- Le PNG est carré et transparent. Le fichier couleur fait 8334 × 8334 : on le réduit, on ne le rééchantillonne jamais vers le haut.
- Pas de fond ajouté. Si le logo ne tient pas sur le fond, c'est la version du logo qu'on change — blanc ou noir — pas le fond.
05 — Cas & usage
Ce que ça donne en vrai.
Dix-neuf assets sortis de nos posts Discord, de nos annonces et de nos fiches de serveur. Ce sont les gabarits : on repart de ceux-là plutôt que de recommencer une page blanche.
Annonces — 1280 × 720 et 1920 × 991
Le gabarit mère : voile blanc, deux mots colorés, sous-titre gris, liens en pied. Tous les autres en descendent.
Le numéro écrase le reste, et le dernier chiffre passe en vert. La règle des deux mots appliquée à un nombre.
Blanc puis rouge sur un décor lavé, avec une ombre portée douce pour décoller le titre du ciel.
Un seul mot en vert, et le rouge réservé au terme qui change tout : whitelist. Le rouge est un surligneur.
Cartes sur charbon — 1280 × 720
Quand il n'y a pas de screenshot à montrer, le charbon remplace le voile. Vert, rouge, une ligne. Rien de plus.
Deux logos côte à côte, à la même hauteur optique, et le « x » en toutes lettres dessous.
Posts d'information — 1280 × 720
La coupe en biais oppose deux mondes : les joueurs sur le clair, le staff sur le charbon. Le seul endroit où la diagonale est admise.
Les pilules reprennent les couleurs de grade du jeu, pas celles de la charte. C'est voulu : elles viennent d'in-game.
Filets noirs pleine largeur pour séparer, vert pour ce qu'on attend, rouge pour ce qui compte. Centré du haut en bas.
La commande en noir, son effet en couleur. Le logo signe en bas, tout petit — il n'a pas besoin d'être grand.
Vignettes de lieux — 1280 × 720
Ici le screenshot garde toutes ses couleurs : c'est le sujet. Le bandeau blanc l'annonce, en noir, sans fioriture.
Même bandeau, même hauteur, même graisse. C'est la répétition qui fait la collection.
Aucun logo, aucune couleur de marque : le build parle seul. Le seul cas où la charte se tait.
Titres découpés & fond de travail
Script vert par-dessus une capitale rouge. Un titre d'accueil, à poser tel quel — on ne le retape pas.
La toile de départ : un build déjà passé sous voile, prêt à recevoir deux mots. C'est par là qu'on commence.
Bannières de listing
Le logo, une diagonale de skyline, le nom et la version. Format des annuaires de serveurs.
Même contenu, resserré. Les badges de loaders passent à droite pour tenir dans la hauteur.
À cette taille il ne reste que l'essentiel : deux blocs en serre-livres, le nom, le badge. Rien d'autre n'y survit.
La carte d'identité du serveur sur Modrinth et Planet Minecraft : nom, nature, version, disponibilité, loaders.
06 — Les garde-fous
Ce qui tient, ce qui casse.
Tiré des assets ci-dessus, et des ratés qu'on a corrigés en route.
À faire
- Laver le screenshot sous un voile blanc avant d'y poser du texte.
- Couper le titre en deux : un mot vert ou blanc, un mot rouge.
- Garder le sous-titre en gris, sur une seule ligne.
- Utiliser le charbon #292929 quand il n'y a pas d'image à montrer.
- Reprendre un gabarit existant plutôt que d'ouvrir une page blanche.
- Signer petit : le logo n'a jamais besoin d'être gros.
À ne pas faire
- Poser du texte sur un screenshot non lavé — il devient illisible en trois secondes.
- Mélanger Rouge Fraise #dc3434 et Rouge arc-en-ciel #e40303 dans le même visuel.
- Sortir l'arc-en-ciel pour décorer : il a un sens, il n'est pas une palette.
- Mettre trois couleurs dans un titre. Deux, c'est la règle.
- Descendre le logo sous 34 px, ou l'agrandir au-delà de son fichier.
- Ajouter une ombre, un contour ou un dégradé « pour faire joli ».
Le dossier complet
Tout est dans l'archive.
Les sept logos en pleine résolution, les gabarits d'assets et le nuancier. À garder sous la main avant d'ouvrir Photoshop.