Design System
Charte graphique
sentinext.io — Version 1.0 — Mars 2026
Ce document définit les règles visuelles de la plateforme sentinext.io : couleurs, typographie, composants et principes de mise en page. Il sert de référence pour garantir la cohérence de l'interface sur l'ensemble des surfaces produit.
1. Logo
Le logo Sentinext est composé d'un picto bouclier avec un "S" et un "X" croisé en bleu, suivi du mot SENTINEXT en blanc et de l'extension .io en bleu.
Version principale — fond sombreVersion sur surface card2. Palette de couleurs
L'interface adopte une palette sombre inspirée des outils premium (Stripe, Linear). Chaque couleur a un rôle précis et ne doit pas être utilisée hors de son contexte.
Fonds & Surfaces
Background principal
#0B1220
bgMain — Fond de page
Background alternatif
#0F1729
bgAlt — Inputs, sous-sections
Surface
#111827
surface — Cards, modales
Sidebar
#131C2E
sidebar — Navigation latérale
Couleur primaire
Primary
#2563EB
Boutons, liens, focus, accents
Primary Hover
#1D4ED8
État survol des boutons
Brand
#2588E8
Logo, highlights marketing
Statuts
Succès
#2BA972
Confirmations, missions terminées
Erreur
#E85D5D
Alertes, rejets, incidents critiques
Avertissement
#E8A32E
Avertissements, SLA à risque
Typographie
Texte principal
#F9FAFB
textMain — Titres, valeurs clés
Texte secondaire
#9CA3AF
textMuted — Labels, métadonnées
Neutre
#6B7280
neutral — Texte désactivé
Opacités Tailwind utilisées sur le blanc
Corps de texte
Descriptions
Méta / liens footer
Séparateurs visuels
Bordures
Bordures subtiles
Séparateurs fins
3. Typographie
Deux polices sont utilisées : Inter pour l'interface et les contenus, Poppins pour le logo et les éléments marketing.
Inter
Interface produit — tous les textes de l'application
400 — Regular
500 — Medium
600 — Semi-bold
700 — Bold
Poppins
Logo, titres landing page, éléments marketing
700 — Bold
Échelle typographique (Inter)
Titre H1
36px / Bold / tracking default
Performance opérationnelle
Titre H2
30px / Bold
Tableau de bord
Titre H3
20px / Semi-bold
Vue d'ensemble
H4 / Card title
16px / Medium / -0.01em
Missions en cours
Body — Corps de texte
14px / Regular
Suivi des interventions terrain en temps réel.
Caption / Label
12px / Regular / +0.02em
DERNIÈRE MISE À JOUR — MARS 2026
4. Composants UI
Boutons
Badges de statut
Cards
Missions actives
24
+3 par rapport à hier
Taux de ponctualité
97,4%
Objectif SLA : 95%
Rayons de bordure
4px
Micro (badges, tags)
8px
Standard (boutons, cards, inputs)
12px
Large (modales, drawers)
5. Iconographie
Les icônes utilisées dans l'application proviennent de la bibliothèque Material Icons (MUI) en style Outlined pour les éléments neutres et Filled pour les états actifs.
6. Principes généraux
Densité de l'information
L'interface favorise la densité contrôlée. Les espacements internes des cards sont de 20px (p-5), les sections sont séparées de 48px minimum.
Hiérarchie visuelle
Quatre niveaux de texte : blanc pur (valeurs), white/80 (corps), white/50 (descriptions), white/40 (méta). Jamais moins de white/20 pour du texte lisible.
Mode sombre uniquement
L'application est conçue exclusivement en dark mode. Les tokens de couleur sont calibrés pour un contraste WCAG AA sur fond #0B1220.
Transitions
Toutes les transitions UI durent 180ms avec easing ease. Les animations de chargement utilisent des pulses opacity pour éviter le saccadé.
Touch targets
Conformément aux guidelines Apple HIG, la hauteur minimale des éléments interactifs est de 44px pour garantir l'accessibilité mobile.
Séparateurs
Les séparateurs horizontaux utilisent border-white/[0.04] à white/[0.08] selon leur importance. Jamais de couleur opaque pour les bordures internes.
sentinext.io — Charte graphique v1.0 — GHN CONSULTING SAS — contact@sentinext.io