- Accueil
- Charte graphique
Référence officielle · version 2 · 13 novembre 2026
La charte graphique SMART C&P.
Couleurs, typographie, logo, composants et ton. Toute nouvelle page du site, tout document et toute publication partent d'ici.
1 · Couleurs
Deux couleurs d'identité : l'émeraude et le noir.
Règle 60-30-10 : environ 60 % de fond clair, 30 % de noir, 10 % d'émeraude. Cliquez sur une valeur pour la copier.
Identité
Fonds et textes
Usages réservés
| Fond | Titres | Texte | Accent |
|---|---|---|---|
| Fond de page ou blanc | Noir | Texte courant, texte secondaire | Émeraude texte |
| Noir | Blanc | Texte sur noir | Émeraude clair |
| Émeraude (bouton) | Blanc | Blanc | — |
2 · Typographie
Deux polices : Nunito pour les titres, Figtree pour le texte.
Gratuites, chargées depuis Google Fonts (choix du 12/11/2026). Caveat sert d'annotation manuscrite ponctuelle. Verdana reste réservée aux e-mails.
3 · Logo
Le logo SMART C&P s'utilise tel quel.
Le nom en toutes lettres : SMART en gras, C&P plus léger, et l'esperluette émeraude, qui relie le conseil à la performance. Police Nunito, texte vectorisé. Fichiers : assets/logo/.
Les règles
- Taille minimale : 110 px de large à l'écran, 25 mm à l'impression ; en dessous, le symbole « & »
- Zone de protection : la hauteur du « C » libre tout autour
- Sur fond clair : texte noir, esperluette émeraude ; sur fond noir : texte blanc, esperluette émeraude clair ; en une couleur : noir ou blanc
- Le symbole et le favicon : l'esperluette émeraude sur un carré noir, lisible dès 16 px
- L'emblème rond pour le pied de page, les cachets, certificats de formation et goodies
À laisser de côté
- Écrire « smart » en minuscules (marque automobile) ; écrire « SMART » seul pour parler de l'entreprise
- Déformer, recolorer ou changer la police
- Ajouter une ombre, un contour ou un dégradé
- Le poser sur une photo chargée sans aplat derrière
4 · Composants
Les briques de chaque page.
Boutons : toujours en pilule
Un seul bouton émeraude par écran. Le second est en contour noir.
Sur fond noir
L'émeraude reste le bouton principal, le contour passe en blanc.
Icônes et badges
Icônes au trait dans une pastille de 44 px. Les émojis restent hors des titres.
IAOdooSecteur
Cartes, rayons et ombres
Cartes à 20 à 28 px de rayon, bordure fine ou aplat. Ombre légère pour les éléments posés en avant (encart Odoo de l'accueil).
Champs 10 px · Cartes 20 px · Panneaux 28 px · Encarts 32 à 36 px · Boutons 999 px
Espacements : 4 · 8 · 12 · 16 · 24 · 32 · 48 · 72 · 120 px
Partenariat Odoo : logo et badge
Le site reste aux couleurs de SMART C&P. Odoo apparaît par son logo officiel et par le badge « Odoo Ready Partner », réservé aux partenaires officiels. Fichiers repris tels quels de la page brand assets d'Odoo, dans maquette/assets/.
À faire
- Utiliser les fichiers officiels, dans leurs couleurs d'origine
- Badge et logo couleur sur fond blanc ; sur fond noir, dans une pastille blanche (comme dans l'encart de l'accueil)
- Hauteur visible du mot « odoo » : 20 px au minimum, avec de l'air autour
- Écrire « Odoo » avec une majuscule, au singulier
- Lien vers odoo.com : toujours notre lien partenaire, défini une seule fois pour tout le site
À laisser de côté
- Redessiner, recolorer ou découper le logo et le badge
- Remplacer le mot « Odoo » par le logo dans une phrase
- Écrire ODOO en capitales ou « des Odoos »
- Passer le site au violet Odoo : il sert seulement à citer Odoo (badge, pastille « Odoo »)
Bandeau partenaire
Classe odoo-trust. Sous le haut de l'accueil : badge, une phrase, un lien vers la présentation d'Odoo.
Applications et duo
Classes apps et duo. Les applications en pastilles SMART C&P, chacune vers son pack ; puis « Odoo conçoit / SMART C&P installe ».
Vidéo au clic
Classe video-play, attribut data-video. La vidéo hébergée par Odoo se charge seulement au clic.
5 · Ton
Un expert de proximité qui parle simplement.
Phrases courtes, voix active, vouvoiement. Le vocabulaire du dirigeant plutôt que celui de l'informaticien.
| À écrire | À reformuler |
|---|---|
| Nous revenons vers vous sous 24 h ouvrées. | Nous ne pouvons pas répondre avant 24 h. |
| Votre gestion, vos ventes et votre site réunis dans Odoo. | Fini les logiciels qui ne communiquent pas ! |
| Parlons de votre projet | Contactez-nous pour en savoir plus |
| Un plan d'action, un planning et un prix ferme par étape. | Des solutions innovantes sur mesure. |
| Vos devis signés en ligne. | Le module de gestion des ventes. |
6 · Règles d'une page
La liste de contrôle avant toute mise en ligne.
Convaincre
- Un titre qui parle du quotidien du dirigeant
- Un appel à l'action visible sans défiler
- Une prochaine étape claire : rendez-vous ou démonstration
- Une preuve réelle : client nommé (projet signé), chiffre ou avis
Être trouvé
- Un seul titre principal par page
- Titre Google de 60 caractères, description de 155
- Une FAQ et ses données structurées
- Des liens vers 3 pages voisines
Être rapide et lisible
- Images en WebP de moins de 200 Ko
- Contraste de 4,5 pour 1 au minimum
- Lecture confortable sur téléphone
- Version TEST validée avant la mise en ligne