Guide de marque & système de design
Trouver l'artisan parfait pour vos travaux, sans deviner s'il viendra.
Artilibre met en relation artisans et clients selon la localisation réelle du chantier : zéro artisan hors zone, un créneau réservé en quelques clics, une confiance construite chantier après chantier. Ce document rassemble la palette, la typographie, les composants et les règles d'usage qui font tenir cette promesse à l'écran.
Palette de couleurs
Deux couleurs de marque, un jeu de neutres discrets, et une palette sémantique strictement réservée aux statuts de rendez-vous. L'orange est un accent, pas un fond : il ponctue, il ne remplit pas.
Couleurs de marque
Neutres
Sémantique — statuts de rendez-vous
Lisibilité : où l'orange a le droit de vivre
Cette phrase en orange sur fond blanc devient difficile à lire dès qu'elle descend en dessous de 18px.
À éviter — texte fin sur fond blanc
Correct — orange en fond large, texte blanc dessus
Typographie
Une sans-serif géométrique unique (intention de production : Montserrat) porte toute la hiérarchie, du titre de couverture aux métadonnées de carte. Trois poids suffisent : le reste vient de l'échelle de taille.
Trouver l'artisan parfait pour vos travaux, sans deviner s'il viendra.
Palette de couleurs
Zone d'intervention & disponibilités
Artilibre ne montre que des artisans dont la zone d'intervention couvre réellement l'adresse du chantier, triés par distance, note et disponibilité réelle.
Distance : 2,3 km · Prochaine dispo : demain 14h
Espacements & grille
Une échelle unique de 4 à 64px pour tous les espacements internes et externes. Pas de valeur hors échelle : si un espacement ne rentre pas dans cette liste, c'est le layout qu'il faut revoir, pas l'échelle.
Largeur de contenu
Breakpoints
Mobile
< 640px
Tablette
640–1024px
Desktop
> 1024px
Composants — Navigation & recherche
Le point d'entrée du parcours client : une adresse de chantier, un métier, et c'est parti. La barre de recherche reste neutre (blanche), le bouton d'action porte seul l'orange.
Barre de recherche
Corps de métier
Composants — Résultats & fiches
La carte résultat est le composant le plus consulté du parcours client : elle doit répondre en un regard aux trois questions qui font réserver — c'est le bon métier, c'est proche, c'est disponible bientôt.
Card résultat de recherche
Marc Dubois
Plombier
L'ordre d'affichage suit disponibilité → distance → note. Le statut d'abonnement conditionne uniquement la présence d'un artisan dans les résultats, jamais son classement au sein de la liste.
Card témoignage & réponse artisan
« Intervention rapide pour une fuite sous l'évier, Marc est arrivé dans le créneau annoncé et a pris le temps d'expliquer la réparation. Rien à redire. »
Réponse de Marc Dubois
Merci Sophie, c'était un plaisir. N'hésitez pas si vous avez d'autres soucis de plomberie !
Composants — Statuts & formulaires
Quatre statuts couvrent tout le cycle de vie d'un rendez-vous. Les formulaires qui l'entourent restent volontairement sobres : le choix se fait sur le fond (créneau, note), jamais sur la décoration.
Statuts de rendez-vous
Prise de rendez-vous
Dépôt d'un avis
CTA & bandeaux
Trois blocs pleine largeur qui ponctuent la page d'accueil : un bandeau de conviction, un choix binaire client/artisan, un footer qui referme la page. L'orange y est généreux — c'est le seul endroit où il porte un fond entier plutôt qu'un accent.
Bandeau de conviction
En production, ce bandeau s'étend bord à bord sur toute la largeur du viewport ; il est cadré ici à la largeur du document pour rester lisible dans ce guide.
Double appel à l'action
Vous cherchez un artisan ?
Décrivez votre chantier, comparez les artisans disponibles près de chez vous, réservez un créneau.
Créer un compteVous êtes artisan ?
Remplissez votre agenda avec des demandes déjà qualifiées géographiquement, sans démarchage.
Créer un compteFooter
Trouver l'artisan parfait pour vos travaux, selon la localisation réelle du chantier.
Illustration & logo
Le style d'illustration et l'usage du logo sont les deux éléments les plus faciles à abîmer par petites touches successives. Ce qui suit fixe des limites claires, pas des suggestions.
Référence
Maquette homepage de référence — bloc « Artilibre c'est quoi ? »
Les illustrations Artilibre sont en flat-design : formes pleines, aucun dégradé complexe, aucun contour dur. Les personnages représentent les métiers (casque de chantier, outils tenus visiblement) sans jamais caricaturer.
La palette reste strictement celle de la marque — navy et orange — complétée par des tons peau neutres pour les personnages. Aucune autre couleur d'accent n'entre dans une illustration, y compris pour une nouvelle page métier ou un état vide.
Usage du logo
Zone de protection minimale : un espace vide au moins égal à la hauteur du « A » tout autour du logo, jamais rogné par un bord de carte ou un autre élément.
Taille minimale d'affichage — 24px de hauteur
✓ Proportions respectées
✗ Jamais déformé
✓ Fond clair uni
✗ Jamais recoloré
Deux autres interdits, non illustrés ici pour rester lisible : aucun effet d'ombre, de lueur ou de relief ajouté au logo ; jamais placé sur un fond dont le contraste rend le tracé difficile à distinguer.
Accessibilité & responsive
Rien ici n'est optionnel : ce sont des contraintes de conception, vérifiées à chaque nouveau composant avant d'être considéré comme fini.
Checklist
Orange réservé aux éléments larges — boutons, bandeaux, icônes. Jamais de texte fin orange sur fond blanc (voir la démonstration en section Palette).
Cibles tactiles ≥ 44×44px — boutons, pastilles de créneau, cards métier : tous les éléments interactifs de ce document respectent déjà cette hauteur minimale.
Hiérarchie de titres respectée — un seul niveau saute jamais (H1 → H2 → H3), la taille ne remplace jamais la structure sémantique.
Focus clavier toujours visible — ce document l'implémente lui-même via :focus-visible sur tous les liens et contrôles ; essayez de naviguer au clavier (Tab) pour le vérifier.
prefers-reduced-motion respecté — le défilement fluide et toute animation future se désactivent automatiquement pour les utilisateurs qui le demandent.
Aperçu responsive — card résultat de recherche
Mobile · 320px
Tablette · 420px
Desktop · 620px
Aux trois tailles, l'avatar, la note et la disponibilité restent lisibles sans troncature agressive — c'est le texte secondaire (nombre d'avis, mention « du chantier ») qui se retire en premier sur mobile, jamais l'information de décision.