Design System

Charte graphique

sentinext.io — Version 1.0 — Mars 2026

Ce document réunit les éléments de marque de sentinext.io : le logo et ses règles d'usage, les couleurs et les polices. Si vous reprenez notre logo sur un site, un support ou une présentation, ce sont les règles que nous vous demandons de respecter. Les valeurs affichées ici sont lues directement dans le référentiel de design de la plateforme.

1. Logo

Le logo Sentinext est un aigle stylisé, bleu et blanc cassé, accompagné du mot Sentinext.io et de la baseline « Plateforme de sécurité territoriale ». Il existe en trois formes — horizontale, verticale et aigle seul — chacune déclinée pour un fond sombre et pour un fond clair. Tous les fichiers sont téléchargeables sur la page kit de marque.

Horizontal — fond sombre

Horizontal — fond clair

Vertical — surfaces centrées

Aigle seul — sous 40 px de haut

✓Prendre la variante du fond : tracés clairs sur fond sombre, tracés sombres sur fond clair

✓Respecter le ratio width/height du SVG sans déformation

✓Sous 40 px de haut, poser l'aigle seul — la baseline devient illisible

✗Ne pas recadrer, coloriser ou redessiner le logo

✗Ne pas réécrire « Sentinext.io » à côté du logo horizontal ou vertical : ils le portent déjà

2. 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

#1A2438

sidebar — Navigation latérale

Couleur primaire

Primary

#2563EB

Boutons, liens, focus, accents

Primary Hover

#1D4ED8

État survol des boutons

Brand

#2563EB

Logo, highlights marketing

Typographie

Texte principal

#F9FAFB

textMain — Titres, valeurs clés

Texte secondaire

#9CA3AF

textMuted — Labels, métadonnées

Neutre

#6B7280

neutral — Texte désactivé

3. Typographie

Deux polices sont utilisées : Inter pour l'interface et les contenus, Poppins pour le mot-symbole du logo.

Inter

Interface produit — tous les textes de l'application

300 — Light

400 — Regular

500 — Medium

600 — Semi-bold

700 — Bold

Poppins

Mot-symbole du logo uniquement — non chargée par l'application

700 — Bold

À lire avant de reproduire le logo

Poppins sert au mot-symbole du logo, et à rien d'autre : aucune surface de l'application ne la charge — l'interface est entièrement en Inter. Le fichier sentinext-logo.svg la déclare avec Arial en repli, donc le logo s'affiche en Arial sur un poste où Poppins n'est pas installée. Le spécimen ci-dessus porte exactement cette déclaration : il vous montre donc ce que vous verrez — Poppins si vous l'avez, Arial sinon. Si vous reprenez notre logo, installez Poppins Bold (700) ou utilisez le SVG tel quel, sans le re-composer.

4. Principes généraux

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.

sentinext.io — Charte graphique v1.0 — GHN CONSULTING SAS — contact@sentinext.io