LUPA

Charte Graphique Web
Confort bestial, douceur maternelle
v2.0 — Mars 2026

Bestiale & Douce

LUPA, c'est la louve. L'identité web porte cette dualité : un caractère affirmé (violet profond, typo bold, animations) et une douceur maternelle (crème, arrondis, espace). Jamais de bruit — chaque élément a sa raison d'être.

01

Caractère affirmé

Le violet est saturé et assumé. La typographie display est grasse. La marque ne chuchote pas — elle s'affirme avec élégance.

02

Douceur crème

Les fonds crème/beige apaisent. Ils réchauffent l'atmosphère et contrastent avec l'intensité du violet. Le blanc pur n'est jamais utilisé comme fond de page.

03

Respiration extrême

Plus d'espace entre les sections que la concurrence. Pas de surcharge, pas de multi-CTA, pas de promotions criantes. Un seul message à la fois.

04

Mouvement subtil

Des animations de chargement et transitions fluides qui donnent vie à la page sans distraire. Inspiré des sites premium, pas des marketplaces.

Couleurs

Deux familles — violet & crème — complétées par un accent ambre pour les moments de chaleur. Le noir lie le tout avec autorité.

Violets — Cœur identitaire
#4A1D8A
Violet profond
Hover CTA, accents forts
--lupa-violet-profond
#6B2FB5
Violet LUPA
CTA principal, liens, logo
--lupa-violet
#8B4FD4
Violet vif
Icônes, surbrillance
--lupa-violet-vif
#B48AE0
Violet clair
Texte sur fond noir, tags
--lupa-violet-clair
#DDD0F0
Violet pâle
Bordures actives, décorations
--lupa-violet-pale
#F0EAF8
Lavande
Background léger, badges
--lupa-lavande
Crèmes & Beiges — Douceur maternelle
#F9F3ED
Crème
Fond de page principal
--lupa-creme
#F5EDE6
Crème rosé
Sections alternées, cards
--lupa-creme-rose
#E8DDD3
Beige
Bordures, séparateurs
--lupa-beige
#D4C4B5
Nude
Placeholders, éléments désactivés
--lupa-nude
Noirs & Accent
#0A0A0A
Noir LUPA
Header, footer, textes
--lupa-noir
#2A2428
Noir chaud
Fond secondaire sombre
--lupa-noir-chaud
#E8973F
Ambre
Accent complémentaire, alertes
--lupa-ambre
#F2C078
Ambre doux
Accent léger, décorations chaudes
--lupa-ambre-doux
Combinaisons recommandées

Noir + Violet

Header, footer, sections impact

Crème + Violet

Sections produit, storytelling

Violet + Crème

CTA, bannières highlight

Noir + Ambre

Accroche ponctuelle, offre spéciale

Polices & Échelle

Playfair Display en bold pour le caractère affirmé, DM Sans pour la lisibilité douce. Le contraste serif/sans crée un rythme élégant.

Display — Titres & Marque
Playfair Display
L'or blanc, symbole du lait
Bold 700 pour les titres forts
Regular 400 + Italic pour les accroches
Usage : titres, prix, citations, marque
Body — Interface & Contenu
DM Sans — L'interface claire.
Allaiter, ce n'est pas toujours simple. Mais chaque maman mérite un accompagnement doux, précis et respectueux de son parcours unique.
Regular 400 pour les paragraphes
Medium 500 pour les labels & nav
SemiBold 600 pour les boutons
Usage : texte courant, navigation, CTA
H1 L'allaitement mérite mieux
H2 Notre engagement qualité
H3 Silicone de qualité alimentaire
Accent Confort bestial, douceur maternelle
Body Conçu pour épouser la forme unique de chaque sein.
Small Certifié conforme FDA, LFGB et RoHS.
Mono Sans BPA · Sans BPS · Fabrication française

Atmosphères

Les fonds ne sont jamais plats. Un subtil dégradé, un halo violet, une texture organique — chaque section a sa propre profondeur.

Halo organique
Dégradé crème
Lavande texturée

✓ Faire

Radial gradients violets subtils sur fond noir. Dégradés crème vers beige en sections claires. Légère texture grain sur les photos.

✗ Éviter

