0. Philosophie de la Marque
Mission & Vision
Notre Mission : Rendre le suivi de vos projets simple, intuitif et efficace pour tous.
Notre Vision : Devenir la solution de référence pour l'organisation et la collaboration, en libérant le potentiel de chaque équipe.
Tonalité de Voix & Personnalité
Notre communication est claire, directe et empathique. Nous adoptons un ton moderne et professionnel, mais toujours accessible et encourageant. Nous évitons le jargon inutile et privilégions la simplicité.
FolloYou est fiable, innovant et orienté solution. Nous sommes le partenaire discret qui vous aide à atteindre vos objectifs.
1. Le Logo
Le logo de FolloYou est le cœur de notre identité visuelle. Il incarne la simplicité et l'interconnexion de nos services.
Logo Principal
Fichier :
FolloYou_Logo_Principal.svg
À utiliser comme version par défaut sur tous les supports principaux (site web, applications, documents officiels).
Règles d'utilisation
Zone d'Exclusion
Pour garantir sa lisibilité, laissez toujours un espace vide autour du logo, équivalent à la hauteur d'un des grands cercles du logo (désigné par 'X' sur le schéma ci-dessous).
Exemple de zone d'exclusion (X = hauteur d'un grand cercle).
Taille Minimale
Le logo ne doit pas être utilisé en dessous d'une largeur de 32 pixels sur les supports digitaux, et 1.5 cm sur les supports imprimés.
À faire et à ne pas faire
- Respecter les couleurs et les proportions d'origine.
- Utiliser sur des fonds unis qui assurent un bon contraste.
- Maintenir la zone d'exclusion autour du logo.
- Ne pas déformer, étirer ou compresser le logo.
- Ne pas modifier les couleurs (sauf versions autorisées).
- Ne pas ajouter d'ombres, de reflets ou d'autres effets.
- Ne pas placer le logo sur un fond trop chargé ou illisible.
- Ne pas modifier la typographie intégrée au logo.
✓ Correct
✗ Incorrect (Déformé)
Version Monochrome
Fichier :
FolloYou_Logo_Monochrome_Noir.svg
À utiliser sur des arrière-plans clairs ou blancs où le logo principal pourrait manquer de contraste.
Version Négative (Blanc)
Fichier :
FolloYou_Logo_Monochrome_Blanc.svg
Idéal pour les fonds sombres ou colorés où le logo noir serait illisible.
2. La Palette de Couleurs
La palette est construite autour d'un bleu énergique, soutenu par des gris neutres pour la sobriété et des couleurs d'accent pour les interactions de l'interface. Nous nous assurons que toutes les combinaisons respectent les normes d'accessibilité WCAG 2.1.
Couleur Primaire
Utilisé pour le logo, les titres principaux, les boutons d'action et les éléments interactifs clés. Exprime la confiance et la modernité.
Couleurs Neutres et de Texte
Couleur principale pour le texte courant (corps de texte H1, H2, H3), assurant un excellent contraste et confort de lecture sur les fonds clairs. Symbolise la stabilité.
Pour le texte secondaire, les labels, les bordures légères et les informations moins prioritaires. Apporte de la douceur sans perdre en lisibilité.
Utilisé pour les fonds de section, les séparateurs et les éléments de fond afin de créer une séparation visuelle douce et aérée. Représente la clarité.
Couleurs d'Interface (Accents fonctionnels)
Ces couleurs sont réservées aux retours d'information et aux statuts spécifiques dans l'interface utilisateur.
Pour les messages de succès, les validations, les icônes de confirmation et les états positifs. Inspire la **réussite**.
Pour les avertissements, les notifications nécessitant une attention modérée ou les éléments en cours de traitement. Attire l'**attention**.
Exclusivement pour les messages d'erreur critiques, les actions destructives ou les indicateurs d'échec. Signale un **problème**.
3. La Typographie
La police de caractères choisie pour FolloYou est **Poppins**, complétée par **Source Code Pro** pour les éléments techniques. Poppins, avec ses formes géométriques et rondes, confère un caractère moderne, simple et accessible. Source Code Pro assure la lisibilité du code et des données techniques.
Police Principale : Poppins
Utilisée pour tous les titres, les corps de texte et l'interface utilisateur.
- **Regular (400)**: Texte courant, paragraphes.
- **Medium (500)**: Éléments d'interface, labels.
- **SemiBold (600)**: Sous-titres, 강조 (accents) importants.
- **Bold (700)**: Titres principaux, appels à l'action.
Police de Code : Source Code Pro
Réservée aux blocs de code, extraits de code, ou tout élément nécessitant une police monospace pour la clarté technique.
Échelle et Hiérarchie Typographique
Titre de Niveau 1 (H1) - Poppins Bold (3rem)
Titre de Niveau 2 (H2) - Poppins Bold (2.2rem)
Titre de Niveau 3 (H3) - Poppins SemiBold (1.5rem)
Paragraphe de texte courant (Poppins Regular, 1rem). Utilisé pour la majorité du contenu écrit. Il doit être lisible et aéré avec un interlignage de 1.7. L'espacement des lettres par défaut est suffisant.
Texte secondaire ou légende (Poppins Regular, 0.875rem). Pour les informations de moindre importance, les labels de formulaire secondaires ou les mentions légales. Assure une lecture claire même en petite taille.
Exemple de code avec Source Code Pro (0.9em)
Exemple de liste :
- Élément de liste 1 (Poppins Regular)
- Élément de liste 2 (Poppins Regular)
- Élément de liste 3 (Poppins Bold)
4. Imagerie et Iconographie
Style des Images
Nos visuels doivent refléter la **simplicité, la clarté et l'efficacité** de FolloYou. Privilégiez :
- Des photos avec une **lumière naturelle et douce**.
- Des sujets qui évoquent la **collaboration, la productivité, la satisfaction client** ou des **environnements de travail modernes et ordonnés**.
- Une préférence pour les couleurs lumineuses et aérées, en accord avec notre palette.
- Évitez les images trop chargées, artificielles ou avec des teintes trop saturées qui pourraient créer une dissonance avec notre charte.
Style des Icônes
Les icônes utilisées dans nos produits et communications doivent être :
- **Linéaires ou "outline"** : Un trait fin et propre.
- **Simples et reconnaissables** : Éviter les détails superflus.
- **Uniformisées** : Provenant d'une bibliothèque cohérente ou conçues dans le même style.
-
**Couleur :** Principalement notre
--primary-blueou--dark-gray. En négatif,--white.
Check
Download
Info
Add
5. Éléments d'Interface Utilisateur (UI Elements)
La cohérence des éléments interactifs est cruciale pour une expérience utilisateur simple et intuitive sur toutes nos plateformes numériques.
Boutons
Les boutons sont l'un des points d'interaction principaux. Voici les deux styles principaux avec leurs états au survol.
Notifications / Alertes
Les messages de notification doivent utiliser les couleurs d'accent pour communiquer clairement leur intention et leur importance.
Champs de Formulaire
Clarté et simplicité sont de mise pour les interactions des utilisateurs.
Rayons de Bordure (Border-radius)
La cohérence des arrondis participe à la douceur et modernité de notre interface.
-
--border-radius-sm: 4px;(Éléments très petits, icônes) -
--border-radius-md: 8px;(Boutons, champs de formulaire) -
--border-radius-lg: 12px;(Cartes, blocs d'informations)
6. Grilles et Espacements
Un système d'espacement basé sur une unité de base garantit une hiérarchie visuelle claire et un design aéré et cohérent.
Unité d'Espacement
Nous utilisons un système d'espacement basé sur une unité de
8px (--spacing-unit).
Tous les marges et paddings doivent être des multiples de cette
unité.
-
--spacing-xs: 4px;(ex: entre icône et texte) -
--spacing-sm: 8px;(ex: padding interne de petits boutons) -
--spacing-md: 16px;(ex: marge entre paragraphe et titre, padding de carte) -
--spacing-lg: 24px;(ex: marges de section, grands paddings) -
--spacing-xl: 32px;(ex: espaces entre grandes sections)
7. Applications de la Marque
Quelques exemples concrets de l'application de notre charte graphique sur différents supports.
Carte de Visite
Recto
Logo FolloYou
Verso
Prénom Nom
Poste - FolloYou FolloYou
email@folloyou.com
+33 1 23 45 67 89
Signature d'Email
Exemple de signature d'email :
Réseaux Sociaux
Nos profils sur les réseaux sociaux (LinkedIn, X, Facebook, etc.) doivent utiliser le logo principal en photo de profil et respecter la palette de couleurs et la typographie pour les bannières et les visuels de publication.
8. Ressources et Contact
Fichiers Sources
Tous les fichiers sources du logo (SVG, AI, EPS) et des icônes sont disponibles sur notre drive partagé :
Accéder aux ressources graphiques
Pour l'utilisation des polices, assurez-vous d'avoir les licences nécessaires pour Poppins et Source Code Pro.
Site Exemple
Afin de vous aider à visualiser l'application de cette charte graphique, nous avons créé un site exemple qui illustre les différents éléments de la charte en action. Vous pouvez le visiter ici :
Contact
Pour toute question ou besoin de clarification concernant l'utilisation de cette charte graphique, veuillez contacter :
Équipe Marketing FolloYou
Email:
design@folloyou.com
Téléphone: +33 (0)1 23 45 67 89
Nous sommes là pour vous aider à maintenir une image de marque cohérente et forte.