Style Bank & Assurance

Style Bank & Assurance

Confiance instantanée, précision sur chaque chiffre. Ton lecteur confie son argent : il ne pardonnera aucun flou.

Quand l'utiliser

• Banques, néobanques, assureurs, mutuelles, courtiers, patrimoine, crédit, épargne retraite.
• Espaces clients, simulateurs, souscription, onboarding KYC, comparateurs de garanties.
• Évite-le pour une app crypto ludique ou une marque lifestyle : il paraîtra froid et administratif.

Palette

• Fond : blanc #ffffff, surface gris institutionnel #f6f8fa, bordures #e2e8f0.
• Texte : slate #0f172a (17.8:1). Secondaire : #475569 (7.6:1).
• Primaire : bleu profond #0f4c81 (8.9:1) ou vert institutionnel #0f766e (5.5:1). Un seul par produit.
• Succès, gain : #059669 en icône, #047857 en texte (5.5:1).
• Perte, erreur : #dc2626 (4.8:1).
• Attention : #d97706 en fond ou icône, #b45309 pour du texte (5.0:1).
• Premium : or discret #b8860b, réservé à un liseré ou une pastille "Prestige", jamais en texte courant (3.2:1).
• Vise AA partout, AAA (7:1) sur les montants, taux et mentions légales.

Typographie

• Famille unique : IBM Plex Sans ou Inter (Google Fonts). Söhne ou Suisse si la licence existe.
• Chiffres : font-variant-numeric: tabular-nums sur tout montant, taux, date, IBAN. IBM Plex Mono pour IBAN et références.
• Échelle : H1 40px/1.2 (700), H2 28px/1.3 (600), H3 20px/1.4 (600), body 16px/1.6 (400), small 14px/1.5, légal 12px/1.5.
• Montant clé (solde, mensualité) : 32 à 40px, 600, aligné à droite dans les tables.
• Jamais de poids 800 ou 900, jamais d'italique décoratif.

Layout & grille

• Grille 12 colonnes, max-width 1200px, gouttière 24px, marges 24px mobile et 48px desktop.
• Rythme 8px : 8, 16, 24, 32, 48, 64. Sections espacées de 64px.
• Aucune asymétrie décorative, alignements stricts à gauche.
• Formulaires : une colonne de 480 à 560px, 3 à 6 champs par étape.
• Breakpoints : 640, 768, 1024, 1280px. Tables en cartes empilées sous 768px.

Composants signature

• Header : logo, nav courte, bouton "Espace client" en outline, signaux de confiance (ACPR, ORIAS, cadenas).
• Bouton primaire : fond #0f4c81, texte blanc, hauteur 48px, radius 6px, 600. Secondaire : bordure 1px primaire.
• Simulateur : sliders + champ numérique éditable, résultat live à droite (mensualité, TAEG, coût total), "Simulation non contractuelle".
• Comparatif : header sticky, produit recommandé surligné avec bordure primaire 2px, coches #047857.
• Carte de compte : IBAN masqué (FR76 •••• 4821), solde en grand, 3 dernières opérations.
• KYC : progression en étapes nommées, upload avec exemple de pièce valide, message de chiffrement.
• Documents : PDF avec poids et date de mise à jour.

Motion

• Durée 120 à 150ms, easing cubic-bezier(0.2, 0, 0, 1).
• Autorisé : hover, accordéon, transition d'étape, fondu du résultat de simulateur.
• Interdit : solde qui défile, parallax, animations au scroll, carrousels auto.
• prefers-reduced-motion : coupe tout ce qui n'est pas essentiel.

Tokens CSS

:root {
  --bg: #ffffff;
  --surface: #f6f8fa;
  --text: #0f172a;
  --muted: #475569;
  --border: #e2e8f0;
  --primary: #0f4c81;
  --success: #047857;
  --danger: #dc2626;
  --warning: #b45309;
  --premium: #b8860b;
  --radius: 6px;
  --focus: 0 0 0 2px #ffffff, 0 0 0 4px #0f4c81;
  --font: "IBM Plex Sans", Inter, system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

Checklist avant livraison

• Montants et taux en tabular-nums, alignés à droite.
• Mentions légales et TAEG à côté de chaque offre, pas seulement en footer.
• Focus visible 2px partout, parcours complet au clavier.
• Contraste AAA sur montants et mentions légales.
• Chaque étape indique sa position et permet de revenir en arrière.
• Les erreurs expliquent comment corriger, pas seulement en rouge.

À éviter

• Gradients vifs, néons, illustrations 3D.
• Marketing agressif, jargon, astérisques cachés.
• Chiffres arrondis sans précision réelle disponible (mets-la en tooltip).
• Rouge pour autre chose qu'une perte ou une erreur.
• Photos stock de poignées de main et de costumes.

Prompts de démarrage

• "Crée la landing d'une assurance habitation en style-bank-assurance, avec un comparatif de trois formules et un simulateur de prix."
• "Construis un espace client bancaire : cartes de comptes, dernières opérations, virement rapide."
• "Conçois un onboarding KYC en 5 étapes avec upload de pièce d'identité."
• "Fais un simulateur de crédit immobilier : mensualité, TAEG et coût total en temps réel."