Éléments graphiques

Feuille et motifs signatures

La feuille reprend celle du logo, placée au-dessus du « m ». C’est un élément graphique à réutiliser :

1. comme puce, comme confetti ou comme ponctuation ;
2. avec un filet vert court avant les titres de section ;
3. avec des guillemets verts autour d’un message clé ;
4. avec la date et la version en texte vertical sur la tranche.

Papier peint

Le papier peint est un motif de marque. Il existe en deux motifs, chacun en quatre couleurs (vert, bleu, rose, orange) :

• Motif 1 : le nom « l’Opcommerce » répété, avec un interlignage très large et des feuilles de couleur.
• Motif 2 : le symbole « CO » répété en quinconce, très léger.

Il donne de la texture aux fonds sans concurrencer le contenu.

Motif 1, vert

Motif 1, bleu

Motif 1, rose

Motif 1, orange

Motif 2 : le symbole « CO » répété

Un motif très léger, pour les fonds. Il existe en quatre couleurs.

Motif 2, vert

Motif 2, bleu

Motif 2, rose

Motif 2, orange

Où l’utiliser

1. En fond de colonne, par exemple sur les fiches.
2. Dans des formes organiques d’arrière-plan.
3. En bas de page d’un document.

Comment l’utiliser

1. Choisir l’opacité selon l’usage : plus marquée sur une forme ou un pied de page, plus légère en fond de colonne.
2. Derrière du texte, rester discret : 15 % d’opacité maximum, jamais derrière un texte long.
3. Utiliser les couleurs de la marque, ou celles de la box concernée.
4. Ne pas déformer le motif ni modifier l’espacement des mots.

Formes

1. Coin arrondi asymétrique : grand rayon en bas à droite.
2. Onglet incurvé pour les titres de section.
3. Rayon uniforme de 12 à 16 px pour les encadrés.
4. Pas de coins carrés sur les photos.

Filet vert court

Un petit filet vert, fin, se place au-dessus des titres de section. Il est court et aligné à gauche sur le titre.

Bordure verte

Quand le document s’y prête et en a besoin, une bordure verte longe le bord droit de la page.

1. Un grand coin arrondi en bas à droite, comme les autres formes.
2. En haut, elle prolonge le bandeau.
3. En bas, un liseré dégradé du bleu au vert ferme la page.

Bandeaux et en-têtes

Trois styles sont proposés selon le type de support.

1. Style A : un bandeau avec un dégradé de couleurs et une courbe, pour les infographies et les fiches thématiques.
2. Style B : un fond blanc avec une fine ligne en dégradé, pour les fiches et les formats A5.
3. Style C : une photo qui occupe tout l’espace, avec un filtre de couleur par-dessus, pour les couvertures.

Sur les fonds colorés ou les photos, le logo est utilisé en blanc.

Les trois styles en situation

Style A
Bandeau dégradé au bas arrondi, feuille en guise de puce.

Style B
Liseré dégradé fin, filet vert court, guillemets verts autour du message clé.

Style C
Photo plein cadre sous calque bleu, feuilles en confettis.

Construction du bandeau

• Hauteur : 12 à 16 % du grand côté de la page
• Logo blanc à gauche, titre blanc à droite
• Bas du bandeau arrondi : la courbe descend vers le centre
• Le texte se place dans la zone la plus foncée
• Couleur du bandeau : bleu et vert de la marque, ou celle de la box

Les dégradés du bandeau

Le dégradé de la marque va du bleu #08436F au vert #80D33A. Les autres dégradés suivent les règles de la page Couleurs : deux couleurs seulement, de gauche à droite, avec à gauche une couleur principale (bleu ou vert) ou la couleur de la box.

Calque sur photo

• Un calque bleu #08436F sur la photo de couverture
• Deux niveaux d’opacité au maximum : plus foncé en bas, plus clair en haut
• Titre en blanc, d’opacité comprise entre 60 et 90 %
• Le titre s’aligne sur le haut ou le bas de la zone foncée
• Le calque couvre toute l’image : ni bande verticale, ni bande partielle

1. La photo de couverture, sans calque.

2. Un calque bleu #08436F sur toute l’image : plus foncé en bas, plus clair en haut.

3. Titre blanc (60 à 90 % d’opacité), aligné sur le bas de la zone foncée.

La couleur du calque

Bon usage : calque bleu de la marque, ou couleur de la box concernée.

À éviter : calque orange, qui n’est pas celui de la marque.

À éviter : calque rouge, qui n’est pas celui de la marque.

Encadrés et blocs

Neuf styles d’encadrés permettent de mettre en avant des informations. Ils reprennent la palette de la marque ou celle de la box concernée, avec des coins arrondis.

À respecter : le QR code doit mesurer au moins 25 mm de côté. Utiliser un seul type d’encadré par bloc d’information.

« En savoir + »

Un encadré sur fond gris, accompagné d’une pastille ampoule en haut à gauche. La pastille prend la couleur de la box : ici, le violet de l’IA Box.

« En savoir + » avec QR code

Une tuile grise à un angle arrondi, avec une pastille ampoule verte, un QR code et le libellé « en savoir + ».

QR code

Le QR code de l’Opcommerce est bleu foncé sur fond clair, avec le symbole « CO » au centre. Il renvoie vers le site de l’Opcommerce et se place toujours près d’un libellé qui dit où il mène.

« Pour aller plus loin »

Un bandeau sur fond clair avec une illustration, un titre, un texte et un ou deux QR codes. Chaque QR code a un libellé qui dit où il mène.

Cartes inclinées

Trois cartes légèrement inclinées, avec une illustration, un en-tête de couleur et une liste à puces en forme de feuille. Elles présentent des leviers ou des étapes.

Cadre à contour

Un cadre à fin contour bleu et aux coins arrondis, avec un filet vert court au-dessus d’un titre en bleu. Il met en avant une question fréquente ou un point d’attention.

Bloc à onglet

Un onglet bleu foncé qui porte le titre, ici « Module 1 », collé à un bloc vert très clair aux coins arrondis. Il présente des modules ou des rubriques détaillées.

Tuiles de couleur

Des tuiles pastel (jaune, bleu, rose, vert) aux coins arrondis, avec une illustration au trait, un titre en gras et un court texte. Elles présentent plusieurs points d’un même sujet.

Chiffre clé

Un bandeau bleu très pâle avec le chiffre en grand et en bleu, suivi d’une phrase en italique gras qui l’explique.

Bandeau d’accompagnement

Un bandeau gris à un angle arrondi, avec une illustration dans un cercle, un titre bleu précédé d’un filet vert court et un lien en vert. Il invite à contacter un conseiller.