Aplats de violet pur en grande surface. Fond blanc pur (#FFF) comme fond de page. Textures trop visibles qui parasitent le contenu.

Boutons & Actions

Pill shape, transitions douces, un seul CTA primaire par écran. Le bouton crème vient adoucir les sections chaudes.

Voir le catalogue →

✓ Faire

Un seul CTA violet par section. Bouton crème ou outline pour les actions secondaires. Transition cubic-bezier au hover. Minimum 44px de zone tactile.

✗ Éviter

Deux CTA colorés côte à côte. Boutons carrés (toujours pill). Couleurs de bouton hors palette. Animations bounce ou shake.

Éléments d'interface

Bordures beige fines, coins arrondis 16px pour les cartes, fond blanc uniquement sur les surfaces élevées.

LUPA

Téterelle LUPA

34,90 €

Silicone souple, s'adapte à votre morphologie.

Carte produit

border-radius: 16px · hover: lift 6px + shadow violet

Champs de saisie

border: 1.5px beige · focus: violet + ring 3px

Nouveau Silicone FDA Sans BPA Offre

Badges & Navigation

pill shape · 4 variantes badge · nav minimaliste

Animations

Des transitions fluides et organiques. Pas de bounce. Hover interactif pour les cartes, révélations au scroll pour les sections.

Lift

translateY(-8px)
0.4s cubic-bezier

Morph

Color + scale
0.5s ease

Fade out

opacity + translate
0.35s ease

✓ Faire

Page load : staggered fade-in des éléments (animation-delay). Scroll reveal progressif. Cursor custom sur les CTA. Transitions hover : 0.3–0.5s max.

✗ Éviter

Bounce, shake, elastic. Durées > 0.6s. Animations sur chaque élément (réserver aux moments clés). Parallax excessif.

Direction photographique

Photos de mode/beauté épurées, tons chauds crème/nude, cadrage intimiste. Le produit est sublimé, jamais noyé dans le décor.

🌿

Lumière douce & chaude

Lumière naturelle diffuse, tons crème/nude. Jamais de flash. L'ambiance est calme et confidentielle.

💜

Cadrage mode

Zoom poitrine, détails matière, mains. Inspiré du moodboard : photos éditorials, pas de stockphoto clinique.

Fond épuré

Fond crème ou beige uni. Jamais blanc froid. Peu d'éléments — le produit et la peau dominent le cadre.

✓ Faire

Retouche couleur vers tons chauds/violetés. Souci du détail matière (zoom silicone). Grain léger pour authenticité. Fonds en continuité avec la palette crème du site.

✗ Éviter

Photos cliniques/médicales. Fond blanc hospitalier. Filtres saturés. Texte sur photo sans overlay semi-transparent. Images qui ressemblent à Lansinoh.

Grille & Respirations

L'espace est la signature LUPA. Plus de vide que la concurrence — c'est ce qui différencie un site premium d'un marketplace.

--space-xs 8px
--space-sm 16px
--space-md 24px
--space-lg 40px
--space-xl 64px
--space-2xl 96px
--space-3xl 128px

Trois ambiances de section

Le site alterne entre trois modes pour créer un rythme de lecture. Chaque mode a ses propres règles de couleur texte et d'accent.

Rejoins la meute

Parce que chaque goutte compte

Recevez les annonces de nouveaux produits, des conseils et des offres exclusives.

Roxane, c'est la fondatrice de Lupa

Mais avant tout, c'est une maman qui s'est battue pour son allaitement. Elle a connu les crevasses, le frein de langue, les courbes qui dégringolent.

Notre engagement →

Nos produits

Un produit, une promesse. La page produit est un espace de confiance — pas un marché aux puces.

Ce que LUPA n'est pas

Inspiré de l'audit du moodboard : tout ce qu'on veut éviter pour se différencier des concurrents comme Lansinoh et les marketplaces allaitement.

Pop-ups intrusifs

Pas de modal à l'entrée. Pas de pop-up newsletter avant 30s. Pas de chatbot qui s'ouvre seul. La confiance se gagne, elle ne s'impose pas.

Étoiles & reviews criards

Pas de ★★★★★ (2,787) en jaune/orange. Les avis sont intégrés sobrement, avec la palette de la marque, jamais en widgets tiers.

Promos dégressives

Pas de "̶9̶0̶€̶ 45€" barré en rouge. Pas de badges "Tu économises 50%" en fluo. Le prix est juste et affiché clairement, sans manipulation.

Surcharge informationnelle

Pas de 4 produits + 4 badges + 4 boutons CTA sur un même écran. Une section = un message. Le scroll fait le reste.

Esthétique clinique

Pas de fond blanc hospitalier, pas de photos type catalogue médical. LUPA est un objet de soin — pas un dispositif médical froid.

Packaging copycat

Le packaging LUPA ne doit pas ressembler aux concurrents (cf. note Holi). Identité propre, pas d'imitation — même involontaire.