Charte
graphique.
La seule source de vérité visuelle
Cette charte définit l'identité visuelle Love'nSpa et fournit les composants web prêts à l'emploi : boutons, formulaires, cards, alertes, navigation, tables. Elle s'applique à tous les supports — site, magazine, landing pages, emails, plus tard application mobile.
Pour les développeurs
Chaque composant a son CSS prêt à coller. Les design tokens sont en CSS variables : palette, spacing, radius, shadows.
Pour les designers
L'échelle typographique, les ratios de couleur, la grille de spacing sont documentés. Reproductibles dans Figma, Canva ou Sketch sans interprétation.
Pour les marketeurs
Le logo, la palette, le ton visuel à appliquer dans les briefs aux agences. Les boutons CTA ont leur look défini — aucun doute possible.
Sommaire
L'unique signature visuelle
Trois versions, jamais plus. Le rose pour les fonds clairs, le blanc pour les fonds rose ou ink, le ink pour les fonds crème quand le rose est déjà trop présent.
Versions autorisées
Espace de respiration
L'espace de protection autour du logo est égal à la hauteur du « L » majuscule. Aucun élément (texte, image, bouton) ne doit pénétrer cette zone.
Tailles minimales
- Web : 100 px de large minimum (lisibilité du texte)
- Print : 24 mm de large minimum
- Favicon : version simplifiée (icône cœur uniquement)
À éviter absolument
✗ Déformer
Étirer, comprimer, modifier les proportions du logo.
✗ Recolorer
Utiliser une autre couleur que rose, blanc ou ink. Pas de gradient.
✗ Rotation / ombre portée
Le logo reste à plat, sans rotation, sans drop-shadow.
Six couleurs, jamais plus
Trois couleurs principales, trois secondaires. Toute la marque tient là-dedans. La discipline chromatique est ce qui fait la cohérence visuelle.
Couleurs principales
Couleur secondaire — un seul aplat
Couleur réservée aux dégradés
Ratio d'usage recommandé
Sur 100 % d'une page, voici la répartition idéale entre les aplats.
Couleurs sémantiques (interface)
Pour les états système (succès, alerte, erreur, info). Réservées aux composants UI — jamais utilisées comme couleurs de marque.
Pour les erreurs, on réutilise le rose Love'nSpa #fc3a4a — la marque assume sa couleur signature aussi pour les alertes critiques.
Une seule police, deux poids
Poppins. Bold pour structurer, Regular pour respirer. Pas de SemiBold, pas de Light, pas d'autre famille. La discipline typographique fait la moitié du premium.
L'échelle de tailles
clamp(48px, 7vw, 76px)
line-height 1
letter-spacing -0.02em
clamp(36px, 5vw, 56px)
line-height 1.05
letter-spacing -0.02em
clamp(28px, 4vw, 40px)
line-height 1.1
clamp(22px, 3vw, 28px)
line-height 1.2
18px
line-height 1.3
16px
line-height 1.6
14px · ink-soft
line-height 1.55
11px · rose
letter-spacing 0.3em
UPPERCASE
Règles typographiques
| Règle | Application |
|---|---|
| Une seule police | Poppins. Pas d'autre famille même pour les citations. |
| Deux poids uniquement | Bold 700 (titres, accents) · Regular 400 (lecture) |
| Pas d'italique CSS | Les citations vivent entre guillemets « » — pas en italic |
| Majuscules | Kickers et boutons CTA uniquement. Letter-spacing ≥ 0.15em |
| Ponctuation française | Espaces insécables avant ; : ! ? et entre guillemets « » |
| Pas plus de 3 lignes | Sur les titres-bannières et hero. Privilégier la concision |
Spacing, radius, shadows
Le système 4pt — toutes les valeurs sont des multiples de 4. Cohérence garantie sans effort de réflexion.
Échelle de spacing
Border radius
Shadows
Cards, inputs, hover discret
Cards élevées, dropdowns, hover boutons
Modales, overlays, popups critiques
Container & grille
| Token | Valeur | Usage |
|---|---|---|
--max-w |
1100px | Container principal du site |
--max-w-narrow |
720px | Articles, contenu long, lecture |
| Gutter desktop | 24px | Espacement horizontal des sections |
| Gutter mobile | 20px | ≤ 640px de viewport |
| Breakpoints | 480 · 640 · 760 · 880 · 1100 px | Mobile-first, min-width |
Le call-to-action Love'nSpa
Quatre variantes, trois tailles. Le primary (rose) reste l'unique forme dominante — les secondaires et ghosts servent à la hiérarchie d'importance.
Variantes
Tailles
États
Avec icônes
Code prêt à copier
/* Bouton primary */ .btn-primary { background: var(--rose); color: var(--blanc); padding: 12px 22px; border-radius: var(--radius-pill); font-weight: 700; letter-spacing: 0.05em; transition: var(--t-fast); } .btn-primary:hover { background: #c2333f; box-shadow: var(--shadow-md); transform: translateY(-1px); }
Règles d'usage
- Un seul primary par écran principal. Plusieurs CTA roses dans la même vue diluent l'attention.
- Le secondary est le compagnon naturel du primary (« Réserver » + « En savoir plus »).
- Le ghost est réservé aux actions secondaires de modale ou de menu (Annuler, Fermer).
- Le verbe d'action commence le label. « Réserver », « Découvrir », « Recevoir » — pas « Cliquez ici ».
Liens dans le flow
Les liens sont rose, soulignés, sans gras. Le poids de la marque passe par la couleur, pas par la typographie.
Lien inline
Vous pouvez consulter notre politique de confidentialité à tout moment, ou nous contacter par email pour toute question.
Lien-flèche (CTA secondaire)
Champs de saisie
Les formulaires sont sobres, clairs, jamais surchargés. Focus rose, erreurs explicites, helpers contextuels.
Inputs texte
Cases à cocher & radio
Petits marqueurs
Pour signaler un statut, un compteur, une catégorie. Discrets mais visibles.
Variantes
Usages typiques
| Variante | Cas d'usage |
|---|---|
| Rose | Mise en avant prioritaire (Nouveau, Last chance) |
| Rose soft | Distinctions douces (Coup de cœur, Top) |
| Ink | Promo, prix barré, urgence neutre |
| Lin | Catégories, géolocalisations, filtres actifs |
| Outline | Filtres inactifs, tags secondaires |
Messages système
Quatre statuts, quatre couleurs. Toujours avec une icône, toujours actionnables (action ou fermeture possible).
Cards & navigation
Cards — trois variantes, jamais plus
Les cards Love'nSpa se déclinent en trois formes seulement. La discipline visuelle prime sur la diversité — et permet d'éviter les patterns AI-design (border-left colorée, ombres exagérées, fonds saturés).
Default
Border discrète, fond blanc. Hover ajoute une ombre légère et retire la border. Le standard universel — 80 % des cas d'usage.
Hairline
Fond crème, titre rose souligné par une fine barre. La variante éditoriale, pour les blocs de mise en valeur ou les featured sections.
Numbered
Chiffre crème en watermark via data-num. Idéal pour 3-4 étapes ou principes énumérés.
Le piège à éviter
La card avec border-left colorée est devenue un cliché immédiatement identifiable comme « design système SaaS 2020 ». L'accent passe par la couleur du titre (rose), par un chiffre en watermark, par un fond crème — jamais par une barre verticale colorée. Pas non plus de fond saturé (tinted rose pâle ou similaire) — ces patterns font « AI design » immédiatement.
Breadcrumbs
Tabs
Le contenu du tab actif s'affiche ici. Les transitions entre tabs sont instantanées — aucune animation lourde.
Données tabulaires
Header rose en majuscules, lignes alternées blanc / crème. Lisibilité maximale sans surcharge graphique.
| Love room | Région | Capacité | Tarif / nuit | Note |
|---|---|---|---|---|
| Le Boudoir Interdit | Paris | 2 personnes | 290 € | ★ 4.9 |
| La Suite Vénitienne | Lyon | 2 personnes | 240 € | ★ 4.8 |
| Le Cocon des Lavandes | Provence | 2 personnes | 320 € | ★ 5.0 |
| L'Écrin Brugeois | Bruxelles | 2 personnes | 260 € | ★ 4.7 |
Dialogues & overlays
Les modales restent rares — uniquement pour les actions critiques (confirmation, paiement, sortie). Toujours avec un fond flouté et un bouton de fermeture évident.
Confirmer votre réservation
« Le Boudoir Interdit » sera réservé pour le 14 février 2026. Le paiement sera prélevé immédiatement, sans frais cachés. Vous recevrez une confirmation par email.
Fonds & ambiances
Six dégradés autorisés, quatre à proscrire. Tous ceux qui sont validés restent dans la palette warm/clair — la marque ne fait pas de dégradé sombre, jamais de dégradé saturé hors-charte.
À utiliser ✓
À éviter ✗
Règles d'usage
Un seul dégradé par page — celui du hero ou d'une section featured. Le reste reste en aplats (blanc, crème, lin). Jamais de dégradé sur du texte — la lisibilité prime. Jamais de dégradé sur les boutons — le rose pur reste l'identité du CTA. Toujours rester dans la palette warm/clair — un dégradé qui sort de blanc/crème/lin/rose-pâle/rose est hors-charte.
Style line, stroke 1.5px
Toutes les icônes sont en line, stroke 1.5px, coins arrondis, sans remplissage. Cohérence garantie quelle que soit la taille (16, 24, 32, 48 px).
Set d'icônes essentiel
Règles d'usage
- Stroke 1.5px à toutes les tailles, jamais filled (sauf le cœur ♥ remplissable en rose pour favoris actifs).
- Tailles canoniques : 16px (inline), 20px (boutons), 24px (nav), 32px (sections), 48px (vide states).
-
Couleur : hérite via
currentColor. Adaptable au contexte sans surcharge CSS. - Source recommandée : Lucide Icons (open-source, MIT, cohérent avec ce style).
Le bloc CSS complet
Copiez ce bloc dans votre :root et tous les tokens deviennent accessibles via var(--token).
:root {
/* Couleurs principales */
--rose: #fc3a4a;
--ink: #222222;
--ink-soft: #6c6c6c;
--blanc: #FFFFFF;
/* Aplat secondaire — un seul */
--creme: #FBF6F2;
/* Réservé aux dégradés, pas en aplat */
--rose-pale: #FDF1F2;
/* Couleur d'interface (borders, dividers) */
--border: #EBE5E0;
/* Couleurs sémantiques */
--success: #2E7D5E;
--success-soft: #E6F3EE;
--warning: #B97A1F;
--warning-soft: #FBF1DD;
--info: #4D6B8A;
--info-soft: #EEF2F7;
/* Spacing (échelle 4pt) */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px;
--sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
--sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
--sp-16: 64px; --sp-20: 80px;
/* Border radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 14px;
--radius-xl: 24px;
--radius-pill: 999px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(34,34,34,0.06);
--shadow-md: 0 8px 30px rgba(34,34,34,0.08);
--shadow-lg: 0 20px 60px rgba(34,34,34,0.12);
--shadow-focus: 0 0 0 3px rgba(232,63,78,0.20);
/* Layout */
--max-w: 1100px;
--max-w-narrow: 720px;
/* Typo */
--fs-display: clamp(48px, 7vw, 76px);
--fs-h1: clamp(36px, 5vw, 56px);
--fs-h2: clamp(28px, 4vw, 40px);
--fs-h3: clamp(22px, 3vw, 28px);
--fs-h4: 18px;
--fs-body: 16px;
--fs-small: 14px;
--fs-caption: 12px;
/* Transitions */
--t-fast: 0.15s ease;
--t-base: 0.25s ease;
}
Le HTML import Google Fonts à ajouter dans <head> :
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">