Palette interface
6 couleurs pour l'ensemble de l'interface. Cliquer pour copier le code hex.
Couleurs d'etat
Messages systeme, alertes et feedback utilisateur.
Information
Fort : #2563EB / Fond : #EFF6FF
Succes
Fort : #1D7A3F / Fond : #ECFDF3
Avertissement
Fort : #946017 / Fond : #FFFBEB
Erreur
Fort : #9A211F / Fond : #FEF2F2
Accessibilite
Contrastes WCAG mesures. Objectif AAA, minimum AA.
Texte principal
#111827 sur #FFFFFF
Texte secondaire
#4B5563 sur #FFFFFF
Primaire
#9A211F sur #FFFFFF
Succes
#1D7A3F sur #FFFFFF
Avertissement
#946017 sur #FFFFFF
Information
#2563EB sur #FFFFFF
Blanc sur primaire / erreur
#FFFFFF sur #9A211F
Blanc sur succes
#FFFFFF sur #1D7A3F
Blanc sur avertissement
#FFFFFF sur #946017
Blanc sur information
#FFFFFF sur #2563EB
Typographie
Police officielle : Inter.
Boutons
Une seule action principale visuellement dominante par zone.
Principal — #9A211F
CTA, validation, action dominante
Secondaire
Annuler, retour, filtres
Ghost
Actions tertiaires, icones, toggles
Desactive
Fond gris, texte attenue, curseur interdit
Formulaires
Labels visibles, focus net, messages d'erreur explicites.
Cartes et panneaux
Fond blanc, bordures subtiles, ombres legeres ou absentes.
Carte standard
Fond blanc, bordure #E5E7EB, rayon 12px.
Panneau secondaire
Fond #F9FAFB, pour les sections differenciees.
Badges et statuts
Badges d'etat avec fond doux + texte fort.
Badges subtils
Badges solides
Badges specifiques (referentiel)
Icones
Lucide — simples, lineaires, coherentes. lucide.dev
Espacement et rayons
Grille de base 8px.
Espacement
Rayons de bordure
Champs, boutons, badges
8px
Cartes, panneaux
12px
Dialogs, blocs majeurs
16px
Toggles, pilules
arrondi complet
Souverainete des donnees
Toutes les ressources hebergees sur notre infrastructure.
Aucun CDN externe
Polices, librairies, images, scripts — tout est servi depuis nos serveurs (VPS Infomaniak, Suisse).
Protection des donnees utilisateur
Ne pas envoyer d'IP, referer ou headers a des plateformes tierces (Google, Cloudflare, etc.).
Ressources embarquees
La police Inter et les icones Lucide sont incluses dans le build. Si un outil externe est necessaire, telecharger et servir localement.
Anti-patterns
Ce qu'il faut eviter dans toutes les applications SFP.
Ne pas faire | Faire |
|---|---|
| Couleur seule pour transmettre un etat | Icone + label + couleur |
| Plusieurs boutons de couleur forte | Un seul CTA dominant par zone |
| Texte gris clair sur fond blanc | Minimum #4B5563 sur blanc |
| Ombres lourdes, degrades | Bordures subtiles, fonds plats |
| Majuscules sur des paragraphes | Majuscules uniquement sur labels courts |
| Chargeur rotatif generique | Squelette reproduisant la structure |
| CDN externe (fonts, libs) | Tout heberge localement |
| Textes affiches en dur | Centraliser pour l'internationalisation |
| Couleurs hors palette | Exclusivement les couleurs definies |