Charte graphique
Une seule identité, partout.
Référence vivante : toutes les valeurs affichées ici sont lues directement dans les tokens du site (src/styles.css). Si un écran ne ressemble pas à cette page, c'est l'écran qu'il faut corriger.
01 — Couleurs
Palette et rôles
On n'écrit jamais une couleur en dur dans un composant (pas de #hex, pas de text-white) : uniquement les tokens ci-dessous.
Fond
--background
Base claire du site, complétée par le dégradé Lovable.
Texte
--foreground
Encre bleu nuit, texte courant et titres.
Primaire / CTA
--primary
Corail. Boutons d'action, liens forts, focus.
Texte secondaire
--muted-foreground
Sous-titres, aides, mentions légales.
Îlot sombre
--ink
Sections contrastées ; texte en on-ink.
Surface vitrée
--surface
Cartes translucides posées sur le dégradé.
Bordure
--border
Séparateurs, contours de cartes et champs.
Secondaire
--secondary
Fonds de puces, badges neutres.
Accents dégradé
Rose
--lovable-pink
Départ du dégradé (logo, badges).
Orange
--lovable-orange
Fin du dégradé, CTA premium.
Bleu
--lovable-blue
Respiration froide en bas de page.
Dégradé de fond global : blanc → rose → orange → bleu. Un seul dégradé par écran, jamais deux en concurrence.
États
Succès
--success
Validé, vérifié, paiement confirmé.
Attention
--warning
E-mail non confirmé, action à faire.
Information
--info
Onboarding en cours, rappels.
Erreur
--destructive
Uniquement erreurs et annulations.
02 — Typographie
Fraunces & Inter
Titres — Fraunces (serif)
Une bonne table
Sous-titre de section
- H1 : 36–48 px · H2 : 24–30 px · H3 : 20 px
- Jamais en capitales, jamais en gras lourd
- Classe : font-display
Texte — Inter (sans-serif)
Six inconnus, une table, une soirée. Le corps de texte reste en Inter, taille 15–16 px, interligne généreux pour rester lisible sur mobile.
Texte secondaire — 14 px, couleur muted-foreground.
Eyebrow / label
- Corps : 15–16 px · Petit : 13–14 px · Label : 11–12 px
- Labels en capitales avec tracking-label
- Classe : font-sans (par défaut)
03 — Logo
Usages du wordmark
- ✓Wordmark serif entièrement vectoriel (tracés SVG, aucune webfont) : L, N, K en encre, le Y en dégradé rose → orange.
- ✓Les liaisons sont dessinées en dur, pas réglées à l'interlettrage : le pied du L fusionne avec l'empattement bas du Y, et l'empattement haut de la branche droite du Y fusionne avec le sommet du N.
- ✓Toujours posé dans une pastille ronde en dégradé clair (blanc → rose → orange → bleu) à fin liseré corail.
- ✓Trois tailles : sm 48 px · md 64 px · lg 112 px.
- ✓Le tracé est identique à toutes les tailles : seule la marge du cadrage se resserre en taille sm.
- ✓Le logo est une pastille image unique, utilisée telle quelle partout (site, e-mails, favicon).
- ✕Ne pas séparer les lettres : les liaisons L–Y et Y–N font partie de la marque.
- ✕Ne pas colorer L, N, K en dégradé ni le Y en encre.
- ✕Ne pas déformer, incliner, ombrer ou contourer.
- ✕Ne pas poser le logo sur une photo chargée sans voile clair.
Favicon et icône d'app : le Y dégradé seul sur pastille claire. Le wordmark complet est réservé aux en-têtes, e-mails et visuels sociaux.
Mode sombre
En mode sombre, la pastille s'assombrit et les lettres passent en ivoire ; le Y garde son dégradé rose → orange, remonté en luminosité pour conserver le contraste AA. Aucune couleur en dur : tout passe par les mêmes tokens.
04 — Interface
Boutons, cartes et rythme
- ✓Un seul bouton plein (corail) par écran : l'action que l'on veut vraiment.
- ✓Boutons et chips en pleine rondeur (rounded-full), cartes en rounded-xl.
- ✓Cible tactile ≥ 44 px, anneau de focus visible au clavier.
- ✓Cartes : surface vitrée + bordure fine, ombres légères uniquement.
- ✓Espacement vertical par section : 48 px mobile, 80 px desktop.
- ✓Animations sobres, désactivées si prefers-reduced-motion.
05 — Ton
Voix de marque
- ✓Tutoiement chaleureux, phrases courtes, zéro jargon.
- ✓On parle de « table », de « membres » et de « soirée » — jamais de « match » ni de « swipe ».
- ✓Rassurer avant de vendre : sécurité, vérification, remboursement en pass.
- ✕Pas d'emoji dans l'interface ni dans les e-mails transactionnels.
Page interne de référence — non indexée. À mettre à jour en même temps que les tokens.