Studio FCharte graphique

01 · Fondations

La marque se voit,
la charte la tient debout.

Studio F construit la marque comme on construit un bâtiment : avec un système qui dure. Cette charte est sa structure interne. Pas un PDF mort, une démonstration vivante. Tout ce qui suit est utilisable, copiable, transposable.

Principe 01

Le blanc qui respire.

L'espace n'est pas un défaut de remplissage. C'est le matériau qui fait tenir le reste. Pas d'horror vacui chez Studio F.

Principe 02

Contraint, donc libre.

Trois couleurs, deux familles typographiques, une grille. Le système est resserré pour que la création puisse aller loin sans dater.

Principe 03

Jamais à la mode.

Aucun cliché créatif, aucun trope IA, aucun effet daté en six mois. La marque vise dix ans, pas le prochain trimestre.

Scrollez, le système s'assemble

03 · Couleurs

Trois couleurs.
Pas une de plus.

Studio Noir tient l'éditorial. Studio Blanc fait respirer. Studio Orange réveille au moment juste. Aucune surcharge, aucune palette fluo. Une palette qui dure dix ans sans dater.

Ratio dominante

70 / 25 / 5

70% blanc, 25% noir, 5% orange. Tout écart vers l'accent doit être justifié par une intention.

Accent en texte

Jamais > 1 ligne

L'orange souligne. Il ne remplit pas. En courant, on perd le contraste AA et l'effet de marque.

Fond

#FAFAFA, pas #FFF

Le blanc pur fatigue l'œil sur les longues lectures. Studio Blanc est cassé de 2%, juste assez pour reposer.

Palette graduée

Studio Orange,
de 50 à 900.

Pour les états (hover, focus, pressed), les pastilles, les nuances éditoriales. Le 500 reste la référence ; les autres sont des outils, pas des choix de marque.

Neutres

Les gris
qui structurent.

Bordures, métadonnées, placeholders. Sept teintes, pas plus : contraindre les choix évite la dérive en cinquante nuances.

Contraste

Combinaisons validées AA.

Ratios calculés selon WCAG 2.1. AA texte courant ≥ 4.5, AA grand texte ≥ 3.0. Au-dessous : usage décoratif uniquement.

Noir sur Blanc

Aa

18.97 · ✓ AAA

Blanc sur Noir

Aa

18.97 · ✓ AAA

Orange sur Blanc

Aa

3.63 · · AA large

Blanc sur Orange

Aa

3.63 · · AA large

Noir sur Orange

Aa

5.23 · ✓ AA

04 · Typographie

Deux familles.
Un système.

Space Grotesk porte tout : titres, interface, courant. Instrument Serif italique apporte la chair éditoriale aux moments forts. La mono reste pour les indices techniques. Aucune fonte décorative, aucun mélange visuel.

displayspace-grotesk

Studio F

AaBbCc 0123 · é à ô ù ç

Space Grotesk

Famille principale. Titres, courant, interface. Dessine la voix par défaut de la marque. Géométrique, lisible, contemporaine.

editorialinstrument-serif

Direction artistique

AaBbCc 0123 · é à ô ù ç

Instrument Serif

Famille éditoriale. Réservée aux hero italics, citations longues, accroches DA. Apporte la chair, jamais en courant.

monomono

01 · #D4612C

AaBbCc 0123 · é à ô ù ç

Mono système

Labels techniques, codes HEX, métadonnées éditoriales (numéros de section, indices). Pas dans le texte courant.

Échelle

Neuf paliers.
Tout le système y rentre.

Display 1 réservé au hero éditorial. Body et Small portent 95% des contenus. La mono pour les indices et les codes, jamais pour la lecture longue.

Display 1

600 · space-grotesk

Studio F construit la marque.

5.5rem

Display 2

600 · space-grotesk

Studio F construit la marque.

4rem

Titre 1

600 · space-grotesk

Studio F construit la marque.

2.75rem

Titre 2

500 · space-grotesk

Studio F construit la marque.

1.875rem

Titre 3

500 · space-grotesk

Studio F construit la marque.

1.375rem

Lead

400 · space-grotesk

Studio F construit la marque.

1.25rem

Body

400 · space-grotesk

