Charte graphique · v1 · novembre 2026
DSSF CONNECT — identité et système de design
Sous-marque de DSSF (Digital Solution & System Factory). Le vert du logo est la couleur primaire ; le navy porte les fonds sombres ; la menthe sert d'accent sur ces fonds. Direction : Industrial Technology Premium, précision suisse, SaaS entreprise.
1. Logo
Version couleur — fonds blancs et clairs.
Version blanche — navy, vert et photos sombres.
Sur vert primaire — supports institutionnels, en-têtes de documents.
Icône (mark)
Le maillon du « O » de CONNECT, seul : favicon, icône d'application, avatar réseaux sociaux. Tailles : 32, 64, 192, 512 px.
Règles d'usage
- • Zone de protection : la hauteur du « D » sur les quatre côtés.
- • Taille minimale : 120 px de large à l'écran, 30 mm en impression.
- • Toujours sur fond uni ou zone calme d'une image.
- • La barre verticale sépare la marque mère (DSSF) de la sous-marque (CONNECT) : ne jamais la retirer.
- • Ne pas déformer, incliner ni recolorer hors des deux versions.
- • Ne pas placer le logo couleur sur fond vert ou navy.
- • Ne pas ajouter d'ombre, de dégradé ou de contour.
- • Ne pas écrire « DSSF Connect » en minuscules dans les titres : CONNECT en capitales.
2. Couleurs
Tokens CSS déclarés dans globals.css, exposés à Tailwind (ex. bg-primary, text-accent).
Vert DSSF (primaire)
#026450 · --primary
Logo, boutons principaux, liens, états actifs
Vert 800
#024D3E · --primary-800
Survol des boutons, fonds verts profonds
Vert 600
#087A62 · --primary-600
Survol secondaire, bordures actives
Vert 500
#0F9476 · --primary-500
Graphiques, icônes secondaires
Vert 100
#D6F0E9 · --primary-100
Fonds de badges, surlignages
Vert 50
#EEF8F4 · --primary-50
Fonds de sections et d'alertes informatives
Menthe (accent)
#3FCBA6 · --accent
Appels à l'action sur fonds sombres, repères techniques
Navy
#0E1B26 · --navy
Hero, barres latérales, pied de page, texte principal
Graphite
#263445 · --graphite
Texte secondaire fort
Ardoise 500
#5B6B80 · --slate-500
Texte secondaire, libellés
Nuage
#F4F7FA · --cloud
Fonds de page alternés, tableaux
Nuage 200
#E3E9EF · --cloud-200
Bordures, séparateurs
Succès
#15803D · --success
Conforme, livré, validé
Attention
#B45309 · --warning
Revue nécessaire, en attente
Danger
#B91C1C · --danger
Non-conformité, erreur, blocage
3. Typographie
Inter (repli Manrope, puis système). Données techniques en chiffres tabulaires ; références et dimensions en monospace. Interlettrage resserré (−0,02 em) sur les titres.
4. Composants
Boutons
Un seul bouton primaire par zone ; menthe uniquement sur fond sombre.
Badges et statuts
Sémantique fixe : navy = manuel, vert = assisté, succès = instantané / conforme.
Formulaires
Dégressif à partir de 5 pièces
Indicateurs
Devis en cours
12
7 derniers jours
Taux de défaut
1,2 %
Hub Qualité
État vide
Aucune commande pour le moment.
État d'erreur
Le service d'analyse CAO est indisponible : un ingénieur traitera le fichier.
Skeleton loader
| Référence | Procédé | Mode | Estimation |
|---|---|---|---|
| RFQ-2026-000001 | Fraisage CNC | Assisté | — (exemple de mise en forme) |
5. Principes de mise en page
- • Grille 12 colonnes, largeur maximale 1 280 px, gouttières 24 px ; échelle d'espacement 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px.
- • Rayons : 6 px (contrôles), 10 px (cartes), 16 px (blocs), 24 px (hero).
- • Ombres discrètes (sm / md) ; jamais de dégradé décoratif.
- • Icônes lucide, trait 1,75, taille 20 ; une famille d'icônes par écran.
- • Sections alternées blanc / nuage ; navy réservé au hero, aux corridors et aux barres latérales.
- • Un prix n'est affiché qu'avec son statut (estimation / validé / ferme) et sa devise.
- • Les données de démonstration portent toujours le bandeau ambre.
- • Aucune photo d'usine générique ou générée : visuels techniques (wireframe, cotations) ou vraies photos autorisées.
- • Témoignages, logos et chiffres uniquement s'ils sont authentiques.
- • Desktop d'abord pour les workflows, responsive partout ; contrastes AA minimum.