Design system

Système d’interface Locamat

Les composants, états et règles typographiques utilisés sur l’ensemble du site, du tunnel de souscription, de l’espace client et du back-office.

Couleurs

Fond clair majoritaire, bleu profond comme couleur principale, ambre en accent discret.

Bleu profond 900

#081f38

Titres, pied de page, barres latérales

Bleu profond 800

#0c2c4e

Aplats sombres, logo

Bleu 700

#103a66

Boutons principaux, liens

Bleu 500

#1f5590

Icônes, accents, focus

Bleu 50

#eef3f9

Fonds de pastilles

Ambre 500

#c07d16

Couleur secondaire, usage rare

Encre

#0f1720

Texte courant

Gris texte

#55657a

Texte secondaire

Bordure

#e3e8ef

Contours de cartes

Fond

#f6f8fb

Fond de page

Succès

#0f6b4c

Paiement encaissé, contrat actif

Erreur

#a32020

Prélèvement échoué, impayé

Typographie

Inter, interlignage généreux, chiffres tabulaires pour tous les montants.

Titre 1 — 46 / 1.1 / -0.035em

Louez votre matériel

Titre 2 — 30 / 1.2

Le matériel dont votre entreprise a besoin

Texte courant — 15 / 1.65

Choisissez votre matériel, définissez votre durée de location et souscrivez entièrement en ligne. La mensualité est fixe pendant toute la durée du contrat.

Montants — chiffres tabulaires

1 289,40 €

Boutons

Une seule action principale par écran. Les actions destructrices utilisent le style danger.

Formulaires

Libellé au-dessus, aide sous le champ, message d’erreur explicite et actionnable.

Champ standard

Champ avec aide

14 chiffres, tels qu’ils figurent sur votre avis de situation.

Champ en erreur

Le SIRET comporte 14 chiffres.

Liste déroulante

Zone de texte

Champ désactivé

Case à cocher sélectionnée Bouton radio sélectionné Bouton radio

Sélecteur de durée

12 mois 24 mois 36 mois

Badges de statut

Un statut par couleur, toujours accompagné de son libellé en toutes lettres.

Contrat actif Payé Programmé Signature en attente Paiement en attente Vérification en cours Prélèvement échoué Impayé Dossier refusé Contrat terminé En attente de signature En cours

Alertes et notifications

InformationLe prochain prélèvement aura lieu le 5 octobre 2026.

SuccèsVotre contrat a été signé et votre paiement accepté.

En attenteSignature en attente : le contrat expire dans 5 jours.

ErreurLe prélèvement du 5 mai a été rejeté — provision insuffisante.

Notification (toast) — apparaît en bas à droite, disparaît après 9 secondes.

Facture téléchargée

FA-2026-09-0421 — 79,00 € HT

Cartes, listes et tableaux

Carte avec en-tête

Contrat actif

Corps de carte. Bordure fine, rayon modéré, ombre très légère.

Mensualité: 79,00 €
Échéances: 36

Tableau

Date	N° facture	Montant	Statut
05/09/2026	FA-2026-09-0421	79,00 €	Payé
05/08/2026	FA-2026-08-0418	79,00 €	Payé
05/05/2026	FA-2026-05-0361	79,00 €	Prélèvement échoué

États vides, de chargement et d’erreur

Aucune facture pour l’instant

Votre première facture sera disponible dès la première échéance.

Chargement

Impossible de charger les paiements

Une erreur technique est survenue. Réessayez dans quelques instants.

Navigation et progression

Étapes du tunnel

Vos informations

Votre contrat

3 Signature

4 Paiement

5 Confirmation

Étape 3 sur 5 — Signature

60 %

Progression de contrat

7 échéances sur 36 — 19 %

Onglet actif Onglet Onglet

Modale

Icônes

Tracé 1,8 px, angles arrondis, taille courante 16 à 20 px.