SOS Design System

Que fait SOS Design System ?

Direction artistique

Premium, calme, civique, centré sur l'humain. Pensez à un magazine éditorial rencontrant une salle des opérations d'urgence — confiant, pas alarmiste.

À faire : titres éditoriaux surdimensionnés, grands espaces négatifs, grille fortement alignée à gauche avec asymétrie délibérée, sections occasionnelles en pleine page, éclairage cinématographique subtil (un dégradé radial doux par section maximum), verre restreint aux superpositions uniquement, rouge d'urgence utilisé comme accent précis.

À ne pas faire : lueur néon, arrière-plans rouges saturés, graphiques emoji, cartes de tableau de bord génériques partout, cartes flottantes avec ombres portées lourdes, objets en rotation continue, plusieurs dégradés concurrents, arrière-plans de particules.

Règle empirique : si le rouge couvre plus d'environ 5 % d'une fenêtre, c'est trop.

Jetons de couleur

Définir une fois dans src/app/globals.css sous @theme de Tailwind v4. Les composants utilisent uniquement les utilitaires de jetons (bg-ink, text-paper, text-accent), jamais de hex brut.

Jeton	Valeur	Utilisation
--color-ink	#101318	Fond sombre principal
--color-ink-raised	#1B2027	Surfaces sombres, contours de téléphone, cartes sur fond sombre
--color-ink-line	#2A313B	Filets/séparateurs sur fond sombre
--color-paper	#F5F6F7	Fond de section clair
--color-paper-line	#E1E4E8	Filets sur fond clair
--color-accent	#D93642	Accent : CTA, marques clés, points de statut
--color-accent-strong	#B8232F	Texte d'accent sur fonds clairs (AA sur #F5F6F7)
--color-accent-soft	#F6E8EA	Arrière-plans teintés, badges sur fond clair
--color-text-dark	#171A20	Texte de corps sur fond clair
--color-text-light	#F7F8FA	Texte de corps sur fond sombre
--color-muted-dark	#9AA2AD	Texte atténué sur fond sombre (≥ 4,5:1 sur #101318)
--color-muted-light	#5E6672	Texte atténué sur fond clair (≥ 4,5:1 sur #F5F6F7)

Notes de contraste :

• #858D98 (atténué fourni) passe sur fond sombre uniquement pour les grands textes ; utilisez --color-muted-dark pour le corps.
• Le texte blanc sur les boutons #D93642 est d'environ 4,6:1 — OK pour les étiquettes de bouton ≥ 16px semi-gras. Vérifiez après toute modification.
• Le texte rouge sur fonds clairs doit utiliser --color-accent-strong.
• Ne jamais communiquer le statut uniquement par la couleur — associez-le à une étiquette ou une icône.

Couleurs de statut (section de suivi uniquement) : En attente = ambre #C98A1B + icône d'horloge, En cours = rouge d'accent + point sans pulsation, Résolu = vert #2F8F5B + icône de coche. Toujours étiqueté.

Typographie

• Police : une variable sans via next/font/google (préféré : Inter Tight pour l'affichage + Inter pour le corps, ou Geist seul). display: "swap", sous-ensemble latin, max 2 familles.
• Titres : poids 600–700, crénage serré (-0.03em à -0.045em), hauteur de ligne 0,95–1,05.
• Corps : poids 400, hauteur de ligne 1,6, largeur maximale ~65ch.
• Sourcils : 12–13px, majuscules, tracking-[0.18em], poids 500, couleur atténuée, souvent précédé d'une courte règle rouge.

Échelle fluide (à placer dans @theme comme --text-*) :

--text-display: clamp(3rem, 1.2rem + 7.5vw, 9rem);    /* hero h1 */
--text-h2:      clamp(2.25rem, 1.2rem + 4.2vw, 5.5rem);
--text-h3:      clamp(1.375rem, 1rem + 1.4vw, 2.25rem);
--text-lead:    clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
--text-body:    1rem;  /* 1.0625rem sur ≥ md */
--text-small:   0.875rem;
--text-eyebrow: 0.8125rem;

À 320px, le titre hero doit tenir sans débordement — testez spécifiquement "Every Second Matters."

Mise en page & espacement

• Conteneur : max-w-[1440px], remplissage latéral clamp(1.25rem, 4vw, 4rem).
• Grille à 12 colonnes sur ≥ lg ; étendues asymétriques (ex. 7/5, 5/7, offset-1).
• Rythme vertical des sections : clamp(5rem, 10vw, 10rem) haut/bas.
• Échelle d'espacement : base 4px (valeur par défaut Tailwind). Privilégiez les pas 6, 8, 12, 16, 24, 32.
• Rayon : 6px petits contrôles, 14px cartes, cadre téléphone ~2,6rem extérieur.

Surfaces & rythme des sections

Alterner sombre et clair pour créer des chapitres : Hero (sombre) → À propos (clair) → Comment ça marche (sombre) → Catégories (clair) → Vitrine (sombre, pleine page) → Inscription (clair) → Suivi (sombre) → Coordination (clair) → FAQ (clair) → CTA final (sombre, cinématographique) → Pied de page (sombre).

Éclairage : au plus un radial-gradient par section sombre, faible opacité (≤ 0,18), teinte rouge ou gris froid. Statique — jamais animé.

Verre : bg-white/5 + backdrop-blur-md + bordure 1px ink-line, uniquement sur la navigation et les petites superpositions. Pas de grands panneaux flous (performances).

Composants

• Bouton primaire : fond d'accent, texte clair, hauteur minimale 48px, remplissage horizontal 20–28px, icône de flèche subtile qui se déplace de 2px au survol.
• Bouton secondaire : transparent, bordure 1px (ink-line sur fond sombre / paper-line sur fond clair), mêmes dimensions.
• Pas de bouton magasin/téléchargement — cette page n'a pas de CTA d'installation, voir CLAUDE.md "Scope: showcase, not install funnel".
• Sourcil : règle rouge 24px + étiquette en majuscules.
• DraftBadge : petite pilule à contour ambre "Brouillon — en attente de confirmation" ; uniquement dans les sections avec contenu de brouillon.
• Tuile de catégorie : icône (24px lucide, stroke 1.5) + titre + description sur une ligne ; bordure fine, pas d'ombre lourde ; survol = changement de couleur de bordure + soulèvement de 2px.
• Cadre téléphone : voir la compétence app-screenshot-showcase.

Iconographie

lucide-react uniquement, stroke 1.5, tailles 20/24/32. Une icône par concept ; les icônes soutiennent le texte, ne le remplacent jamais.

Liste de contrôle avant de terminer le travail visuel

• Seuls des jetons sont utilisés ; pas de hex brut dans les composants
• Utilisation du rouge restreinte ; le statut n'est pas uniquement basé sur la couleur
• La hiérarchie des titres se lit d'un coup d'œil ; un élément dominant par fenêtre
• Rythme sombre/clair intact
• Contraste vérifié pour toute nouvelle paire de couleurs
• A l'air intentionnel à 320px, pas seulement rétréci