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 tracé en SVG : L, N, K en encre, le Y remplacé par un verre à cocktail rempli d'une boisson corail.
- ✓Toujours posé dans une pastille ronde crème à fin liseré corail.
- ✓Trois tailles : sm 48 px · md 64 px · lg 112 px.
- ✓En taille sm, le dessin se simplifie : ni olive ni reflet, pour rester lisible.
- ✓Variante monogramme variant="glass" : le verre seul, pour favicon et petites icônes.
- ✕Ne pas remettre un « Y » typographique à la place du verre.
- ✕Ne pas colorer les lettres en corail ni la boisson 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 verre à cocktail seul, boisson corail sur pastille crème. 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 (text-on-ink) ; la boisson garde son corail, 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 crédit.
- ✕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.