Charte de marque · v2.0
Identité visuelle

Des systèmes conçus pour votre réalité.

Metz, France56k.studio · 2026
Sommaire

Une marque, un système.

Cette charte fixe l'identité de Studio 56K et sert de référence à toutes nos productions. Chaque règle découle d'un principe : précision, structure, sobriété.

01 — Manifeste

On construit ce qui compte : des outils qu'on vit, pas qu'on regarde.

56K conçoit des systèmes — sites, logiciels métier, identités — pour les entreprises qui veulent des outils utiles, pas des vitrines. Né à Metz. Stratégie, design et tech sous un même toit : on n'a jamais voulu choisir entre comprendre et construire.

/01

Comprendre avant construire

On part du métier, du réel, du terrain. Le brief n'est jamais le problème.

/02

Le système avant l'effet

Une décision structurelle vaut mieux que dix ornements. La cohérence prime.

/03

La précision avant le superflu

Carré, net, plat. Ce qui ne sert pas est retiré. La force vient du vide.

03 — Protection & usages

Ce qu'on ne fait jamais.

Le logo garde toujours sa zone de protection (hauteur du « 5 »), sa couleur et ses proportions. Six erreurs à ne jamais commettre :

×Étiré / déformé
×Recoloré en rose
×Incliné
×Ombré
×Fond à contraste insuffisant
×Sous la taille minimale
04 — Couleurs

Un seul accent : le rose.

Le rose #FFB3FF est la signature : en surface ou en accent, jamais en texte sur fond clair. Le reste est encre, papier et bone.

Pink
#FFB3FF
RGB 255 179 255
CMJN 0 30 0 0
Accent unique, surface
Ink
#121212
RGB 18 18 18
CMJN 0 0 0 93
Texte, bordures, footer
Paper
#FFFFFF
RGB 255 255 255
Fond principal
Bone
#F7F7F7
RGB 247 247 247
Fonds alternés

Proportions d'usage

Paper 60% Ink 30% 10%

Contrastes AAA — ink/paper 18:1 · ink/pink 10:1. Couleurs statut (success/error…) : produit uniquement.

05 — Typographie

Deux polices, un système.

Geist porte tous les titres, le corps, l'UI et le technique (poids léger). Redaction 35 intervient au cas par cas, en accent éditorial à taille modérée — jamais en gros titre. Texte toujours en noir : la hiérarchie vient de la taille et du poids.

Geist
Titres · corps · UI · technique
Display · 500
Des systèmes
H1 · 500 · 48px
Conçus pour votre réalité
H2 · 500 · 36px
Comprendre, puis construire
H3 · 600 · 24px
Un système, pas un site
Body · 400 · 18px
Des outils que l'on vit, pas que l'on regarde — chaque écran gagne sa place.
Technique · 300 · 13px
Légendes, données, méta — petit, léger, noir.
Label · 400 · caps
Studio · Metz · 2026
Redaction 35
Accent éditorial · au cas par cas

« On construit ce qui compte. »

Un serif qu'on pose ponctuellement — une citation, un mot juste — à taille modérée, poids 400. Sa texture est sa signature.

La règle
2 polices, jamais mêlées
  • → Titres, UI, corps, technique : Geist.
  • → Redaction 35 : accent ponctuel, taille modérée, poids 400.
  • → Elle ghoste en gros et en gras — on ne l'y emploie pas.
  • → Jamais Geist + Redaction dans un même titre.
06 — Grille & espacement

Une trame de 8.

Tout l'espacement dérive d'une échelle de 4 / 8 px. Les blocs s'alignent sur 12 colonnes. Trois niveaux de respiration structurent la page.

Échelle d'espacement — pas de 4 / 8

4
8
16
24
32
48
64
96

Grille — 12 colonnes, gouttière 24 px

Contenu — 8 colonnes
Aside — 4

Les blocs occupent un nombre entier de colonnes (ici 8 + 4). Conteneur max 1280 px.

