Carte animée normale
Fond violet clair, hover lift, bordure bleue, shadow bleue, ligne gradient en bas.
Colors
Les couleurs principales à ne pas réinventer à chaque page.
Blue — #4f6ef7
Violet — #7b5cf7
Grey bg — #fafbff
Violet bg — #f8f6ff
Text — #16213e
White — #ffffff
Typography
Les titres restent dark. Pas de titres bleus sauf cas très spécifique.
H1
Heading — H1
H2
Heading — H2
H3
Heading — H3
Paragraph
Texte secondaire en rgba(22,33,62,.72). Ne jamais utiliser de sélecteur global comme .section p.
Small
Texte discret / information secondaire.
Buttons
Boutons primaires et secondaires utilisés sur les pages light.
Cards
Ne mélange pas carte animée et carte non animée. C’est une erreur que tu fais souvent.
Carte animée hover
État hover forcé pour visualiser la règle directement dans le guide.
Carte non animée normale
Fond blanc, pas de translateY, pas de ligne gradient.
Carte non animée hover
Hover uniquement sur bordure et shadow. Pas d’animation excessive.
Hero patterns
Les 3 cas à ne pas confondre : image background, image carte, carte témoignage.
Hero avec image en background
Image immersive en arrière-plan
À utiliser quand l’image sert d’ambiance. Overlay obligatoire pour garder le texte lisible.
Hero avec image en carte
Image carte à droite
À utiliser pour les formations, pages produit ou pages éditoriales. Shadow violet/bleu, pas de bord blanc.
Hero avec carte témoignage
Carte partenaire / cas client
À utiliser quand le hero doit contenir une preuve, une citation ou une carte de marque.
“Une carte claire, lisible, avec fond blanc, shadow violet/bleu et texte secondaire lisible.”
Nom client Rôle ou entrepriseTags / badges
Tags bleus légers. Les tags compétences peuvent passer en bleu plein au hover.
Section backgrounds
Règle simple : alterner gris / violet. Pas de violet sur violet.
Section gris clair
À utiliser quand les cartes sont violettes.
Section violet clair
À utiliser quand les cartes sont blanches ou neutres.
Formulaire HubSpot
Pour les formulaires HubSpot où le texte reste blanc : fond violet assez contrasté.
Checklist avant publication
Si une ligne n’est pas respectée, la page n’est pas prête.
- Les titres restent en #16213e
- Pas de sélecteur global type .section p
- Les sections alternent gris / violet
- Pas de violet sur violet
- Les cartes animées ont une ligne gradient
- Les cartes non animées ne bougent pas
- Les icônes ont fond violet clair + SVG violet
- Les boutons gardent le bleu #4f6ef7
- Les images hero n’ont pas de liseré blanc
- Les préfixes de classes sont cohérents