Style Business

Style Business

Sérieux sans être ennuyeux. Structure, clarté, confiance : ton visiteur doit comprendre ce que tu vends en cinq secondes.

Quand l'utiliser

• SaaS B2B, conseil, ESN, cabinets d'avocats ou d'expertise, sites corporate, pages carrières, back-offices.
• Évite-le pour une marque grand public émotionnelle, un événement ou une cause : il manquera de chaleur.

Palette

• Fond : blanc #ffffff, sections alternées #f8fafc.
• Texte : #0f172a (17.8:1). Secondaire : #475569 (7.2:1 sur #f8fafc). Désactivé : #94a3b8.
• Bordures : #e2e8f0, hover de ligne #f1f5f9.
• Primaire : bleu confiance #2563eb (5.2:1, texte blanc OK). Variante institutionnelle : navy #1e3a8a (10.4:1) pour footer et headers sombres.
• Succès : #16a34a en icône, #15803d en texte (5.0:1). Erreur : #dc2626. Warning : #eab308 en fond avec texte #0f172a (9.3:1), jamais en texte sur blanc.
• Neutres : échelle Tailwind slate 50 à 900, rien d'autre.

Typographie

• Inter (Google Fonts) par défaut, IBM Plex Sans en alternative, Söhne si licence.
• Échelle : H1 48px/1.1 (700, letter-spacing -0.02em), H2 32px/1.2 (700), H3 20px/1.4 (600), body 16px/1.6 (400), small 14px/1.5, overline 12px (600, uppercase, 0.08em).
• Mobile : H1 34px, H2 26px, via clamp().
• Poids limités à 400, 500, 600, 700. Jamais 900.
• Mesure de paragraphe : 65 caractères max.

Layout & grille

• Grille 12 colonnes, max-width 1200px, gouttière 24px, marges latérales 5 à 8%.
• Rythme 8px, sections de 96px desktop et 64px mobile.
• Cards : border: 1px solid #e2e8f0, radius 8px, ombre 0 1px 2px rgba(15,23,42,.06), padding 24px.
• Tables : zebra #f8fafc, header sticky, filtres au-dessus, pagination en bas.
• Breakpoints : 640, 768, 1024, 1280px. Sidebar applicative repliée sous 1024px.

Composants signature

• Hero : overline, H1 de proposition de valeur, sous-titre 18px, CTA primaire + lien secondaire, capture produit dans un cadre à radius 12px.
• Bande de logos clients en niveaux de gris, opacité 0.7, 5 à 7 logos.
• Bénéfices : 3 colonnes, icône Heroicons ou Lucide 24px dans un carré #eff6ff, titre 18px, 2 lignes de texte.
• "Comment ça marche" : 3 à 4 étapes numérotées avec pastille 32px primaire.
• Comparatif "nous vs alternatives" : coches #15803d, croix #94a3b8, honnête (admets ce que tu ne fais pas).
• Témoignage : photo ronde 48px, citation 18px, nom, poste, entreprise, logo.
• Boutons : hauteur 44px, radius 8px, padding 0 20px, 600. Primaire plein, secondaire bordure slate-300.
• Nav : sticky 64px, fond blanc à 90% avec backdrop-filter: blur(8px) et bordure basse au scroll.

Motion

• Durées 150 à 250ms, easing cubic-bezier(0.4, 0, 0.2, 1).
• Autorisé : hover (couleur, ombre), ouverture de menus, accordéons FAQ, fade-in léger (opacity + 8px) une seule fois au scroll.
• Interdit : parallax, animations en boucle, texte qui tape, carrousels auto.
• prefers-reduced-motion : désactive les reveals au scroll.

Tokens CSS

:root {
  --bg: #ffffff;
  --surface: #f8fafc;
  --text: #0f172a;
  --muted: #475569;
  --border: #e2e8f0;
  --primary: #2563eb;
  --primary-dark: #1e3a8a;
  --success: #15803d;
  --danger: #dc2626;
  --warning: #eab308;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  --font: Inter, "IBM Plex Sans", system-ui, sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

Checklist avant livraison

• La proposition de valeur tient en une phrase lisible au-dessus de la ligne de flottaison.
• Contraste AAA sur les CTA et les zones de conversion.
• Une seule couleur d'accent, utilisée de façon cohérente.
• Toutes les icônes viennent de la même librairie, même épaisseur de trait.
• Les tables restent lisibles sur mobile (scroll horizontal ou cartes).
• Aucun emoji dans les textes formels.

À éviter

• Photos stock de gens souriant devant un laptop.
• Gradients arc-en-ciel, glassmorphism partout, ombres épaisses.
• Superlatifs vides ("solution innovante de pointe").
• Mélanger plusieurs bleus primaires ou plusieurs radius.
• Tableau comparatif truqué où tu gagnes sur tout.

Prompts de démarrage

• "Crée la homepage d'un SaaS B2B de gestion de notes de frais en style-business : hero, logos, bénéfices, comment ça marche, pricing, FAQ."
• "Conçois le site d'un cabinet de conseil en stratégie avec pages expertises, études de cas et recrutement."
• "Fais une page pricing à trois plans avec un tableau comparatif détaillé et une FAQ."
• "Construis un back-office admin avec sidebar, table filtrable et fiche détail."