Rythme vertical — trois niveaux

Entre sections96 → 168 px
Entre blocs44 px
Entre éléments16 → 24 px
07 — Iconographie

Traits nets, angles droits.

Set maison : grille 24px, trait 2px, terminaisons carrées, coins à 90°. Pas d'emojis, pas de dégradés. Exports SVG prêts dans exports/icons.

Stratégie
Design
Code
Web
App
IA
Data
Maintenance
Flèche
Plus
Fermer
Check
Lien
Document
Recherche
Menu
08 — Système pixel

Une grille, mille formes.

Le clin d'œil au modem 56k : un système de pixels carrés sur une grille régulière. La même trame sert à dessiner n'importe quel motif — cœur, signal, flèche, bloc. Noir sur rose, pixels nets, jamais anti-aliasés.

Chaque motif se construit case par case sur la grille : un pixel = une cellule, exactement. C'est le principe — on ne dessine pas une courbe, on remplit des carrés.

Cœur
Signal
Flèche
Spark

Usage : hero de site, transitions, illustrations, posts sociaux. Exports dans assets/ (heart, signal, arrow, block, spark).

09 — Imagerie

L'image, à notre main.

56K privilégie le graphique au photographique. Quand une image entre dans le système, elle s'y plie : cadrée net, à plat, puis tramée en pixels de 4 px (encre sur rose) avec du grain — jamais de dégradé. Notre première image, c'est la capture de ce qu'on construit.

Traitement — tramage 4 px, dispersion chaotique (aucun dégradé)

Le sujet se condense en pixels d'encre, puis se disperse en une trame chaotique de 4 px qui s'éclaircit vers les bords — le rose ressort. Grain par-dessus. Jamais de dégradé, jamais de filtre couleur.

Deux registres

Capture produità plat · le sujet
Tons → densitéombres denses · lumières rose

On utilise / On évite

On utilise

  • +La capture nette de nos écrans, posée à plat sur fond clair.
  • +Le tramage 4 px (encre sur rose) + grain — pas de dégradé.
  • +Le motif pixel en surimpression comme liant.

On évite

  • ×Le stock cliché : poignée de main, ampoule « idée », open-space souriant.
  • ×Dégradés décoratifs, ombres portées, mockups en perspective « glossy ».
  • ×Coins arrondis, filtres colorés, basse définition.
10 — Ton & voix

On dit ce qu'on fait.

Direct, concret, sans jargon. On parle de systèmes et de résultats, pas de promesses. Phrases courtes, verbes d'action, « vous ». Une idée par phrase.

On écrit

  • +« On construit l'outil qui fait tourner votre métier. »
  • +Des verbes concrets : concevoir, construire, livrer.
  • +Des phrases courtes, une idée à la fois.

On évite

  • ׫ Solutions innovantes qui révolutionnent votre business. »
  • ×Jargon, superlatifs, « disruptif », « next-gen ».
  • ×Emojis, points d'exclamation à la chaîne.

Lexique

un outil, un systèmepas « une solution »
construire, livrerpas « délivrer »
clair, netpas « clé en main »
vous, votre métierpas « les utilisateurs »
11 — Composants

Radius 0, bordure au besoin.

Tout en coins carrés. La bordure 2px n'est pas systématique : on l'utilise quand elle compartimente vraiment, sinon un fond (bone ou rose) ou du vide suffit.

Cartes — 3 niveaux de séparation

Bordée

Quand il faut compartimenter nettement.

Fond bone

Séparation douce, sans bordure.

Accent rose

Pour mettre en avant, sans bordure.

Champs & tags

StratégieDesignTech
12 — Applications

La marque en situation.

Aperçu des supports courants, construits directement dans la charte : plat, carré, filet 2px, accent rose, logo 56K.

Carte de visite85 × 55 mm
Signature emailHTML
Post réseaux sociaux1080 × 1080
Papier en-têteA4