/* ================================================================ Redsmite Design Tokens Source de vérité : 01_Entreprise/identite-visuelle/charte-synthetique.md Triade : Cadence. Cabinet. Mesure. Version : 2.0 (2026-05-15) — alignée charte v2 ================================================================ Usage : importer ce fichier en tête de toute feuille de style. Toutes les variables sont nommées --rs-* pour éviter les collisions. CHANGEMENTS v1 -> v2 (rupture assumée, pas de rétrocompat) : - Échelle spacing : 4 px -> 8 px fermée (--rs-space-1..7) - Échelle typo : ad hoc -> 6 rôles fermés (--rs-t-*) - Ajout palette dataviz (donnée / référence / alerte) - Ajout système états UI (info / succès / warning / erreur) - Ajout --rs-color-rouge-pale (#FEF5F6, fond erreur critique) Les anciens noms (--rs-text-*, ancienne grille --rs-space-*) sont supprimés. Tout consommateur (landing, templates) doit être audité et migré contre cette v2 avant déploiement. ================================================================ */ :root { /* ---------------------------------------------------------------- 1. COULEURS ---------------------------------------------------------------- Le rouge est un sceau, pas un motif. Un seul rouge par écran, sur l'élément le plus important. Jamais de rouge sur une donnée chiffrée. ---------------------------------------------------------------- */ --rs-color-rouge: #EB2933; /* Rouge signature, logo, accent unique */ --rs-color-rouge-hover: #C8232B; /* Rouge interactif, :hover et :active uniquement */ --rs-color-rouge-pale: #FEF5F6; /* Fond erreur critique UNIQUEMENT (cf. §États UI) */ --rs-color-bg: #FAFAF7; /* Blanc cassé, fond principal de toutes les surfaces */ --rs-color-bg-pure: #FFFFFF; /* Blanc pur, exports techniques (PDF, factures, états UI) */ --rs-color-text: #1A1A18; /* Quasi-noir, texte principal et éléments graphiques */ --rs-color-text-secondary: #6B6B63; /* Gris chaud, texte secondaire et métadonnées */ --rs-color-border: #E0DFD8; /* Beige très pâle, séparateurs horizontaux fins */ /* Palette dataviz stricte (doctrine Tufte, cf. charte §Dataviz). Trois couleurs, aucune autre. Le rouge alerte = une occurrence maximum par graphe. */ --rs-color-data: #1A1A18; /* Donnée principale */ --rs-color-ref: #A8A8A0; /* Référence / benchmark / soulignement preuve */ --rs-color-alert: #EB2933; /* Point d'attention, une fois max par graphe */ /* ---------------------------------------------------------------- 2. POLICES ---------------------------------------------------------------- Inter Tight (titres) + Inter (corps + labels) + JetBrains Mono (data) + Orbitron (wordmark "redsmite" uniquement). Toutes gratuites via Google Fonts. NOTE : la coupe titre est Inter Tight (famille Google Fonts réelle, optimisée headline, utilisée dans tous les mockups v2). "Inter Display" conservé en fallback de continuité historique. Arbitrage final de nommage à ratifier par Charles (cf. clôture v2). ---------------------------------------------------------------- */ --rs-font-wordmark: "Orbitron", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --rs-font-display: "Inter Tight", "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --rs-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --rs-font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace; /* --rs-font-wordmark : UNIQUEMENT pour "redsmite" bas-de-casse façon logo (navbar, titre image de marque, couverture). Jamais en texte courant. Voir reference_wordmark_redsmite_orbitron.md. */ --rs-weight-regular: 400; --rs-weight-medium: 500; --rs-weight-bold: 700; /* ---------------------------------------------------------------- 3. ÉCHELLE TYPOGRAPHIQUE — 6 rôles fermés ---------------------------------------------------------------- Échelle alignée sur la grille verticale 8 px. Maximum 4 rôles simultanés sur un même document (Vignelli). Chaque rôle porte size + line-height + tracking. ---------------------------------------------------------------- */ --rs-t-display-size: 64px; --rs-t-display-lh: 64px; --rs-t-display-track: -0.03em; --rs-t-h1-size: 40px; --rs-t-h1-lh: 48px; --rs-t-h1-track: -0.02em; --rs-t-h2-size: 24px; --rs-t-h2-lh: 32px; --rs-t-h2-track: -0.01em; --rs-t-body-size: 16px; --rs-t-body-lh: 24px; --rs-t-body-track: 0; --rs-t-caption-size: 13px; --rs-t-caption-lh: 20px; --rs-t-caption-track: 0; --rs-t-label-size: 11px; --rs-t-label-lh: 16px; --rs-t-label-track: 0.1em; /* + text-transform: uppercase */ --rs-t-mono-size: 13px; --rs-t-mono-lh: 20px; --rs-t-mono-track: 0; /* ---------------------------------------------------------------- 4. ESPACEMENT — échelle 8 px fermée ---------------------------------------------------------------- Aucune valeur intermédiaire (pas de 4, 12, 20, 36). Le brutalisme s'exprime dans le saut : la page tranche, elle ne s'effrite pas. ---------------------------------------------------------------- */ --rs-space-1: 8px; /* Gap intra-élément, micro-séparation */ --rs-space-2: 16px; /* Gap entre éléments proches, padding bouton */ --rs-space-3: 24px; /* Gap entre blocs liés */ --rs-space-4: 32px; /* Gap sections d'un même bloc, padding carte */ --rs-space-5: 48px; /* Gap entre sections de page, padding section */ --rs-space-6: 64px; /* Gap entre régions de page */ --rs-space-7: 96px; /* Gap entre grands ensembles (header <-> corps) */ /* ---------------------------------------------------------------- 5. LIGNES ET BORDURES ---------------------------------------------------------------- Lignes fines comme seul ornement. Border-radius zéro partout. ---------------------------------------------------------------- */ --rs-border-width: 1px; --rs-border-thick: 2px; /* Bordure erreur critique uniquement */ --rs-border-color: var(--rs-color-border); --rs-border-strong: var(--rs-color-text); --rs-radius: 0; /* Zéro, partout, sans exception */ /* ---------------------------------------------------------------- 6. ÉTATS UI — 4 niveaux, un seul rouge ---------------------------------------------------------------- Refus de la palette Bootstrap vert/ambre/rouge. La gradation passe par la bordure et le fond, pas par la chromatique. ---------------------------------------------------------------- */ --rs-state-info-color: var(--rs-color-text-secondary); --rs-state-info-border: var(--rs-color-border); --rs-state-info-bg: var(--rs-color-bg-pure); --rs-state-success-color: var(--rs-color-text); --rs-state-success-border: var(--rs-color-text); --rs-state-success-bg: var(--rs-color-bg-pure); --rs-state-warning-color: var(--rs-color-rouge); --rs-state-warning-border: var(--rs-color-border); --rs-state-warning-bg: var(--rs-color-bg-pure); --rs-state-error-color: var(--rs-color-rouge); --rs-state-error-border: var(--rs-color-rouge); /* + border-width 2 px */ --rs-state-error-bg: var(--rs-color-rouge-pale); /* ---------------------------------------------------------------- 7. ICONOGRAPHIE (Lucide) ---------------------------------------------------------------- */ --rs-icon-stroke: 1.5; /* Plus fin que default Lucide (2) */ --rs-icon-sm: 16px; --rs-icon-md: 20px; --rs-icon-lg: 24px; --rs-icon-align: -0.125em; /* vertical-align baseline texte */ /* ---------------------------------------------------------------- 8. TRANSITIONS ---------------------------------------------------------------- */ --rs-transition-fast: 100ms ease-out; --rs-transition-normal: 200ms ease-out; /* ---------------------------------------------------------------- 9. MAX-WIDTHS ---------------------------------------------------------------- */ --rs-container: 1200px; --rs-container-prose: 680px; --rs-container-narrow: 480px; } /* ================================================================ PRIMITIVES UTILES ================================================================ */ /* Rôles typographiques prêts à l'emploi. */ .rs-display { font-family: var(--rs-font-display); font-weight: var(--rs-weight-bold); font-size: var(--rs-t-display-size); line-height: var(--rs-t-display-lh); letter-spacing: var(--rs-t-display-track); } .rs-h1 { font-family: var(--rs-font-display); font-weight: var(--rs-weight-bold); font-size: var(--rs-t-h1-size); line-height: var(--rs-t-h1-lh); letter-spacing: var(--rs-t-h1-track); } .rs-h2 { font-family: var(--rs-font-display); font-weight: var(--rs-weight-bold); font-size: var(--rs-t-h2-size); line-height: var(--rs-t-h2-lh); letter-spacing: var(--rs-t-h2-track); } .rs-body { font-family: var(--rs-font-body); font-size: var(--rs-t-body-size); line-height: var(--rs-t-body-lh); } .rs-caption { font-family: var(--rs-font-body); font-size: var(--rs-t-caption-size); line-height: var(--rs-t-caption-lh); color: var(--rs-color-text-secondary); } .rs-label { font-family: var(--rs-font-body); font-size: var(--rs-t-label-size); line-height: var(--rs-t-label-lh); font-weight: var(--rs-weight-medium); letter-spacing: var(--rs-t-label-track); text-transform: uppercase; color: var(--rs-color-text-secondary); } .rs-mono { font-family: var(--rs-font-mono); font-size: var(--rs-t-mono-size); line-height: var(--rs-t-mono-lh); } /* Séparateur horizontal fin, le seul ornement autorisé. */ .rs-separator { border: none; border-top: var(--rs-border-width) solid var(--rs-border-color); margin: var(--rs-space-5) 0; } .rs-container { max-width: var(--rs-container); margin: 0 auto; padding: 0 var(--rs-space-3); } .rs-prose { max-width: var(--rs-container-prose); font-family: var(--rs-font-body); font-size: var(--rs-t-body-size); line-height: var(--rs-t-body-lh); color: var(--rs-color-text); } /* ================================================================ RESET ET DEFAULTS GLOBAUX ================================================================ */ *, *::before, *::after { box-sizing: border-box; border-radius: var(--rs-radius); } html { color-scheme: light; } body { margin: 0; background-color: var(--rs-color-bg); color: var(--rs-color-text); font-family: var(--rs-font-body); font-size: var(--rs-t-body-size); line-height: var(--rs-t-body-lh); font-weight: var(--rs-weight-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; /* Garde-fou mobile : aucun débordement horizontal toléré */ } h1 { font-family: var(--rs-font-display); font-weight: var(--rs-weight-bold); font-size: var(--rs-t-h1-size); line-height: var(--rs-t-h1-lh); letter-spacing: var(--rs-t-h1-track); margin: 0; } h2 { font-family: var(--rs-font-display); font-weight: var(--rs-weight-bold); font-size: var(--rs-t-h2-size); line-height: var(--rs-t-h2-lh); letter-spacing: var(--rs-t-h2-track); margin: 0; } h3, h4, h5, h6 { font-family: var(--rs-font-display); font-weight: var(--rs-weight-bold); line-height: var(--rs-t-h2-lh); margin: 0; } a { color: inherit; text-decoration: none; } a:hover { color: var(--rs-color-rouge-hover); } button { border-radius: var(--rs-radius); cursor: pointer; font-family: inherit; } img, svg { display: block; max-width: 100%; }