Studio F construit la marque.

1rem

Small

400 · space-grotesk

Studio F construit la marque.

0.875rem

Caption mono

500 · mono

Studio F construit la marque.

0.75rem

Juste

  • · Space Grotesk pour le courant et les titres techniques.
  • · Instrument Serif en italique pour un mot, une accroche, jamais un paragraphe.
  • · Mono système pour les indices, les codes, les labels majuscule.
  • · Hiérarchie stable : un seul Display 1 par page.
  • · Tracking négatif sur les gros titres, neutre en courant.

À éviter

  • · Mélanger plus de deux familles dans la même mise en page.
  • · Instrument Serif en non-italique : on perd la chair éditoriale.
  • · Mono dans un paragraphe de texte courant.
  • · Multiplier les graisses (600 / 700 / 800 / 900) au sein d'un même bloc.
  • · Effets décoratifs (outline, ombre, dégradé). Jamais.

05 · Grille & espacements

Douze colonnes.
Une unité.

Grille 12 colonnes, gouttière 24px, container 1280px maximum. Échelle d'espacement basée sur 4px. Tout ce qui s'affiche chez Studio F est aligné sur cette ossature, écran et papier confondus.

Grille 12 colonnes, gouttière 24px

01
02
03
04
05
06
07
08
09
10
11
12
Page courante12 / 12
Article éditorial2 / 8 / 2
Galerie4 / 4 / 4

Espacements

Onze paliers, base 4 pixels.

Chaque marge, gap, padding pioche dans cette échelle. Pas de valeur intermédiaire. La contrainte tient la cohérence visuelle à travers toutes les pages.

space-0.5
2px · 0.125rem
space-1
4px · 0.25rem
space-2
8px · 0.5rem
space-3
12px · 0.75rem
space-4
16px · 1rem
space-6
24px · 1.5rem
space-8
32px · 2rem
space-12
48px · 3rem
space-16
64px · 4rem
space-24
96px · 6rem
space-32
128px · 8rem

06 · Iconographie

Ligne fine.
Rien de plus.

Une seule famille : ligne 1.5pt, terminaisons arrondies, grille 24×24. Si une icône ne se lit pas à 24px en ligne fine, elle n'entre pas dans le système. Pas d'emojis, pas de pictogrammes pleins, pas de libraries tendance.

arrowDirection
plusAjout
checkValidé
crossRefus
circleÉtape
squareModule
externalExterne
minusRetrait
searchRecherche
userPersonne
mailMessage
lockSécurité
calendarAgenda
clockDélai
downloadTélécharger
uploadEnvoyer
menuMenu
filterFiltre
docDocument
linkLien
heartFavori
editÉditer
infoInformation

Construction

Grille 24 × 24, padding 2px.

Chaque icône habite un carré de 24px de côté. Une marge intérieure de 2px préserve la lisibilité quand l'icône est accolée à du texte ou à un bord.

Juste

  • · Ligne 1.5pt, ronde aux deux extrémités.
  • · Géométrie minimale : trait, point, arc.
  • · Couleur héritée du texte courant (currentColor).
  • · Tailles 16 / 20 / 24 / 32 px. Pas d'intermédiaire.

À éviter

  • · Icônes pleines, dégradés, ombres.
  • · Emojis dans un texte courant ou un titre.
  • · Libraries génériques (Material, Font Awesome) en l'état.
  • · Détails décoratifs qui sautent en-dessous de 24px.

07 · Direction image

Lumière vraie.
Cadrage net.

Studio F photographie ses sujets dans leur environnement, pas dans un studio sans âme. Lumière naturelle, contraste mesuré, respiration dans le cadre. La photo doit faire sentir la marque, pas la prouver.

01

Lumière naturelle, jamais frontale

On laisse la fenêtre faire le travail. La lumière vient toujours d'un côté, jamais en plein visage. Les ombres modèlent, ne disparaissent pas.

02

Cadrage 1/3, 2/3

Le sujet occupe un tiers du cadre. Les deux tiers restants donnent à respirer et laissent voir l'environnement. Pas de zoom serré sans raison.

03

Désaturé, jamais terne

