Livraison offerte dès 59 € dans l'UE

Pour Noël en Europe, commandez avant le 10 décembre

Document interne · non lié dans le menu

Charte graphique Pompon

Les éléments à reproduire dans le thème de la boutique en ligne : logo, couleurs, typographies, composants et espacements.

Logo

Logo principal · logo.svg

Version inversée · logo-inverse.svg

Monogramme (le P coiffé d'un pompon) · monogramme.svg

Mot-symbole POMPON en Archivo Black vectorisé, précédé du pompon : un disque chaleur avec le P blanc. Hauteur minimale à l'écran : 18 px. Zone de protection : la moitié du disque tout autour. Mot-symbole noir sur clair, blanc sur sombre ; le disque reste toujours orange chaleur. Favicon : favicon.svg.

Couleurs

Noir profond#0B0B0C--ink

Texte, sections sombres, pied de page

Blanc#FFFFFF--bg

Fond principal

Gris photo#F3F3F3--bg-2

Fond uniforme de toutes les photos produit

Gris clair#E9E9EA--bg-3

Sections grises, survols

Gris texte#5B5B60--ink-2

Texte secondaire

Filet#E1E1E3--line

Bordures, séparateurs

Chaleur#FF4D1F--heat

Boutons d'achat, prix, étiquettes, bandeau

Chaleur foncée#D93A0F--heat-2

Survol des boutons, prix sur fond clair

Glacier#DCEBF5--ice

Le froid : sections « brrr », fonds de blocs

Glacier foncé#14405E--ice-ink

Texte sur glacier

Proportions : environ 70 % laine, 20 % encre, 5 % braise, 5 % gris neige. Pas de dégradé, pas d'ombre colorée. La braise reste rare : un bouton d'achat par écran, quelques détails.

Typographies

Titres · Archivo Black 400, capitales (auto-hébergée, OFL)

Du brrr au ahhh.

Hero 150 px / 64 mobile · H1 64 / 40 · interligne 0,9 · approche −0,02 em

9 zones de chauffe

H2 64 px / 38 mobile · interligne 0,94

Comment ça marche

H3 22 px / 19 mobile

Texte, prix et interface · Inter Tight 400 à 800

Chapeau 19 px / 17 mobile, interligne 1,55.

Texte courant 16 px, interligne 1,6, couleur encre. Les chiffres concrets (zones, °C, heures, cm) sont écrits en clair, jamais cachés en petites lignes.

Surtitre · 12 px · 600 · capitales · espacement 0,14 em

Mentions 13 px, encre douce.

Boutons et champs

Ajouter au panier Découvrir la collection Toutes les questions Lien fléché

Boutons 54 px, pilule (rayon 999 px), texte 15 px 800 en capitales. Chaleur = achat et action principale. Noir = action secondaire. Contour = tertiaire. Pastilles de taille 58 × 46 px, sélection = fond noir.

Cartes produit

Photo carrée sur gris uniforme #F3F3F3 (photos à fond blanc en mix-blend-mode: multiply, object-fit: contain), étiquette catégorie, bouton « Ajouter » au survol (toujours visible sur mobile). Nom 16 px 700, prix 22 px 800, prix barré à côté si le catalogue en donne un. Au survol, la deuxième photo apparaît en fondu. Nom 16 px 500, prix 16 px 600, mention batterie 13 px.

Espacements et grille

4
8
12
16
24
32
48
72
112

Conteneur 1320 px, marges latérales 40 px (20 sur mobile). Grille 12 colonnes, gouttière 24 px. Sections espacées de 120 px sur ordinateur, 72 sur mobile. Filets 1 px. En-tête 72 px, identique sur toutes les pages.