Charte graphique · Essentiels
Version 1.0 · Septembre 2026
Charte graphiqueLes essentiels
Logo, couleur et typographie. Tout ce qu’il faut pour utiliser correctement la marque vignetim.
Logo
Déclinaisons et versions couleur
Quatre déclinaisons approuvées
Horizontal · symbole
Par défaut. Web, documents, présentations, signatures e-mail.
Vertical · symbole
Formats carrés et portrait, réseaux sociaux, roll-ups.
Horizontal · badge
En-têtes dans l’app, visuels pour les stores.
Vertical · badge
Écrans de démarrage, créations publicitaires.
Trois versions couleur
Teal / fond clair
Blanc, Neutral 50, Teal 50.
Blanc / fond teal
Teal 500 à 800.
Blanc / fond sombre
Neutral 800 à 900, sur photographie.
Également disponible
Pour l’impression en une couleur, il existe une version monochrome foncée. Utilisez ce fichier plutôt que de convertir en niveaux de gris.
Monochrome foncé
- Le logotype s’écrit toujours en minuscules, avec le point : vignetim. Ne mettez jamais de majuscule à la première lettre et n’ajoutez pas d’interlettrage.
- Ne placez jamais le badge teal sur un fond teal. Il disparaît. Sur du teal, utilisez le symbole blanc seul.
- N’utilisez le symbole ou le badge seul que si le nom de la marque figure ailleurs sur le même support : icône d’app, favicon, photo de profil.
- N’assemblez jamais une déclinaison à la main. Utilisez toujours le fichier fourni ; ne réorganisez jamais les éléments.
Zone de protection et taille minimale
De l’espace pour respirer, des tailles qui restent lisibles
Laissez au moins 0.5 X d’espace libre de chaque côté du logo. X correspond à la hauteur du symbole (ou du badge) dans la déclinaison concernée. Aucun texte, image, trait, autre logo ni bord de page ne doit pénétrer dans cette zone.
Tailles minimales
| Élément | Numérique | Impression |
|---|---|---|
| Déclinaison horizontale · symbole | 140 px | 30 mm |
| Déclinaison horizontale · badge | 160 px | 34 mm |
| Déclinaison verticale · symbole | 72 px | 16 mm |
| Déclinaison verticale · badge | 80 px | 18 mm |
| Symbole (seul) | 20 px | 5 mm |
| Badge (seul) | 44 px | 8 mm |
Les valeurs indiquent la largeur. En dessous de ces tailles, utilisez le symbole ou le badge seul plutôt qu’une déclinaison.
Deux exceptions
- Icône d’app : la règle de zone de protection ne s’applique pas. Le badge remplit le cadre et la plateforme arrondit les angles.
- Favicon (16 à 32 px) : le badge devient illisible ; utilisez le symbole teal seul sur fond transparent.
À côté d’autres logos
Laissez au moins 1 X entre deux logos et équilibrez-les à la même hauteur optique.
Couleur
Une couleur de marque, une gamme neutre
La couleur de la marque est Teal 500 · #049CB9. Il n’existe pas de couleur de marque secondaire ; la profondeur vient des nuances de la gamme teal et des gris neutres.
Vignetim teal
Neutres
Valeurs techniques
- HEX
- #049CB9
- RGB
- 4 · 156 · 185
- CMYK (réf.)
- 98 · 16 · 0 · 27
- PANTONE (env.)
- 313 C à 314 C
La valeur CMYK est une référence calculée ; convertissez-la avec le profil ICC de l’imprimeur.
Proportions d’usage
- Blanc / Neutral 50
- Espace de respiration
- Neutral 600 à 900
- Texte et structure
- Teal
- Accent et action
Chaque écran comporte exactement une action principale en teal.
États des boutons
Trois règles de contraste
- Teal 500 n’est pas une couleur de texte (3.25:1 sur blanc). Utilisez Teal 700 pour le texte et les liens.
- Le texte blanc sur Teal 500 doit faire au moins 18 px / 14 pt en gras ; pour un texte plus petit, utilisez un fond Teal 700.
- En mode sombre, l’accent est Teal 300 à 400 ; Teal 500 ne suffit pas sur fond sombre.
Typographie
Inter, une police, quatre graisses
Inter est l’unique police de la marque. Seules les graisses 400, 500, 600 et 700 sont utilisées. Si Inter ne peut pas être chargée, utilisez la police système, puis Arial.
Aa Bb Cc Çç Ğğ Iı İi Şş Öö Üü 0123456789
Aa
Regular · 400
Texte courant, textes longs.
Aa
Medium · 500
Libellés, en-têtes de tableau, mise en valeur.
Aa
SemiBold · 600
Titres, boutons, surtitres.
Aa
Bold · 700
Titres de campagne uniquement.
H1 32 / 38 px · 600 · -0.020em
Votre vignette, prête avant la frontière
H2 24 / 30 px · 600 · -0.016em
Comment fonctionne une vignette numérique ?
H3 20 / 26 px · 600 · -0.012em
Saisissez la plaque d’immatriculation de votre véhicule
Body 16 / 26 px · 400
L’app vous envoie un rappel lorsque vous êtes à 30 km de la frontière.
Body S 14 / 22 px · 400
Les prix sont basés sur le tarif officiel de la vignette de chaque pays.
Overline 11 / 14 px · 600 · +0.11em · CAPS
Pays · Prix · FAQ
Interligne : 1.10 à 1.25 pour les titres, 1.50 à 1.65 pour le texte courant. Longueur de ligne de 60 à 75 caractères. Toujours aligné à gauche.
- Ne composez pas le texte courant en majuscules. Les majuscules sont réservées aux surtitres et aux libellés courts.
- N’ajoutez pas d’interlettrage au texte courant, et ne le composez pas en teal.
- N’étirez pas et n’inclinez pas le texte ; pas de faux italique ni de faux gras.
- N’utilisez pas plus de quatre niveaux sur un même support.
Le piège des majuscules turques
Lors d’une conversion automatique, “i” doit devenir İ. Définissez lang="tr" dans le HTML et utilisez toLocaleUpperCase('tr') dans le code. Sinon, “istanbul” devient “ISTANBUL”.
L’inverse est aussi vrai : un texte anglais nécessite lang="en", sinon “Size” devient “SİZE”.
Langues : sous-ensembles latin-ext pour TR et RO, cyrillic pour UA, latin pour DE et EN. Tous font partie d’Inter. Ne changez jamais de police pour une autre langue.
Utilisations interdites
Ce qu’il ne faut jamais faire avec le logo
Cette liste n’est pas exhaustive : toute modification du logo par rapport au fichier fourni constitue une utilisation interdite.
Lorsqu’une impression en une couleur est nécessaire, utilisez la version monochrome foncée approuvée, et non des niveaux de gris.
Aide-mémoire
Toute la charte en un coup d’œil
Nuancier
- Teal 500 · marque#049CB9
- Teal 700 · texte / liens#046B80
- Teal 300 · accent en mode sombre#5FCEE2
- Neutral 900 · titres#161B1E
- Neutral 600 · texte secondaire#565E64
- Neutral 50 · surface#F7F8F9
Cinq règles
- Utilisez le logo issu du fichier fourni.
- Laissez 0.5 X d’espace libre de chaque côté.
- Teal 500 n’est pas une couleur de texte. Utilisez Teal 700.
- Une seule police : Inter, 400 / 500 / 600 / 700.
- Le teal ne dépasse jamais 10 % d’une surface.
Liste des fichiers
- Tous les logosZIP
- vignetim-horizontal-tealPNG
- vignetim-horizontal-whitePNG
- vignetim-horizontal-single-colour-darkPNG
- vignetim-vertical-tealPNG
- vignetim-badge-horizontalPNG
- vignetim-badge-verticalPNG
- vignetim-badgePNG
- vignetim-symbol-teal / whiteSur demande
- vignetim-appicon-1024Sur demande
- vignetim-favicon-16/32/48Sur demande
Pour l’impression et les grands formats, demandez les fichiers vectoriels (SVG ou EPS). Le PNG uniquement là où les vecteurs ne sont pas pris en charge.
Icône d’app
- App Store (iOS)
- 1024 × 1024 px, sans transparence
- Google Play
- 512 × 512 px, PNG 32 bits
- Play · image de présentation
- 1024 × 500 px
- Profil sur les réseaux sociaux
- 1000 × 1000 px
Importez un carré à fond perdu, sans angles arrondis. Le système d’exploitation les arrondit.
Variables CSS
:root {
--brand-500: #049CB9;
--brand-600: #03849E;
--brand-700: #046B80;
--brand-300: #5FCEE2;
--brand-50: #EAF8FB;
--ink-900: #161B1E;
--ink-600: #565E64;
--ink-200: #DDE1E4;
--ink-50: #F7F8F9;
--font-sans: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}Questions et validations
Pour toute utilisation non couverte par cette charte, ou pour demander un nouveau fichier, contactez le responsable de la marque.
Version 1.0 · Septembre 2026