Design System · v0.1

Boolon.

Swiss / International Typographic Style. Ubuntu partout. Noir, blanc cassé, et un seul rouge — réservé aux urgences, échecs et actions requises.

00 — Logo animé

01 — Couleurs

Fond#0A0A0A
Surface#121212
Surface 2#1C1C1C
Bordure#262626
Texte atténué#8C8C8C
Blanc cassé#F2F0EB
Rouge — urgence#E5242E

02 — Typographie · Ubuntu

Display 700Dossier 01Titre 400Fuite sous l'évierChiffre 3001 840 €Corps 400Boolon rassemble l'incident, le technicien, le devis, le rendez-vous, la facture et le paiement dans un dossier unique.Label 700Parcours du dossierMonoINC-231 · #184 · D-311

03 — Statuts (couleur + texte + point)

NouveauEn attenteUrgentPlanifiéEn coursAction requiseTerminéAnnuléÉchec

04 — Boutons

05 — Champs

Adresse e-mail incomplète.

06 — Cartes & états

Carte incident
Fuite sous l'évierUrgent
12 rue Oberkampf · il y a 2 j
Skeleton
0
État vide — aucun incident
● Paiement échoué
Votre carte a été refusée. Aucun montant n'a été prélevé.
Toast
✓ Devis accepté. Jean Dupont a été notifié.
Accès refusé
Cette action est réservée au propriétaire.
Le bouton est masqué ou désactivé avec explication — jamais une erreur après clic.

07 — Règles

Rayons
6 px app · 8–12 px cartes & mobile · 999 px pills public & badges
Espacements
Échelle 4 : 4 · 8 · 12 · 16 · 24 · 32 · 48 · 96
Grille
12 colonnes · 1200 px max · séparateurs 1 px plutôt qu'ombres
Rouge
Urgent, Échec, Action requise, Destructif, et le point du logo. Rien d'autre.
Tactile
44 px minimum · CTA mobile 52 px · actions critiques en bas d'écran
Mouvement
fadeUp 250 ms · pulse pour l'urgence live · shimmer pour le chargement
Imagerie
Architecture abstraite, acier, angles — toujours noir & blanc (grayscale + contraste 1.15). Source Pexels, crédit affiché.

08 — Imagerie

Chargement des photos Pexels…

09 — Routes du prototype