Charte graphique
Référence pour reproduire la boutique KlinoHome dans le thème Shopify. Page non liée dans le menu.
Logo
Wordmark Newsreader 480, tracés vectoriels : img/logo.svg (couleur = currentColor). Hauteur dans l’en-tête : 22 px (18 px mobile). Zone de protection : la hauteur du K.
Couleurs
- Craie
#F7F6F2Fond de page - Blanc
#FFFFFFChamps, tiroirs - Sauge pâle
#E4E9E2Cartes produit appareils - Lin
#ECE8DFCartes produit outils, blocs - Vert bouteille
#123B33Titres, boutons, liens forts - Vert profond
#0C2A24Survol des boutons - Encre
#24302CTexte courant - Gris chaud
#6E716ATexte secondaire - Filet
#DEDBD2Bordures, séparateurs - Sauge
#9DB0A1Détails, puces
Typographie
Titres — Newsreader 400, opsz auto
Le bon outil.
H1 : 76 px / 1,02 (mobile 42 px), -0,02 em
Les essentiels de la maison
H2 : 46 px / 1,08 (mobile 32 px)
Souffleur Turbo sans fil
H3 / nom produit : 19–22 px
Texte — Hanken Grotesk 400 à 600
Chapô 19 px / 1,55, encre.
Chapô : 19 px
Texte courant 16 px / 1,6. Ton pratique, rassurant, précis ; tutoiement.
Texte : 16 px · petit : 14 px
Sur-titre 12 px, 600, capitales, +0,14 em
Sur-titre : 12 px
Boutons et liens
Boutons : hauteur 52 px, rayon 999 px, Hanken 600 15 px, padding 0 28 px. Survol : vert profond. Focus : anneau 2 px sauge.
Cartes produit
-

Appareil
Souffleur Turbo sans fil
La poussière s'envole en une seconde : clavier, PC, voiture, étagères.
49,90 €27,90 € -

Appareil
Rasoir Anti-Bouloches
Tes pulls et ton canapé comme neufs en deux minutes.
19,90 €
-

Outil
Gel Nettoyant Magique
Il attrape la poussière dans les aérations et le clavier.
9,90 €
Image ratio 4/5, rayon 6 px, fond teinté (sauge ou lin).
Produit détouré : object-fit contain, padding 11 %, mix-blend-mode multiply.
Photo d’usage : object-fit cover.
Survol : 2e image en fondu.
Espacements et grille
4812162432486496128
Conteneur 1320 px max, marges 40 px (20 px mobile). Grille produits : 4 colonnes, gouttière 24 px (2 colonnes et 12 px en mobile). Sections : 112 px vertical (72 px mobile). Rayons : 6 px cartes, 999 px boutons, 4 px champs.