Sites SaaS haut de gamme

Premium SaaS Web

Cette compétence encode ce qui rend les meilleurs templates SaaS/AI/agence visuellement chers. Elle a été distillée en inspectant six sites de référence au niveau CSS (OptimAI, Aigocy, Adon, Davies, Pastily, une démo de générateur d'images IA) et en mesurant les valeurs réelles qu'ils utilisent. Les recettes sont les vraies techniques, pas des suppositions.

Organisation des fichiers. Ne chargez que ce dont la tâche a besoin :

• directions/<nom>/style.md : un fichier par direction visuelle (tokens, polices, éléments signature, techniques propres à cette direction). Lisez uniquement celle que vous choisissez.
• shared/*.md : techniques utilisées par toutes les directions, réparties par sujet. Lisez ceux correspondant aux sections que vous construisez (correspondance dans l'étape 3).

L'intuition centrale : premium = lumière contrôlée + retenue + mouvement

Les pages bon marché et les pages premium utilisent souvent les mêmes composants (hero, logos, fonctionnalités, tarifs, FAQ, CTA). La différence réside dans quatre couches de finition :

1. Lumière — les surfaces semblent éclairées, pas remplies. Les lueurs sont sculptées à partir de formes floues ; les cartes ont un reflet en haut à gauche ; les boutons ont un surbrillance intérieure et un bord inférieur interne ; les bordures sont des cheveux fins à 6–20 % d'opacité. La vraie lumière s'atténue, donc rien n'est un bloc de couleur plat.
2. Retenue — une couleur d'accent, utilisée sur ≤5 % de la page. La hiérarchie du texte vient de l'opacité d'une seule couleur (100 / 80 / 60 / 50 %), pas de plusieurs gris. Deux polices maximum (+ une police monospace optionnelle pour les étiquettes). Zéro décoration qui ne porte pas de sens.
3. Typographie avec tension — le texte d'affichage est grand et très serré (letter-spacing −2% à −7%), line-height ≈ 1.0–1.2. La moitié d'un titre est souvent atténuée (opacity .5 ou un dégradé plus clair) pour que l'œil lise d'abord la partie forte.
4. Mouvement avec poids — défilement fluide (Lenis), titres qui apparaissent mot par mot, texte qui se remplit au défilement, compteurs qui défilent, marathons qui ne s'arrêtent jamais, cartes qui s'empilent. Tout s'adoucit à la sortie (pas de linéaire), rien ne rebondit, et tout respecte prefers-reduced-motion.

Si une sortie n'a que les composants mais pas ces quatre couches, elle ressemblera à un thème Bootstrap gratuit, quel que soit le nombre de sections.

Workflow

1. Lisez le brief, choisissez UNE direction

Choisissez une direction dans ce tableau, puis lisez son directions/<dossier>/style.md (ensemble complet de tokens + ses techniques signature). Ne lisez pas les autres directions.

Direction (dossier)	Ambiance	Idéal pour	Source
Ember Dark (ember-dark)	Bleu marine profond/noir, lueur orange/rouge ou bleue sculptée, bord arc-en-ciel CTA, étiquettes de boutons en mono	Outils IA, outils dev, apps SaaS	OptimAI
Tactile Light (tactile-light)	Zinc/blanc cassé, boutons skeuomorphes brillants, cartes à reflet, un accent chaud (rouge), hero encadré avec rendu 3D	Agences IA, SaaS B2B, sociétés de conseil	Aigocy
Editorial Mono (editorial-mono)	#111 pur sur #F0F0F0, grotesk 140px à −7% de tracking, grille de cheveux fins, texte de remplissage au défilement, pas d'ombres	Agences, studios, services premium	Adon
Noir Spotlight (noir-spotlight)	Noir, un accent néon, un mot géant interagissant avec une photo, fond shader/WebGL, cartes de projet empilées	Marques personnelles, portfolios, tech créative	Davies
Warm Playful (warm-playful)	Papier blanc cassé chaud, encre quasi noire, vert atténué→or, cartes blanches de 28px, notes manuscrites, appareil dépassant du bord, tarifs avec photo en fond	Applications de bureau/menu-bar, utilitaires, outils indépendants et grand public, logiciels à achat unique	Pastily

Si l'utilisateur n'a pas précisé et qu'il s'agit de SaaS/AI, choisissez par défaut Ember Dark. Passez à Warm Playful quand le produit est un utilitaire natif/bureau/mobile, un outil indépendant ou solo-founder, ou que le brief mentionne convivial, accessible, cosy, « pas corporate » (même s'il ne dit jamais « SaaS »). Ember Dark donnerait à une application de presse-papiers à 9$ l'air d'une infrastructure d'entreprise. Mélanger les directions, c'est rendre les pages brouillonnes. Emprunter une technique d'une autre direction est acceptable, tant que la palette et la typographie restent cohérentes.

Dites à l'utilisateur en une ligne quelle direction vous avez choisie et pourquoi, pour qu'il puisse rediriger tôt. Conservez l'accent de la direction sauf si la marque a sa propre couleur (l'utilisateur en nomme une, ou le produit en utilise déjà une) ; des mots d'ambiance comme « cosy » ou « crépuscule » ne sont pas une couleur de marque. Pour une couleur de marque réelle, voir « Changer l'accent » dans directions/README.md.

2. Planifiez la page comme un rythme, pas une liste

Les pages premium alternent densité et ton. Un home SaaS typique qui fonctionne :

1. Hero : badge de sourcil (une pilule comme «✦ AI-Driven Agency» ou un fait réel tel que « v1.4 est sortie » ; une pile d'avatars + note uniquement si l'utilisateur vous a donné une note réelle), titre sur 2 lignes avec une moitié atténuée, sous-titre de 1 à 2 lignes à 60 % d'opacité, CTA principal + secondaire, puis le produit lui-même (maquette encadrée navigateur ou une boîte de prompt interactive) débordant dans la section suivante via un dégradé de fondu.
2. Bande de logos : logos en niveaux de gris, marquage infini, bords masqués.
3. Grille de fonctionnalités Bento : 5–7 cellules de taille inégale, chacune avec une mini illustration UI construite en HTML/CSS (nœuds de workflow, bulles de chat, bascules, graphiques, pastilles de couleur), pas d'icônes de stock.
4. Déclaration de remplissage au défilement : une grande phrase qui se remplit de 30 % → 100 % au fur et à mesure que vous défilez. Le remplissage se fait strictement ligne par ligne (une timeline nettoyée par bloc, les lignes se succédant), jamais plusieurs lignes à la fois. Voir shared/typography.md.
5. Chiffres : 3–4 statistiques avec compteurs défilants ; un grand chiffre atténué comme décoration.
6. Comment ça marche / onglets ou cartes empilées.
7. Témoignages : uniquement les citations fournies par l'utilisateur, avatar + nom + rôle, éventuellement un marquage vertical de cartes. S'il n'y en a pas, laissez la section de côté (ou remplacez-la par une bande de confiance/ confidentialité ou une courte note du créateur). Les avis, notes et comptes d'utilisateurs inventés sont une preuve sociale factice : ils induisent en erreur les acheteurs et le propriétaire peut les expédier par accident.
8. Tarifs : 3 niveaux, celui du milieu surélevé avec la bordure/lueur d'accent, bascule mois/année.
9. FAQ en accordéon.
10. CTA final avec la lueur la plus forte de la page, puis un pied de page calme avec un grand mot-symbole.

Alternez les fonds de section sombre/clair (ou bg-1/bg-2) pour créer un rythme. Le padding des sections est généreux : 120–176 px verticalement sur desktop.

3. Construisez avec les recettes

Les recettes sont du CSS/HTML/JS prêt à être copié. Le style.md de votre direction contient déjà ses techniques signature (ex. bord arc-en-ciel pour Ember, boutons tactiles et cartes à reflet pour Tactile). Pour tout le reste, lisez le fichier partagé qui correspond à ce que vous construisez :

Vous construisez…	Lisez
Lumière du hero, lueurs, fonds à points/grille/bruit, grille de cheveux fins & guides de colonnes	shared/light.md
Titres (tracking serré, moitié atténuée, dégradé métallique), déclaration de remplissage au défilement (GSAP ligne par ligne, ou mot par mot avec mots-clés colorés)	shared/typography.md
Maquette du produit dans le hero (encadré navigateur ou appareil de bureau avec chrome OS), galerie de captures d'écran, grille Bento avec mini-UIs	shared/product-proof.md
Nav en verre, nav à pilules sensible à la section, badge de sourcil & pile d'avatars, annotations manuscrites, cartes blanches douces, spot sur carte, marquage, tarifs (3 niveaux, prix unique avec photo en fond, ou carte de prix unique simple), FAQ, mot-symbole de pied de page	shared/components.md
Toute marque nommée avec une icône (intégrations, bande de logos, orbite, « fonctionne avec »)	shared/logos.md
Boilerplate GSAP + Lenis, tableau de timing/easing, motif de mouvement réduit gsap.matchMedia(), révélations, compteurs, cartes empilées, pile d'histoires à changement de ton en CSS uniquement, mur de puces UI épinglé, défilement épinglé, survol, pièges, mouvement natif avec scroll-driven CSS	shared/motion.md
Fond shader/WebGL, champ de particules, bloom (Three.js, avec fallback CSS et porte mobile)	shared/webgl.md

Une page d'accueil complète en a généralement besoin de tous ; une section unique ou une petite modification n'a besoin que de sa ligne. Tous les plugins GSAP, y compris SplitText, sont gratuits depuis la version 3.13, chargez-les depuis jsDelivr.

4. Valeurs techniques par défaut

• Fichier HTML unique avec Tailwind CDN (ou la pile existante du projet — suivez-la si elle existe). Mettez les tokens de design dans des propriétés personnalisées CSS sur :root afin qu'un changement de palette soit une seule modification.
• Polices depuis Google Fonts. Associations éprouvées issues des références : Sora + Inter Tight + IBM Plex Mono (Ember), Urbanist (Tactile), une grotesk comme « Inter Tight »/« Schibsted Grotesk »/« Familjen Grotesk » + DM Sans (Editorial), Figtree/« Outfit » (Noir).
• Icônes : SVG en ligne (style Lucide, trait 1,5px). Jamais d'emoji en guise d'icônes.
• Images : si la génération d'images est disponible, générez des rendus 3D / objets abstraits conformes à la marque ; sinon, construisez les visuels avec CSS/SVG (lueurs, mini UIs, globes de points). Utilisez les photos https://images.unsplash.com/... uniquement pour les personnes/portraits. Une page sans ancrage visuel dans le hero semble inachevée.
• Vrais logos de marque, jamais de placeholders de lettres. Chaque fois que la page nomme une entreprise, un produit ou un SaaS existant (puces d'intégration, arcs/bandes de logos, bandes « fonctionne avec », témoignages, tableaux de comparaison) et que vous montrez une icône à côté, utilisez le vrai logo de cette marque. Un carré coloré avec l'initiale (« F » pour Figma, « S » pour Slack) semble être un template bon marché et brise la confiance. Détails et sources dans shared/logos.md. Si aucun vrai logo ne peut être sourcé, affichez le nom en texte brut sans aucune icône ; une fausse icône est pire que rien.
• Mobile : tout se réduit à une seule colonne à <768px ; la taille d'affichage s'adapte avec clamp() ; les lueurs rétrécissent (les gros flous sont coûteux sur les téléphones) ; désactivez les effets de curseur sur le tactile.

5. Auto-révision avant de remettre

Ouvrez la page dans un navigateur et faites une capture d'écran à 1440px et 390px, si possible. Vérifiez par rapport à cette liste. Ce sont les éléments qui séparent « généré par IA » de « best-seller » :

• Une seule teinte d'accent (plus les neutres). Les dégradés restent dans cette famille de teinte, sauf une bordure arc-en-ciel intentionnelle.
• Le titre d'affichage a un espacement négatif entre les lettres et une moitié atténuée ou un dégradé.
• Le texte du corps/secondaire utilise des paliers d'opacité d'une seule couleur, et le contraste est toujours suffisant (≥4.5:1 pour le corps).
• Le hero montre le produit (maquette, boîte de prompt, UI), pas seulement du texte sur un dégradé.
• Au moins une source lumineuse sculptée par section sombre ; pas de rectangles plats de couleur pure.
• Les bordures sont des cheveux fins (1px, alpha 6–20 %), les rayons sont cohérents (choisissez une échelle : 8/12/20/28/999).
• Les boutons ont des états au survol qui changent la lumière (la lueur se resserre, le reflet se déplace, la flèche se déplace de 2–4 px), pas seulement la couleur.
• Mouvement : révélation du texte du hero, fondus déclenchés par le défilement avec décalage, au moins un effet lié au défilement, marquage. Tout désactivé sous prefers-reduced-motion (via gsap.matchMedia()), durées issues du tableau de timing dans shared/motion.md, rien n'anime width/height/top/left.
• Si WebGL est utilisé : lueur CSS en dessous comme fallback, DPR limité, rendu uniquement lorsqu'il est visible, ignoré sur les appareils mobiles/peu performants, le texte reste en HTML.
• Chaque marque réelle nommée sur la page a son vrai logo (ou pas d'icône). Pas de carrés avec des initiales.
• Si Warm Playful : l'appareil du hero est un vrai OS (barre de menus, dock, menu d'application) construit en HTML, dépasse d'un bord, et a au plus deux notes en Caveat ; les cartes d'histoire collent avec un pas top de 16px et un changement de ton par carte ; les couleurs des mots-clés apparaissent sur des mots uniques uniquement et passent le 4.5:1 ; l'accent est toujours le vert (sauf si l'utilisateur a donné une couleur de marque) et l'or apparaît uniquement à la fin du dégradé du CTA ; le prix unique est une carte blanche (avec photo en fond si vous avez une photo, sinon simple), avec tout essai gratuit sous forme de ligne à l'intérieur.
• Pas de lorem ipsum. Le texte est spécifique au produit : chiffres concrets, fonctionnalités à l'aspect réaliste.
• Pas de preuve sociale inventée : pas de notes, comptes d'utilisateurs, témoignages ou logos de presse fabriqués. Les détails du produit que vous avez dû supposer sont listés pour que l'utilisateur les confirme.
• Rien ne déborde horizontalement à 390px.

Ce qu'il faut éviter (les signes de « template bon marché »)

• Les boutons qui bougent au survol. Règle stricte, sans exception. Pas de boutons magnétiques/suiveurs de curseur, pas de translate/scale/rotate sur un bouton ou son étiquette/icône au :hover, pas de flèches qui glissent, pas de soulèvement au survol. La mise en page reste immobile sous le curseur, de sorte que la cible de clic ne s'esquive jamais. Montrez le survol avec des changements de couleur, luminosité, lueur, bord ou ombre uniquement. (Les cartes peuvent encore se soulever ; les boutons et les liens stylisés comme des boutons ne le peuvent pas.)
• Dégradé violet-bleu partout ; plusieurs couleurs d'accent concurrentes.
• Ombres portées comme 0 4px 6px rgba(0,0,0,.3) sur fonds sombres (les ombres ne se lisent pas sur fond sombre ; utilisez plutôt des lueurs et des bordures).
• Tout centré avec des grilles de cartes identiques de 3 icônes + titre + texte.
• Glassmorphisme sans rien derrière le verre pour flouter.
• Fausses icônes de marque : un carré arrondi coloré avec une lettre représentant Figma, Slack, GitHub, etc.
• Easing élastique/rebondissant, fondus de plus d'1s, animations sur tous les éléments à la fois.
• Texte en dégradé sur le corps ; plus d'une phrase en dégradé par viewport.
• Imagerie « cerveau IA » de stock. Montrez plutôt le produit ou un rendu abstrait.
• Texte du corps à faible contraste sur fond sombre : gardez le corps au moins ~70 % blanc pour qu'il reste lisible malgré les lueurs.