Design system Ploovers
La page de référence du site public : tokens (couleurs, typographie, rayons) et tous les composants utilisables, rendus avec le vrai code. Esthétique haut de gamme : beaucoup d'espace blanc, palette restreinte, bordures fines plutôt qu'ombres, aucun gradient.
Pages d'exemples
Gabarits complets rendus avec le vrai code, en texte inventé — pour valider le design page entière et servir de référence lors de la génération des vraies pages du site.
Type Méthodologie / À propos : hero 2 colonnes, citation-conviction, texte long avec « Lire plus », cards discipline, citation attribuée, CTA final.
Page offre →Type Notre offre : cartes mission/prestations, tarification en deux temps, bénéfices numérotés, grille de différenciation, missions spécifiques, CTA.
Fiche enveloppe →Type Comprendre les enveloppes : barres de frais, tableau, note data, comparatif deux colonnes, personas, FAQ accordéon, logos partenaires.
Couleurs
Les valeurs de tokens sont obligatoires et ne doivent jamais être remplacées par des valeurs par défaut. L'accent bleu est réservé aux cartes de performance, graphiques et contenus liés à l'investissement.
Couleurs d'état
Rouge et vert ne sont pas des couleurs de marque : ils ne servent que la donnée — une saisie invalide, une opération validée. Jamais une section, jamais une card, jamais un bouton. Ces valeurs étaient déjà en service dans le questionnaire client ; elles sont remontées ici pour que les pages cessent d'en écrire des approximations.
Vérifiez qu'il s'agit bien d'un PDF de moins de 10 Mo.
Un conseiller vous rappelle sous 48 heures.
Ce champ est obligatoire.
Merci, c'est enregistré.
Questionnaire client — la déclinaison « qv9 »
Le questionnaire client (/dashboard/cdata) vit
dans l'espace connecté mais s'habille en V9 : c'est le seul écran de
l'application à le faire, parce qu'il s'adresse au client final et non au
conseiller. Sa feuille, static/css/questionnaire-v9.css, redéclare
les tokens V9 sur .qv9 et préfixe tout en qv9- pour
ne rien laisser fuir vers le shell connecté.
Ne pas employer les classes qv9-
ailleurs. Sur le site public, ce sont les classes plr- ;
dans le reste de l'espace connecté, le système « Slate Mono » et ses
classes rf-.
Votre situation familiale
Ces informations déterminent les options de transmission que nous pourrons vous proposer.
Typographie
Alike (serif) est réservée au titre hero de la home. Inter partout ailleurs. Titres en #111111, paragraphes en #3D434E, labels en #8B94A5.
Jusqu'à 2 fois moins cher, pour un niveau d'exigence supérieur
Nous appliquons à votre patrimoine la discipline d'allocation des investisseurs institutionnels : maîtrise des frais, sélection rigoureuse d'instruments et portefeuilles conçus pour traverser les cycles.
Border radius
50 pour les grandes cards pleine largeur, 30 pour les cards petites et moyennes, 100 pour les boutons, 20 pour les images éditoriales et les portraits (carrés à coins arrondis — décision 2026-07-02, réduit à 12-16 sur les miniatures ≤ 64px). Les pastilles UI (numéros d'étapes, coches) restent rondes.
Boutons
Libellés courts en capitales, radius 100. Le navy est le CTA principal ; le beige le CTA secondaire ; l'outline pour les actions tertiaires ; le lien souligné pour la navigation contextuelle.
Pills & badges
Pills à icône pour les enveloppes/actifs (rangées mouvantes sur la home), badges pour les méta-informations. Le badge accent est réservé aux chiffres et à la performance.
Assurance vie
PER
Emergents
Badge neutre
+36% en médiane
Sans expertise préalable
Cards
Fond #F1F1F1 par défaut, blanc bordé en alternative, accent bleu strictement réservé aux contenus data/performance. Radius 30.
Card neutre
Fond #F1F1F1 — le standard pour les contenus éditoriaux en grille.
Card outline
Fond blanc, bordure #E8E4DD — pour les listes d'items cliquables.
Card accent
#EFF7FF — uniquement performance, graphiques et investissement.
Card simulateur →
Icône + titre + description courte
Card expertiseIcône et titre sur la même ligne, paragraphe dessous.
Card étape numérotée, texte aligné à gauche
(5 – 10 minutes)
Card article « Points de vue » — image native + titre
Card profil
Rôle
Ligne de contexte en tertiaire.
Portrait carré à coins arrondis, nom, rôle et biographie.
Grandes cards (radius 50)
.plr-perf, .plr-gain, .plr-getcard, .plr-tension, .plr-cta-card, .plr-missions-card — voir les sections dédiées plus bas.
Citations
Divider vertical navy aligné en haut (~85 % de la hauteur),
texte Inter semibold 32 en #111111. Les premiers mots peuvent être teintés en
#5F6672 (.plr-conviction-tint). Avec ou sans eyebrow, avec ou sans
attribution. Fond de section : #F1F1F1 en général.
“ La qualité de vos décisions a plus d'impact sur votre patrimoine que la recherche permanente du meilleur placement ”
“ Les décisions patrimoniales méritent une vraie expertise, fondée sur une analyse du risque, la modélisation et plusieurs décennies de données ”
Awards & distinctions
Les logos de récompenses défilent horizontalement de manière lente
et continue — mouvement discret et premium, aucun effet d'accélération ni de rebond.
Respecte prefers-reduced-motion.
Barres de frais
Barres pleines arrondies : grise #BEBFC2 pour le conseil traditionnel, bleue #AFC8E9 pour Ploovers. Libellé en fin de barre, notes en tertiaire dessous.
Les niveaux de frais observés varient selon les
établissements, les contrats et les supports d'investissement.
Estimation des frais annuels totaux de la solution Ploovers, incluant les
honoraires de conseil et les autres frais (assureur/banque et supports
d'investissement).
Carte 5 bénéfices
Grande card blanche (radius 50) sur bande grise : eyebrow bleu, titre centré, puis 5 colonnes icône (40px) + titre gras forcé 2 lignes + texte court. Passe en 2 colonnes sous 992px, 1 colonne sous 576px.
Un patrimoine financier
construit avec
Ploovers est :
Moins chargé
en frais
Parce que les frais inutiles grignotent durablement votre capital
Plus solide pendant
les crises
Solidement diversifié, au-delà d'une simple diversification par ETF
Composé en toute
indépendance
Avec des outils qui ne dépendent d'aucun distributeur de produits
Disponible pour
vos projets
Sans immobilisation inutile de votre capital
Structuré pour
limiter la fiscalité
Davantage de votre capital vous revient à la fin
Comparatif deux colonnes
Carte blanche radius 50, divider vertical discret au centre, titres de colonnes en capitales, liste à coches à gauche, liste à croix à droite.
Ploovers
0,5 à 0,8% d'honoraires, 1,2 à 1,7% tout compris*, chiffre affiché avant toute souscription
- Expertise approfondie marchés, retraite et transmission
- Portefeuille unique, 100% aligné à vos besoins
- Optimisation avancée
- Résilience maximisée en période de baisse
- Transparence radicale - instruments, frais, décisions
Conseil traditionnel
Honoraires souvent supérieurs à 1 %, auxquels s'ajoutent des frais rarement consolidés en amont
- Compétences généralistes
- Portefeuille standard, 3 à 10 profils identiques pour tous
- Optimisation standard, rendement non maximisé
- Risque de pertes amplifiées en période de baisse
- Transparence limitée sur le risque et les frais réels
Personas (tabs + use case)
Sélecteur en pills (actif = fond #F1F1F1), puis carte détaillée : portrait à coins arrondis à gauche, carte bordée à droite avec eyebrow, titre et paragraphes « Situation · Besoin · Accompagnement » (ou Situation · Constat · Besoin · Réponse).
Chirurgien dentiste, 45 ans
Situation · Une trésorerie significative accumulée au fil des années, placée progressivement, sans véritable stratégie d'ensemble, elle ne répondait ni à ses objectifs de rendement ni à son besoin de disponibilité.
Besoin · Structurer son patrimoine financier sans immobiliser son capital ni augmenter son niveau de risque.
Accompagnement · Définition d'une stratégie d'investissement claire, puis construction d'un portefeuille conciliant performance, maîtrise du risque et disponibilité du capital.
Colonnes à filet vertical & cards discipline
Deux motifs récurrents de la home : colonnes séparées par un filet #EEEEEE — situations : icône au-dessus, titre forcé sur 2 lignes (sans flèche), phrase de conclusion en regular sur 3 lignes, puis texte détaillé replié derrière « Lire plus / Réduire » (même pattern que les expertises) ; expertises : titre + texte + « Lire plus ». Et cards blanches empilées pleine largeur sur bande grise (discipline).
Votre épargne atteintun certain seuil
L'impact d'une erreur devient significatif. Les décisions ne peuvent plus être prises de manière intuitive.
Elles impliquent des enjeux fiscaux, de liquidité et de transmission importants.
Un arbitrage d'enveloppe mal posé fige plusieurs points de fiscalité pour des années.
Votre régime de retraites'annonce insuffisant
Vos revenus génèrent une trésorerie significative, mais elle est peu investie ou placée sur des supports peu lisibles.
C'est le moment de structurer une stratégie claire, pensée dès l'origine dans ses conditions de sortie.
2 % de rendement net en moins par an peuvent représenter près de 30 % de capital final en moins sur 20 ans
Votre retraiteapproche
Chaque décision prise maintenant a un impact déterminant sur votre situation et celle de votre famille.
Prenez des décisions intelligentes en matière de fiscalité, de protection du conjoint, de transmission et de gestion des échéances avant vos 60 ans.
Passé 60 ans, certaines fenêtres fiscales et successorales se ferment définitivement.
Choisir la bonne enveloppe, pas la plus évidente
Assurance-vie française ou luxembourgeoise, contrat de capitalisation, PER, PEA... Ces solutions ne sont pas interchangeables. Elles déterminent directement votre fiscalité et votre performance nette.
Investir dans des actifs liquides
Notre philosophie est simple : uniquement des actifs liquides et transparents : ETF, fonds institutionnels, actions, matières premières. Aucune complexité inutile, aucun coût caché.
« Lire plus »
Pour les sections à texte long (maquettes About « Pourquoi nous existons », Méthodologie, détails des cards) : seul un extrait est visible, la totalité se déplie via un lien. Deux variantes proposées — A : dépli en place (Bootstrap collapse, pour les textes longs dans la page) et B : lien vers le détail dans la même colonne (« Lire plus → » des cards expertise, ouvre le contenu complet sous la card). Aucun fondu (pas de gradient) : coupe nette en fin de paragraphe.
Pour nous, les marchés financiers sont le lieu par excellence de la création de richesse. C'est là que les entreprises se financent, innovent, grandissent - et où les épargnants peuvent en devenir, concrètement, copropriétaires.
Sur longue période, les actions doublent en moyenne tous les 7 à 10 ans. Une démonstration puissante de ce que le temps peut accomplir lorsqu'il est mis au service du capital.
La difficulté réside dans le fait que les marchés sont, par nature, incertains : personne ne peut en prédire précisément l'évolution.
Des professionnels de l'investissement
Leur métier est de construire des portefeuilles, pas de vendre des produits financiers.
Chez Ploovers, nos conseillers sont avant tout des professionnels de l'investissement. Issus de l'ingénierie financière et de la banque d'investissement, ils ont évolué dans des environnements où chaque décision d'investissement doit être justifiée par les données, analysée avec rigueur et évaluée avant d'être prise.
À affiner ensemble : nombre de lignes visibles avant coupe, position du lien (sous le paragraphe ou en fin de ligne), et cas modale si le détail est trop long pour un dépli en place.
Logos partenaires (statiques)
Contrairement aux awards et aux enveloppes, les logos de partenaires sont fixes : aucun défilement, aucune animation.
Listes
- Optimisation avancée
- Transparence radicale
- Portefeuille standard
- Transparence limitée
- votre épargne devient significative,
- vous préparez votre retraite,
Avec une ligne descriptive sous le titre.
Analyse de vos placements
Une mesure du risque réel
Notes & callouts
Encart d'information général.
Réservée aux données et à la performance.
Callout éditorial — mise en avant dans une page longue.
Étapes
Étapes riches numérotées (pastille navy 28px) pour les process détaillés, timeline à points pour les versions compactes, items numérotés pour les listes de bénéfices.
Titre à gauche, contenu riche à droite.
→ Conclusion mise en avant en navy.Point navy sur un fil vertical.
Pour les fiches produits.
Une vision claire de votre situation patrimoniale
Des décisions simplifiées, avec mise en gras possible
Tableaux
| Frais | Ploovers | Traditionnel |
|---|---|---|
| Conseil / an | 0,5-0,8% | >1% |
| Totaux / an | 1,2-1,5% | >3% |
Modules data / performance
Seuls composants autorisés à utiliser l'accent #EFF7FF. Les graphiques sont des images natives — jamais recadrées, étirées ni recompressées.
A niveau de risque comparable, la différence se construit sur la méthode
- Optimisation avancée
- Optimisation standard
Les barres de frais segmentées (V8) sont remplacées par les barres pleines — voir la section Barres de frais.
Heros
Hero home : Alike 50 + image native + bandeau caption 3 cellules. Autres pages : Inter semibold 40, en 1 ou 2 colonnes (image arrondie radius 30 côté About).
Ploovers vous aide à prendre de meilleures décisions pour votre patrimoine, grâce à un niveau d'expertise, d'analyse et de rigueur jusqu'ici réservé aux investisseurs institutionnels.
Nos principes fondamentaux
Frais maîtrisés. Capital disponible.
Fiscalité pensée pour la sortie.
Conseil humain (features à coche)
La profondeur d'expertise attendue
Bandeau titre sur fond neutre, coche navy circulaire, description dessous.
Bandeaux & CTA
Votre capital travaille-t-il vraiment pour vous ?
Transmettre un relevéService gratuit et sécurisé.
Bandeau navy
Nous contacterBandeau confidentialité
Variante navy avec texte légal réduit.
Le bon conseil, pour faire la différence dans le temps
Echanger avec un conseiller
Accordéon
Images & portraits
Toujours la résolution native — jamais de compression, de
recadrage, de filtre ni de redessin. Heros en qualité Retina (source ≥ 2× la taille
affichée). Graphiques nets, jamais étirés (pas d'object-fit : cover, pas de
transform : scale). Portraits carrés à coins arrondis (ratio 1:1, radius 20, 12-16
sur les miniatures — décision 2026-07-02), fond blanc ou transparent, traitement
noir et blanc autorisé si la source l'est.
Les images éditoriales (photos, illustrations, héros) prennent des coins
légèrement arrondis : .plr-img-rounded (radius 20).
