---
name: style-bank-assurance
description: Regulated finance / bank / insurance UI - trust, formality, blue-green palette, security signals, clear numbers, comparison tables. Use when the user asks for "bank", "insurance", "fintech", "regulated finance", "wealth", "credit" style.
---

# Style Bank & Assurance

Confiance instantanée, précision sur chaque chiffre. Le lecteur confie de l'argent - il ne pardonnera aucun flou.

## Palette

- BG: blanc `#ffffff` ou gris institutionnel très clair `#f6f8fa`.
- Primary: bleu profond `#0f4c81` ou vert institutionnel `#0f766e`.
- FG: gris slate `#0f172a`.
- Semantic clair: vert `#059669` (gain, sécurisé), rouge `#dc2626` (perte, alerte), orange `#d97706` (attention).
- Or discret `#b8860b` pour offres premium/Prestige, jamais tapageur.

## Typographie

- Display + body: sans neutre sérieux (Söhne, IBM Plex Sans, Inter, Suisse).
- Numbers **tabular** partout : `font-variant-numeric: tabular-nums`.
- Body 15-16 px, line-height 1.6.
- Poids retenus : 400 body, 600 semibold, 700 max. Jamais Black.

## Layout

- Grille régulière, aucune asymétrie décorative.
- Tables comparatives centrales (produits, tarifs, garanties).
- Signaux de confiance en header : agrément ACPR, sceau ISO, cadenas HTTPS.
- Formulaires longs mais découpés en étapes claires avec progress bar.

## Composants signature

- Simulateur (crédit, épargne, retraite) avec sliders + résultat live.
- Comparatif produits en table sticky-header, filtres à gauche.
- Documents PDF téléchargeables (mentions légales, notice, fiche produit).
- Cards de compte : IBAN, solde, dernières opérations, cachet officiel.
- Onboarding KYC clair, upload de pièces d'identité rassurant.

## Rules

- Toujours afficher les mentions légales à côté des offres.
- Aucun langage marketing agressif, aucun jargon caché.
- Chiffres arrondis lisibles + précision réelle en tooltip.
- Aucune motion superflue. 150ms max, purement fonctionnelle.
- Focus rings très visibles (2px accent), navigation clavier complète.