# Briefs d'illustrations — Crowdlending App Document de référence pour la génération des visuels de l'application de suivi de portefeuille de crowdlending (prêts participatifs). --- ## 1. Règles communes à toutes les illustrations ### Format technique - **Format livrable :** SVG vectoriel avec fond transparent - **Ratio cible :** Variable selon la page (précisé par illustration) - **Texte :** Aucun texte intégré dans les illustrations — le texte est géré par l'application - **Dark mode :** Fond transparent ; les teintes doivent rester lisibles sur fond clair (`#ffffff`) ET fond sombre (`#1a1a2e` environ). Éviter les couleurs trop claires qui disparaissent sur fond blanc, ou trop sombres sur fond sombre. ### Style global - **Style dominant :** Flat illustration — formes géométriques épurées, ombres douces mais pas de réalisme photographique - **Touches semi-réalistes :** Acceptées ponctuellement pour les personnages (Login, Register) ou les objets symboliques (pièces, documents) - **Trait :** Pas de contour noir dur ; les formes sont délimitées par des variations de couleur ou des ombres légères - **Ambiance :** Fintech moderne, professionnel, rassurant — pas austère, pas enfantin ### Palette par page Chaque page a une teinte dominante distincte, déclinée en 2–3 variations (clair / principal / foncé). Les autres éléments utilisent des neutres doux (gris-bleu, blanc cassé, beige léger). --- ## 2. Page de connexion (`/login`) ### Concept L'utilisateur retrouve son portefeuille. Idée centrale : **accès sécurisé à ses données financières personnelles**, sentiment de confiance et de maîtrise. ### Teinte dominante **Bleu profond** — `#2563eb` environ, décliné en `#1e40af` (foncé) et `#93c5fd` (clair). ### Ratio Portrait 4:5 ou carré 1:1, placé à droite du formulaire de connexion. ### Éléments visuels à inclure - Un **écran ou tableau de bord abstrait** en perspective légère (isométrie douce) montrant des courbes de croissance et des barres de graphique — sans données réelles - Un **bouclier ou cadenas stylisé** intégré naturellement dans la composition (pas en surimpression brutale) - Des **formes géométriques flottantes** en arrière-plan (cercles, hexagones légers) qui évoquent un réseau de financement participatif - Optionnel : une **silhouette humaine abstraite** (flat, sans visage détaillé) consultant un écran ### Ambiance / mots-clés Confiance · Sécurité · Clarté · Accès personnel · Nuit bleue apaisante ### À éviter Cadenas réaliste, icônes de sécurité génériques, fond uni sans composition. --- ## 3. Page d'inscription (`/register`) ### Concept Nouveau départ, premier pas vers la croissance de son patrimoine. Idée : **planter une graine financière**, commencer à construire. ### Teinte dominante **Vert émeraude** — `#059669` environ, décliné en `#047857` (foncé) et `#6ee7b7` (clair). ### Ratio Portrait 4:5 ou carré 1:1, placé à droite du formulaire. ### Éléments visuels à inclure - Une **plante ou arbre stylisé en flat** dont les feuilles sont remplacées par des formes évoquant des graphiques (triangles ascendants, petits histogrammes) - À la base : des **pièces empilées ou un sol géométrique** représentant le capital de départ - Des **étoiles ou points lumineux** dispersés en arrière-plan, évoquant le réseau de prêteurs/emprunteurs - Palette de verts chauds avec des accents dorés/jaunes pour les éléments "valeur" ### Ambiance / mots-clés Croissance · Optimisme · Premier investissement · Énergie · Nouveau départ ### À éviter Personnages trop figuratifs, symboles euro/dollar trop littéraux, composition trop chargée. --- ## 4. Tableau de bord (`/`) — état vide ### Concept Illustration affichée quand l'utilisateur n'a pas encore d'investissements. Invitation à commencer. Idée : **un portefeuille vide mais plein de potentiel**. ### Teinte dominante **Violet indigo** — `#7c3aed` environ, décliné en `#5b21b6` (foncé) et `#c4b5fd` (clair). ### Ratio Paysage 16:9 ou 3:2, centré sous le message d'état vide. ### Éléments visuels à inclure - Un **graphique vide ou en pointillés** (axes tracés, courbe absente ou en tirets) qui suggère ce qui pourrait être là - Des **cartes KPI fantômes** (rectangles avec shimmer ou contour en pointillé) - Une **boussole ou carte du trésor stylisée** en flat, symbolisant le chemin à parcourir - Des **petits éléments flottants** : icône +, flèches directionnelles, symboles de croissance ### Ambiance / mots-clés Potentiel · Invitation · Légèreté · "Commencez votre voyage" --- ## 5. Page Investissements (`/investissements`) — état vide ### Concept Pas encore de prêts enregistrés. Idée : **une salle des coffres vide**, des emplacements qui attendent. ### Teinte dominante **Orange ambré** — `#d97706` environ, décliné en `#b45309` (foncé) et `#fcd34d` (clair). ### Ratio Paysage 3:2, centré. ### Éléments visuels à inclure - Des **dossiers ou cartes de projet vides**, empilés en perspective légère - Une **ampoule ou boussole** au centre symbolisant l'idée à venir - Des **lignes de connexion en pointillés** entre des nœuds vides (réseau P2P non encore peuplé) - Accents dorés sur les éléments "valeur" ### Ambiance / mots-clés Attente · Opportunité · Réseau de financement · Structuré --- ## 6. Page Remboursements (`/remboursements`) — état vide ### Concept Pas encore de flux reçus. Idée : **un calendrier ou une boîte aux lettres vide**, des flux qui vont arriver. ### Teinte dominante **Cyan turquoise** — `#0891b2` environ, décliné en `#0e7490` (foncé) et `#67e8f9` (clair). ### Ratio Paysage 3:2, centré. ### Éléments visuels à inclure - Un **calendrier stylisé** avec des cases vides ou des dates en pointillés - Des **flèches de flux entrant** (argent qui arrive vers un portefeuille) - Des **pièces ou billets flat** en trajectoire parabolique vers un portefeuille central - Ambiance légère et dynamique (les flux vont arriver) ### Ambiance / mots-clés Flux entrant · Calendrier · Anticipation · Régularité --- ## 7. Page Dépôts / Retraits (`/depots-retraits`) — état vide ### Concept Pas encore de mouvements enregistrés. Idée : **un compte bancaire neutre**, prêt à recevoir ses premiers flux. ### Teinte dominante **Bleu-gris ardoise** — `#475569` environ, décliné en `#1e293b` (foncé) et `#94a3b8` (clair). ### Ratio Paysage 3:2, centré. ### Éléments visuels à inclure - Un **compte ou portefeuille stylisé** en perspective flat, ouvert et vide - Des **flèches bidirectionnelles** (entrée et sortie) avec des teintes différentes (vert pour dépôt, rouge doux pour retrait) - Un **solde "0,00 €" stylisé** en grand format comme élément graphique central (pas de vrai texte — une représentation stylisée) - Des **cercles concentriques** en arrière-plan suggérant la liquidité ### Ambiance / mots-clés Neutralité · Liquidité · Mouvement · Équilibre --- ## 8. Page Fiscalité / 2778-SD (`/2778-sd`) — état vide ### Concept Pas encore de données fiscales. Idée : **des documents officiels vierges**, un classeur fiscal ordonné. ### Teinte dominante **Rouge corail doux** — `#dc2626` décliné en tons doux `#fee2e2` (fond) et `#991b1b` (accent). ### Ratio Paysage 3:2, centré. ### Éléments visuels à inclure - Des **formulaires/documents empilés en perspective** (style papier officiel mais stylisé, pas photo) - Un **calculateur flat** ou une règle de calcul vintage stylisée - Des **lignes de tableau vides** suggestives (colonnes tracées, lignes en pointillés) - Un **tampon ou sceau circulaire** stylisé sans texte, symbolisant l'officiel ### Ambiance / mots-clés Administration · Rigueur · Documentation · Clarté fiscale --- ## 9. Page Simulation (`/simul`) — illustration header ### Concept Projection dans le futur. Idée : **une lunette de visée ou un télescope pointé vers l'horizon financier**. ### Teinte dominante **Violet-rose** — `#9333ea` environ, décliné en `#7e22ce` (foncé) et `#e879f9` (clair). ### Ratio Paysage 16:9, affiché en haut de page. ### Éléments visuels à inclure - Une **courbe ascendante projetée vers le futur**, la partie gauche pleine (passé) et la partie droite en pointillés lumineux (projection) - Des **étoiles ou constellations** en arrière-plan léger - Un **horizon abstrait** ou une ligne de fuite perspective - Des **marqueurs temporels** (points sur la courbe) sans dates réelles ### Ambiance / mots-clés Futur · Projection · Vision · Anticipation · Lumière --- ## 10. Pages Settings / MonCompte — illustration section vide ### Concept Paramètres non encore configurés. Idée : **un atelier ou tableau de bord de contrôle** vierge. ### Teinte dominante **Gris neutre avec accent teal** — fond `#f8fafc`, accent `#0f766e`. ### Ratio Carré 1:1, affiché en sidebar ou en état vide de section. ### Éléments visuels à inclure - Des **engrenages imbriqués flat** en composition équilibrée (pas le cliché engrenage isolé) - Des **curseurs et toggles stylisés** en arrière-plan - Une **palette de couleurs ou pipette** pour la section Apparence - Des **lignes de connexion** entre les composants symbolisant l'interconnexion des paramètres ### Ambiance / mots-clés Contrôle · Personnalisation · Ordre · Maîtrise --- ## 11. Page 404 / Erreur ### Concept Page non trouvée. Idée : **un investisseur qui cherche dans le vide**, boussole qui tourne, route qui mène nulle part. ### Teinte dominante **Jaune soleil chaleureux** — `#eab308` environ, décliné en `#a16207` (foncé) et `#fef9c3` (clair). ### Ratio Carré 1:1 ou portrait 3:4. ### Éléments visuels à inclure - Une **boussole flat** dont l'aiguille est en point d'interrogation - Un **chemin ou route** qui s'arrête abruptement dans le vide - Des **éléments du tableau de bord qui flottent** de façon désordonnée (cartes KPI, graphiques) comme éparpillés - Ambiance légère et humoristique, pas anxiogène ### Ambiance / mots-clés Humour doux · Égaré · "On vous retrouve" · Légèreté --- ## Notes d'intégration pour le développeur Une fois les SVG générés : 1. **Nettoyage SVG** : Supprimer les métadonnées inutiles (Adobe, Inkscape), vérifier l'absence d'images raster embarquées (balise ``). 2. **Variables CSS** : Remplacer les couleurs hardcodées des éléments neutres (gris, blanc) par `var(--surface)`, `var(--border)`, `var(--text-muted)` pour l'adaptation dark mode automatique. Laisser les couleurs caractéristiques de chaque illustration en valeurs fixes. 3. **Import React** : `import { ReactComponent as IllustrationLogin } from '../assets/illustrations/login.svg'` (Vite : `import LoginIllustration from '../assets/illustrations/login.svg?react'`). 4. **Placement** : Les illustrations d'état vide se placent dans un `div.empty-state` centré, largeur max 320px. Les illustrations de page (login/register) se placent dans la colonne droite du layout split-screen.