page-d-accueil

Landing Page

Produisez un seul fichier HTML autonome qui a l’air art-directé, pas généré. L’exemple dans examples/ (pulse-landing.html) est le niveau de qualité à atteindre. Reproduisez son niveau de spécificité : copie crédible, espacement réfléchi, un seul accent.

Avant de construire

Collectez ou inventez (et gardez cohérents) ces cinq éléments :

1. Produit en une phrase : ce que c’est et ce qu’il fait.
2. Audience : une personne précise, pas « tout le monde ».
3. L’action principale unique (s’inscrire, acheter, télécharger, rejoindre une liste d’attente).
4. Un élément de preuve : un chiffre, une citation ou un résultat concret. Si l’utilisateur n’en a aucun, utilisez un mécanisme à la place (« fonctionne hors ligne », « aucun compte requis ») — n’inventez jamais de témoignages ou de statistiques.
5. Ton : choisissez-en un — calme/premium, audacieux/fort, chaleureux/humain, technique/précis.

Si l’utilisateur vous a donné un produit et une audience, ne posez pas plus de questions. Faites des choix raisonnables et notez-les sur une ligne à la fin.

Tokens de design (système par défaut — « Ink & Citrus »)

Utilisez ces valeurs sauf si l’utilisateur fournit des couleurs de marque. Modifiez toutes les valeurs à un seul endroit : le bloc :root.

:root{
  --bg:#0F1013;        /* fond de page */
  --panel:#17181D;     /* surfaces surélevées */
  --line:#26272E;      /* filets, bordures */
  --ink:#F4F2EA;       /* texte principal */
  --muted:#9BA0A6;     /* texte secondaire */
  --accent:#D9F24F;    /* UN accent — boutons, surlignages */
  --radius:14px;
  --font:"Inter","Helvetica Neue",Arial,sans-serif;
}

Règles qui donnent un aspect design :

• Une seule couleur d’accent. Tout ce qui est cliquable ou important l’utilise ; rien d’autre ne rivalise. Pas de dégradés arc-en-ciel, pas de « dégradé IA » violet-bleu.
• La typographie fait le travail. Titre à 56–72 px, graisse 800, interlétrage légèrement négatif (-0.02em). Corps à 17–18 px, hauteur de ligne 1.6. Étiquettes en petites capitales (12 px, interlétrage 0.12em, majuscules, atténué) au-dessus des titres.
• Espacement par multiples de 8. Padding de section 96 px en haut/bas sur ordinateur. Si un écart semble arbitraire, il se lit comme généré.
• Filets au lieu d’ombres. Séparez les sections avec des bordures --line de 1 px, pas d’ombres portées ou de cartes flottantes sur fond coloré.
• Les chiffres comme élément design. Grands chiffres de stats (48 px+) dans l’accent ou l’encre, avec de petites étiquettes atténuées. Une ligne de trois stats maximum.

Recette de la page (dans cet ordre)

1. Barre supérieure — nom de marque à gauche, deux ou trois liens en texte brut, un bouton d’accent (l’action principale). Bordure inférieure fine.
2. Hero — étiquette en petites capitales (catégorie), titre, une phrase de soutien (max 22 mots), bouton primaire + un lien secondaire discret. À droite ou en dessous : un visuel produit en CSS (une fenêtre fictive, un groupe de cartes de stats, une composition typographique). Jamais de boîte grise vide de placeholder.
3. Bande de logo/preuve — une ligne : « Utilisé par … » avec des noms de marque en texte, ou la ligne de stats de preuve. Ignorez entièrement s’il n’y a pas de preuve honnête.
4. Problème → changement — deux colonnes : l’ancienne méthode (atténuée, barrée) contre la façon du produit. Lignes courtes, pas de paragraphes de plus de 3 lignes.
5. Fonctionnalités — exactement trois ou quatre. Chacune : numéro en petites capitales (01–04), titre, description sur deux lignes. Grille avec séparateurs en filet, pas six cartes d’icônes identiques.
6. Comment ça marche — trois étapes numérotées, une ligne chacune.
7. Tarification ou offre — si l’utilisateur a donné un prix : un plan mis en avant, ce qui est inclus sous forme de liste à cocher, le bouton d’action principal. Si pas de prix : une bande CTA / liste d’attente à la place.
8. FAQ — quatre questions maximum, rédigées en fonction d’objections réelles (prix, effort, changement, « est-ce pour moi »).
9. Bande CTA finale — bloc de fond d’accent, texte couleur encre, titre qui répète la promesse principale en d’autres termes, un bouton.
10. Pied de page — nom de marque, une ligne de positionnement, tous petits liens. Pas de ferme de plan de site.

Règles de rédaction

• Formule de titre : [résultat spécifique] pour [personne spécifique], ou une affirmation concrète que le produit peut étayer. « Reprenez vos soirées, coureurs » — pas « Bienvenue dans le futur de la productivité ».
• Chaque section doit contenir au moins un nom concret et un nombre ou un nom. Les adjectifs vagues (« fluide », « puissant », « révolutionnaire », « de pointe », « nouvelle génération ») sont interdits.
• Les boutons disent ce qui se passe : « Commencer gratuitement », « Obtenir le modèle », « Rejoindre la liste d’attente ». Jamais « En savoir plus » comme action principale.
• Écrivez comme le créateur du produit, la première personne du pluriel avec parcimonie (« nous avons construit cela parce que… »), jamais le langage « solutions » d’entreprise.

Anti-patrons (le « look IA » — ne jamais faire ça)

• Dégradés de fond violet/bleu dans le hero ou texte en dégradé.
• Trois cartes identiques avec des emoji ou des icônes SVG génériques dans des cercles.
• Copie style « 🚀 Boostez votre flux de travail », points d’exclamation dans les titres.
• Lorem ipsum, « Fonctionnalité Une / Fonctionnalité Deux », placeholders d’images libres de droits.
• Tout centré. Mélangez des blocs de texte alignés à gauche avec des visuels décalés.
• Plus de deux familles de graisses de police, ou plus d’une couleur d’accent.
• Témoignages faux, logos faux, statistiques inventées. Jamais.

Règles techniques

• Un seul fichier HTML, CSS dans <style>, aucune ressource externe sauf un lien Google Fonts (Inter ou la police de la marque de l’utilisateur). Pas de JavaScript requis sauf un toggle optionnel pour la FAQ.
• Balises sémantiques : header, main, section, footer. Un vrai <h1> une fois.
• Responsive : une seule colonne en dessous de 760 px, visuel du hero en dessous du texte, cibles tactiles d’au moins 44 px.
• Gardez le fichier sous ~700 lignes. Si plus est nécessaire, la page en fait trop — réduisez une section.

Checklist QA (à exécuter avant de livrer)

• Une seule couleur d’accent, utilisée de façon cohérente ; pas de dégradés sauf un subtil fondu de fond de même teinte.
• Le titre contient un résultat concret et une audience ou un mécanisme spécifique.
• Chaque chiffre sur la page provient de l’utilisateur ou des mécanismes réels du produit.
• Aucun mot interdit : fluide, booster, révolutionner, de pointe, nouvelle génération, libérez votre potentiel.
• S’affiche correctement à 390 px de large sans défilement horizontal.
• L’action principale apparaît au moins trois fois (barre supérieure, hero, bande finale).