Concevoir un système de marque qui tient 13 produits
Comment nous utilisons les variables CSS pour donner à chaque sous-produit J7Soft sa propre couleur d'accent sans casser la marque parente.
Par Kamga Simo Junior
J7Soft compte 13 sous-produits, chacun avec sa palette. Le défi : chaque page produit doit ressembler à son produit, tandis que la navigation globale, la typographie et la mise en page restent identiques pour que le visiteur ne se croie pas sur un autre site.
Variables CSS, scopées par route
Le motif est emprunté au système de sous-marques de Stripe. Chaque page /products/[slug] enveloppe son contenu dans un <ProductAccentProvider> qui pose --color-product-accent sur la coquille de route. Les composants référencent bg-product-accent et text-product-accent-fg — jamais de couleurs en dur.
L'UI fonctionnelle reste neutre
Vert pour le succès, rouge pour le danger, bleu pour l'information — jamais les couleurs de marque. C'est non négociable : si --color-success était le violet de la marque, l'utilisateur ne pourrait pas apprendre que violet = succès sur une page et marque sur une autre.
Lire tout ce que nous publions
Parcourez nos dernières notes d'ingénierie, de produit et de société.