Design system
Terracotta
La terre cuite des chantiers, le sable des enduits, l'ocre d'un signal qui attend une action. Un système chaleureux et sobre, pensé pour être lu vite, sur un téléphone, entre deux rendez-vous.
Principes
Une action par écran
Chaque vue mène à une décision : relancer, clôturer, importer. Le reste se tait.
La couleur a un sens
Le terracotta pour agir, l'ocre pour signaler, l'olive pour réussir. Jamais de couleur décorative seule : toujours avec un mot.
Lisible sur un chantier
Contrastes AA au minimum, cibles tactiles de 40 px, contenu pensé d'abord pour 390 px de large.
Le ton d'un artisan
Vouvoiement, phrases courtes, aucun jargon commercial, aucune promesse invérifiable. Pas de tirets cadratins.
Couleurs
Deux rampes principales et trois accents terreux. Les composants n'utilisent que les utilitaires générés (bg-terracotta-600, text-ink…), jamais de valeurs en dur.
Terracotta · marque et action
50
#fbf3ef
100
#f6e3d9
200
#ecc4b1
300
#e0a185
400
#d27e5c
500
#c2623e
600
#a94f2e
700
#8b3f24
800
#6d321e
900
#522719
950
#2e140c
Sable · neutres chauds
50
#faf7f2
100
#f3ede5
200
#e8dfd3
300
#d6c9b9
400
#b4a593
500
#8f8170
600
#7a6c5d
700
#554a3e
800
#3b332b
900
#27201b
Accents
Olive #6b8f4e
Réussite, devis accepté
Ocre #d99a1e
Le « ping » : action attendue
Ardoise #5b7fa6
Information, devis envoyé
Alias sémantiques
canvas
Fond de page
surface
Cartes, champs
line
Bordures
ink
Texte principal
ink-soft
Texte secondaire
ink-muted
Légendes, aides
accent
Boutons, liens
Blanc sur terracotta-600
5,5:1 · AA texte courant
Ink sur canvas
15:1 · légende ink-muted 4,8:1
Terracotta-500
4,1:1 · grands textes et marque seulement
Statuts de devis
Six états, chacun avec un fond, un texte et une pastille. Toujours accompagnés de leur libellé : la couleur seule ne porte jamais l'information.
Envoyé, aucune relance encore due
EnvoyéUne relance est due aujourd'hui ou en retard
À relancerRelancé, en attente de la prochaine étape
En attenteLe client a signé
AcceptéLe client a décliné
RefuséSans réponse, dossier clos
ExpiréTypographie
Bricolage Grotesque pour les titres, clin d'œil au métier ; Inter pour tout ce qui se lit, chiffres compris.
display · 48 / bold
Plus aucun devis oublié
display · 30 / bold
Relances du jour
display · 18 / semibold
Séquence de relance
sans · 16 / regular
Je me permets de revenir vers vous concernant le devis envoyé le 24 octobre.
sans · 14 / muted
Délais comptés depuis l'envoi du devis.
chiffre héros · sans 60 / semibold
30 800 €
Composants
Boutons
Champs
Utilisé dans les messages.
Montant invalide (ex. 4 250,00).
Carte avec en-tête
Le conteneur de base des écrans
Bordure line, fond surface, ombre teintée argile.
État vide
Formes, logo et ombres
Logo
QuotePingUne feuille de devis pliée, et le point ocre qui « ping ».
Rayons
sm
md
lg
xl
Ombres