Saturation baissée de 10 à 20%, pas plus. On garde la couleur de la peau, du bois, du tissu. Pas de noir et blanc systématique, pas de filtre.

04

Geste capturé, pas posé

On photographie le sujet pendant qu'il fait, pas figé en train de regarder l'objectif. Le résultat sent le réel, pas la séance.

Juste

  • · Lumière du jour, pas de flash frontal.
  • · Sujet dans son contexte de travail (atelier, bureau, terrain).
  • · Cadrage avec respiration : 1/3 du sujet, 2/3 d'espace.
  • · Couleurs désaturées, pas de filtre tendance.
  • · Mouvement réel : geste capturé, pas posé.

À éviter

  • · Photos de stock, mains sur clavier génériques.
  • · Trompe-l'œil, fonds artificiels, effets IA.
  • · Hyper-saturation, contraste agressif type beauty pub.
  • · Sujet centré et statique, posé devant un fond uni.
  • · Filtres saisonniers (lo-fi, VHS, néon) qui dateront.

08 · Ton & voix

Direct.
Jamais sec.

Studio F vouvoie ses clients ETI sans rigidité. Phrases courtes, verbes d'action, zéro jargon. On dit ce qu'on pense, on évite ce qu'on ne tient pas. Pas de superlatifs faciles, pas de positionnement de gourou.

Registre

Vouvoiement, sans raideur.

On vouvoie les clients, on tutoie en interne. Le vous est respectueux, pas distant. Ton de pair, pas de prestataire.

Rythme

Phrase courte. Verbe d'action.

Sujet, verbe, complément. Pas de subordonnées en cascade. Un point quand le sens est livré, pas avant.

Preuve

Une donnée vaut dix adjectifs.

Plutôt que 'leader', écrire '130 projets sur 15 ans'. Plutôt que 'rapide', donner le délai. Le chiffre tranche.

Réécriture

Avant / après Studio F.

Avant

Nous sommes ravis de vous accompagner dans la transformation digitale de votre marque grâce à notre approche unique et innovante.

Studio F

On vous accompagne pour remettre votre marque au niveau de ce que vous êtes devenu.

Avant

Studio F est une agence créative de premier plan qui propose une large gamme de services premium en matière de branding.

Studio F

Studio F est un studio de marque. 130 projets, 15 ans, à Lille.

Avant

Notre équipe d'experts saura répondre à l'ensemble de vos problématiques business avec créativité et excellence.

Studio F

Vous nous dites le problème. On vous livre la marque, le site.

Lexique à éviter

Ces mots vident la phrase. Studio F les supprime ou les remplace par du concret.

  • leader
  • premium
  • unique
  • innovant
  • passionné
  • synergies
  • ADN
  • écosystème
  • expertise
  • excellence
  • solution
  • ravi(e) de
  • n'hésitez pas à

Mots qui portent

Verbes francs, noms précis. Ils décrivent une action ou un livrable concret.

  • livrer
  • trancher
  • construire
  • remettre au niveau
  • structurer
  • tenir debout
  • armer
  • outiller
  • cadrer
  • documenter

09 · Applications

Le système
en contexte.

Carte de visite, signature mail, slide d'ouverture, réseaux, favicon. Le système tient à toutes les échelles, du timbre-poste au format A0.

Carte de visite · 85 × 55 mm

Studio F

Flavien Caffier

Directeur artistique

studiof.pro · flavien@studiof.pro

Signature mail

Flavien Caffier

Studio F · studio créatif

studiof.pro

Lille, Hauts-de-France

Slide d'ouverture · 16/9

Studio FPrésentation · 2026

Cabinet Dupuis

La marque que vous méritez.

01 / 12

Favicon · 16 / 32 / 64 px

16px
32px
64px

Bandeau LinkedIn · 1584 × 396 px

Studio F · Lille

La marque pour ce que vous êtes devenu.

studiof.pro

10 · Vous parler

Cette charte
vous a parlé ?

Laissez vos coordonnées. On vous rappelle pour comprendre votre besoin et voir comment poser un système comme celui-ci sur votre marque.

Réponse sous 24h ouvrées. Aucun spam, aucune liste.

Charte graphique Studio F · Version vivante

Dernière mise à jour automatique au build. Tous les codes sont copiables au clic.