Le signe
Un E modulaire, avec un trait central bleu ciel. Il est utilisable seul pour les petites surfaces.
IDENTITÉ / INTERFACE / MOUVEMENTLe design system
Le design system
EstimPro.
Les règles et composants à utiliser pour construire une expérience cohérente, du site public à l’avis de valeur.
01 / FONDATIONS & USAGES
Une marque pour les professionnels de l’immobilier.
EstimPro aide l’agent à estimer, expliquer et présenter. L’identité doit rester lisible, précise et accessible.
EstimProLe logo principal
Zone de protection
Conservez autour du logo un espace au moins égal au quart de la hauteur du signe.
¼ HTailles minimales
Signe : 24 px.
Logo complet : 120 px de large.
Ne pas étirer, incliner ou recolorer le logotype.
02 / FONDATIONS & USAGES
Le bleu porte la marque. La couleur donne une information.
Le bleu roi signale l’action. Le bleu nuit structure l’interface. Les états fonctionnels gardent leur propre couleur et un libellé explicite.
Cliquez sur une couleur pour copier son code.
Blanc sur bleu roi7.96:1AA texte normal
Blanc sur bleu nuit15.40:1AA texte normal
Texte principal14.60:1AA texte normal
Texte secondaire6.18:1AA texte normal
Le bleu ciel reste un accent. Évitez le texte bleu ciel sur fond blanc. Les diagnostics DPE/GES conservent leurs couleurs métier.
03 / FONDATIONS & USAGES
Trois familles, trois usages.
Sora pour les titres, Inter pour l’interface et les textes, IBM Plex Mono pour les chiffres de comparaison. Les nombres restent alignés et faciles à lire.
SORA · TITRES · 500 / 600Le prix mérite
Le prix mérite
une explication.
H1 site : 48–84 px · H1 application : 24–32 px · H2 : 20–32 px
INTER · TEXTE & INTERFACE · 400 / 500 / 600
Décrivez le bien, choisissez les références et préparez votre avis de valeur.
Corps : 14–16 px · Aide : 12–14 px · Ligne : 1,5 à 1,8
IBM PLEX MONO · DONNÉES · 400 / 500295 000 €
96 m² × 3 073 €
96 m² × 3 073 €
Chiffres de tableau : 12–14 px · Résultats : 24–40 px
04 / FONDATIONS & USAGES
Un rythme commun, des formes simples.
Les espaces suivent une base de 4 px. Les panneaux flottants restent détachés du bord. Les formulaires défilent avec la page.
4px8px12px16px24px32px48px64px96px7pxContrôle
12pxPanneau
20pxNavigation flottante
Écran large
Sidebar de 240 px, détachée de 16 px. Contenu limité à 1 480 px pour garder une bonne lisibilité.
Création dédiée
Aucune navigation générale. Rail des étapes de 220–260 px, sticky à 24 px du haut dès 900 px.
Mobile
Navigation en menu, étapes compactes et tableaux transformés en fiches. Contrôles principaux d’au moins 44 px.
05 / FONDATIONS & USAGES
Les composants de l’application.
Les exemples ci-dessous utilisent les contrôles React de la plateforme. Testez leurs états et leurs interactions.
Boutons
Une seule action principale par groupe. Les actions secondaires ne doivent pas rivaliser avec elle.
Champs et validation
Utilisée pour les coordonnées du conseiller.
Choix et interrupteurs
Filtres
Afficher la sélection par une couleur et un état explicite.
Enregistrement terminéVotre dossier a été mis à jour.
Des informations manquentComplétez la surface avant de poursuivre.
Impossible d’enregistrerRéessayez. Vos informations restent dans le formulaire.
Tableau de dossiers
Données de démonstration| Le bien | État | Valeur | Action |
|---|---|---|---|
| Maison des Tilleuls96 m² · Exemple | Finalisé | 295 000 € | |
| Appartement du ParcSurface à compléter | Brouillon | À compléter |
Fenêtre et aide contextuelle
Une action destructive doit être distincte. Les exemples sont désactivés quand aucune action réelle ne doit être exécutée.
État vide
Aucun dossier pour le moment.
Créez votre première estimation pour retrouver ici vos avis de valeur.
Maison
Appartement
Localisation
Rapport
Contacts
Surfaces
Calcul
Réglages
Aide
Icônes Lucide : trait 1,5–2 px, tailles de 16, 20 ou 24 px. Chaque action représentée par une icône seule possède un nom accessible.
06 / FONDATIONS & USAGES
Des écrans qui gardent le même langage.
Gestion quotidienne avec sidebar permanente. Estimation dans un espace dédié. Présentation au vendeur sans commandes inutiles.
Tables
Libellés à gauche, valeurs numériques alignées, unités visibles. Les actions restent accessibles au toucher et au clavier.
Formulaires
Un libellé par champ, unités explicites et aide proche de la saisie. Les informations sont conservées en cas d’erreur.
États vides
Expliquer l’absence de données et proposer une action. Ne jamais transformer une absence de références en estimation.
07 / FONDATIONS & USAGES
Des animations courtes, au service de l’action.
Un changement d’étape, une sélection et un résultat doivent se comprendre. Évitez les animations permanentes et les badges qui flottent sans raison.
Le bienLes référencesL’avis de valeur
160 ms
Survol, couleur, sélection.
Courbe ease-out, sans saut de mise en page.
220 ms
Apparition d’une étape.
Opacité et déplacement vertical de 6 px.
Accessibilité
Respecter prefers-reduced-motion. Les fonctions restent disponibles sans animation.
Voir la vidéo
Plans lisibles, transitions de 8–12 images à 30 i/s, textes gardés assez longtemps pour être lus. Même logo, mêmes couleurs, vrais écrans ou démonstrations clairement identifiées.
08 / FONDATIONS & USAGES
Parler comme on travaille en agence.
Des mots concrets, des actions simples et des informations vérifiables. Le produit s’adresse aux agents, pas aux développeurs.
À UTILISER
« Choisissez les ventes à comparer. »
« Générer le rapport PDF. »
« Aucune référence dans ce secteur. Élargissez la recherche. »
À ÉVITER
Les promesses de prix exact ou de mandat garanti.
Le jargon technique et les phrases abstraites.
Les faux témoignages, statistiques ou données métier.
Photographie : scènes d’agence crédibles, lumière naturelle, gestes de travail. Le logiciel visible à l’écran reprend l’interface réelle. Visuels générés conservés comme illustrations de marque.
09 / FONDATIONS & USAGES
Les fichiers pour passer à la réalisation.
Logos vectoriels, palette, tokens, règles de composition, guide et exemple de rapport sont réunis dans le kit.
Logotype bleuSVG vectorielLogotype blancSVG vectorielLogotype bleu nuitSVG vectorielSigne bleuSVG vectorielSigne blancSVG vectorielIcône d’applicationSVG vectorielTokens CSSFichier sourceTokens JSONFichier sourceGuide de marqueFichier sourceGuide PDFFichier source
Tout télécharger
