/* ═════════════════════════════════════════════════════════════════════════ * NotePlus — Design Tokens (vitrine) * Version: 2.0.0 | Mis à jour: 2026-08-27 * * Source de vérité pour les couleurs, typographies, spacing, radius, élévation, * motion de LA VITRINE UNIQUEMENT (wordpress/wp-content/themes/noteplus/). * * L'en-tête de la v1.0.0 revendiquait ce fichier comme "canonique" pour la * vitrine, l'app SaaS et Studio. C'était faux dans les faits : l'app SaaS a sa * propre identité produit (refonte juillet 2026, Fraunces/Hanken Grotesk, * définie dans son propre dépôt, jamais importée d'ici) et Studio n'importe * pas non plus ce fichier. Les trois projets partagent une CONVENTION de * nommage (--np-*), pas un fichier. Corrigé le 27/08 après une confusion * réelle entre "l'identité du produit" et "l'identité de la vitrine". * * v2.0.0 : adoption de la charte graphique Graphique Alliance, arbitrée par * Khalil le 27/08/2026 après comparaison sur maquettes. Source des valeurs : * GA-Site/apercu/charte.css (parti "L'atelier en continuité", arbitré côté * GA le 27/07/2026 — reprend l'identité historique GA, corail + encre). * Les noms de variables ne changent pas : seules les valeurs bougent, pour ne * rien casser côté composants qui les consomment. * * Préfixe : --np-* (NotePlus). Évite collision avec d'autres design systems. * ═════════════════════════════════════════════════════════════════════════ */ :root { /* ── Couleurs : Marque & Accent ──────────────────────────────────────── */ /* Corail GA, tel quel. --primary reste le corail plein (aplats, italiques, larges surfaces) ; --primary-active est la version foncée obligatoire dès qu'il y a du texte dessus (contraste 5,4:1 — voir charte.css §5, invariant du président : blanc sur corail plein ne fait que 3,57:1). */ --np-color-primary: #EA5542; /* Corail GA — CTA plein, aplats, italiques d'emphase */ --np-color-primary-active: #B93520; /* Corail foncé — TOUT texte/icône sur fond corail ou clair passe par ici */ --np-color-primary-soft: #F0958A; /* Corail clair — usage sur fond encre (band-dark) */ --np-color-primary-halo: rgba(234,85,66,0.14); /* Halo corail autour d'un repère de scène (anneau, bande) ; ajouté 21/10 */ --np-color-primary-disabled: #EFD9D3; /* Corail désaturé clair — état disabled */ /* La charte GA n'a que deux familles (corail, encre) : pas de teal ni d'ambre. Les tokens accent-* restent (des dizaines d'usages en dépendent sur le site) mais pointent désormais sur les deux seules teintes disponibles — teal → encre (deuxième identité), ambre → corail foncé (même valeur que primary-active, assumé : la charte est plus sobre que l'ancienne palette à 3 accents, pas un oubli). */ --np-color-accent-teal: #413B34; /* = encre-2 — accent secondaire (statut, indicateur) */ --np-color-accent-teal-soft: #B0A99C; /* Gris chaud clair — usage sur fond encre (band-dark) */ --np-color-accent-amber: #B93520; /* = corail foncé — badges catégorie, surlignage inline rare */ --np-color-accent-amber-soft: #F0958A; /* = corail clair — usage sur fond encre (band-dark) */ /* ── Couleurs : Surfaces (fond GA) ────────────────────────────────────── */ --np-color-canvas: #FFFFFF; /* Floor par défaut — blanc, comme charte.css --fond */ --np-color-surface-soft: #FAF7F4; /* Bandes section très douces, dividers — charte.css --fond-2 */ --np-color-surface-card: #F3EDE8; /* Feature cards, content cards — charte.css --fond-3 */ --np-color-surface-strong: #EBE1D8; /* Bandes "métiers" / sections d'emphase modérée */ --np-color-surface-stronger: #DCD0C3; /* Bordures visibles, états sélectionnés */ --np-color-canvas-veil: rgba(255,255,255,0.86); /* Voile blanc translucide posé sur une capture (tampon de scène) ; ajouté 21/10 */ /* ── Couleurs : Surfaces (encre) ──────────────────────────────────────── */ --np-color-dark: #13100D; /* Bandes sombres, mockup produit, footer — encre GA */ --np-color-dark-elevated: #241F19; /* Cards élevées dans une bande sombre */ --np-color-dark-soft: #1C1712; /* Code blocks dans une carte sombre */ /* ── Couleurs : Hairlines (bordures fines) ───────────────────────────── */ --np-color-hairline: rgba(19,16,13,0.13); /* = charte.css --trait */ --np-color-hairline-soft: rgba(19,16,13,0.08); --np-color-hairline-dark: rgba(255,255,255,0.06); /* Divider sur fond sombre */ /* ── Couleurs : Texte (sur fond clair) ────────────────────────────────── */ --np-color-ink: #13100D; /* Headlines + texte primaire — encre GA */ --np-color-body-strong: #2B2620; /* Paragraphes en emphase, lede */ --np-color-body: #413B34; /* Texte courant par défaut — encre-2 GA */ --np-color-muted: #6B6459; /* Sous-titres, breadcrumbs, footer-adjacent */ --np-color-muted-soft: #8C8579; /* Caption, fine-print, copyright */ /* ── Couleurs : Texte (sur fond sombre) ───────────────────────────────── */ --np-color-on-primary: #ffffff; /* Texte sur corail (foncé obligatoire, cf plus haut) */ --np-color-on-dark: #FAF7F4; /* Blanc chaud sur fond encre */ --np-color-on-dark-soft: #B0A99C; /* Footer body, labels secondaires en sombre */ /* ── Couleurs : Sémantique ───────────────────────────────────────────── Fonctionnelles (succès/alerte/erreur), pas identitaires : la charte GA ne se prononce pas dessus (son site n'a ni formulaire ni statut) et les faire dériver du corail les rendrait confondables avec la marque. Inchangées à dessein. */ --np-color-success: #5db872; /* Status "actif", "validé" */ --np-color-success-strong: #1E7A4C; /* Vert foncé — texte/trait "validé" sur fond clair (le #5db872 ne contraste pas en texte) ; ajouté 21/10 pour la scène du héro */ --np-color-success-soft: #E4F3EA; /* Vert pâle — fond d'une pastille "validé" ; ajouté 21/10 */ --np-color-warning: #d4a017; /* Warning rare en marketing, plus fréquent en SaaS */ --np-color-error: #c64545; /* Erreurs validation, statuts en retard */ --np-color-info: #5db8a6; /* Info neutre — plus un synonyme d'accent-teal (qui a changé de sens) */ /* ── Couleurs : Statuts dossier (SaaS) ───────────────────────────────── */ /* Mapping métier — voir design-system.md > Organisms > status-badge */ --np-color-status-brief: var(--np-color-accent-amber-soft); /* Brief — ambre */ --np-color-status-redac: var(--np-color-accent-teal-soft); /* Rédaction — teal soft */ --np-color-status-relec: var(--np-color-primary-soft); /* Relecture — corail soft */ --np-color-status-bat: var(--np-color-success); /* BAT — vert */ --np-color-status-imprime: var(--np-color-muted); /* Imprimé/archivé — muted */ /* ── Typographie : Familles ──────────────────────────────────────────── Piles système GA, aucun fichier chargé (charte.css §2 : "ce sont des piles système, pas des webfonts"). En pratique ça retire une dépendance par rapport à v1 (Cormorant Garamond + Inter étaient déjà auto-hébergés, jamais Google Fonts — mais c'était quand même deux familles à livrer). */ --np-font-serif: 'Iowan Old Style', 'Charter', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif; --np-font-sans: 'Montserrat', 'Avenir Next', 'Segoe UI', Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif; --np-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* la charte GA n'a pas d'avis sur le mono, inchangé */ /* ── Typographie : Échelle (display = serif, le reste = sans) ────────── */ /* Display — GA : serif TOUJOURS en 400, jamais en gras (l'italique porte l'emphase, pas le poids — charte.css h2{font-weight:400}). */ --np-text-display-xl-size: 64px; --np-text-display-xl-weight: 400; --np-text-display-xl-lh: 1.05; --np-text-display-xl-tracking: -0.03em; --np-text-display-lg-size: 48px; --np-text-display-lg-weight: 400; --np-text-display-lg-lh: 1.1; --np-text-display-lg-tracking: -0.025em; --np-text-display-md-size: 36px; --np-text-display-md-weight: 400; --np-text-display-md-lh: 1.15; --np-text-display-md-tracking: -0.02em; --np-text-display-sm-size: 28px; --np-text-display-sm-weight: 400; --np-text-display-sm-lh: 1.2; --np-text-display-sm-tracking: -0.015em; /* Title — sans 500. Tenu à l'écart de la charte GA à dessein : ce sont des titres d'interface (boutons, nav, petits en-têtes), pas des titres éditoriaux — la charte GA ne couvre que les pages marketing. */ --np-text-title-lg-size: 22px; --np-text-title-lg-weight: 500; --np-text-title-lg-lh: 1.3; --np-text-title-md-size: 18px; --np-text-title-md-weight: 500; --np-text-title-md-lh: 1.4; --np-text-title-sm-size: 16px; --np-text-title-sm-weight: 500; --np-text-title-sm-lh: 1.4; /* Body — sans 400, corps 16,5px/1,62 comme charte.css */ --np-text-body-md-size: 16.5px; --np-text-body-md-lh: 1.62; --np-text-body-sm-size: 14px; --np-text-body-sm-lh: 1.55; /* Caption */ --np-text-caption-size: 13px; --np-text-caption-weight: 500; --np-text-caption-up-size: 12px; --np-text-caption-up-weight: 700; /* GA : surtitres en 700, cf charte.css .surlignage/.eyebrow */ --np-text-caption-up-tracking: 0.13em; /* Code & Button */ --np-text-code-size: 14px; --np-text-code-lh: 1.6; --np-text-button-size: 15.5px; /* charte.css .btn */ --np-text-button-weight: 600; --np-text-nav-size: 14px; --np-text-nav-weight: 500; /* ── Spacing (base 4px) ──────────────────────────────────────────────── */ --np-space-xxs: 4px; --np-space-xs: 8px; --np-space-sm: 12px; --np-space-md: 16px; --np-space-lg: 24px; --np-space-xl: 32px; --np-space-xxl: 48px; --np-space-section: 96px; /* Padding vertical entre bandes — JAMAIS modifier sur vitrine */ --np-space-section-saas: 48px; /* Équivalent en SaaS app (densité plus élevée) */ /* ── Border radius ───────────────────────────────────────────────────── GA : 3px partout, jamais plus (charte.css, invariant explicite, y compris sur les boutons et les badges "pill"). Seule exception : les cercles véritables (avatars, icônes rondes) restent des cercles — ce n'est pas un radius de marque, c'est une forme géométrique. */ --np-radius-xs: 3px; --np-radius-sm: 3px; --np-radius-md: 3px; /* button, text-input, category-tab — STANDARD CTA */ --np-radius-lg: 3px; /* cards (feature, pricing, code-window), kanban-card */ --np-radius-xl: 3px; /* hero illustration container, callout coral */ --np-radius-pill: 3px; /* badge, "NEW" tags — GA n'a pas de forme pilule (cf .cta-mini) */ --np-radius-full: 9999px; /* avatars, icônes rondes — cercle véritable, hors périmètre charte */ /* ── Élévation (shadows) ─────────────────────────────────────────────── */ /* GA : très peu d'ombre, la profondeur vient des filets et des aplats (charte.css .chantier-carte:hover est la seule ombre du site). Palette recolorée en encre, portée réduite d'un cran par rapport à v1. */ --np-shadow-none: none; --np-shadow-hover: 0 1px 2px rgba(19,16,13,0.06); --np-shadow-card: 0 3px 10px -4px rgba(19,16,13,0.08); --np-shadow-card-elev: 0 18px 40px -30px rgba(19,16,13,0.45); /* = charte.css .chantier-carte:hover */ --np-shadow-mockup: 0 40px 80px -20px rgba(19,16,13,0.30); /* mockup produit en hero */ --np-shadow-modal: 0 24px 64px -12px rgba(19,16,13,0.22); /* modal SaaS */ --np-shadow-popover: 0 8px 24px -6px rgba(19,16,13,0.12); /* dropdown, tooltip large */ --np-shadow-scene-note: 0 12px 30px -12px rgba(19,16,13,0.35); /* bulle de remarque posée sur une capture (scène) ; ajouté 21/10 */ --np-shadow-cursor: 0 2px 4px rgba(19,16,13,0.35); /* drop-shadow du curseur de scène ; ajouté 21/10 */ /* ── Motion (transitions) ────────────────────────────────────────────── */ --np-easing-standard: cubic-bezier(0.16, 1, 0.3, 1); /* "out-expo" doux — défaut */ --np-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); /* éléments importants (modal in/out) */ --np-duration-instant: 80ms; /* hover de bouton, focus ring */ --np-duration-fast: 150ms; /* color/bg transitions standard — proche des 0,14-0,16s de charte.css */ --np-duration-base: 250ms; /* card translate, opacity */ --np-duration-slow: 450ms; /* modal, drawer, page transitions */ /* ── Layout ──────────────────────────────────────────────────────────── */ --np-content-max: 1240px; /* Largeur max conteneur (vitrine + saas marketing surfaces) */ --np-content-narrow: 800px; /* Articles, blog, contenu éditorial long */ --np-app-sidebar-width: 260px; /* Sidebar SaaS — fixe */ --np-app-sidebar-collapsed: 64px; /* Sidebar SaaS repliée */ /* ── Z-index (layering) ──────────────────────────────────────────────── */ --np-z-base: 1; --np-z-sticky: 100; /* top-nav sticky */ --np-z-dropdown: 200; --np-z-overlay: 300; --np-z-modal: 400; --np-z-toast: 500; --np-z-tooltip: 600; /* ── Focus ring (accessibilité) ──────────────────────────────────────── */ --np-focus-ring: 0 0 0 3px rgba(185, 53, 32, 0.28); /* Halo corail foncé — visible sur clair et sombre */ --np-focus-ring-on-dark: 0 0 0 3px rgba(240, 149, 138, 0.38); /* Halo primary-soft sur fond sombre */ } /* ═════════════════════════════════════════════════════════════════════════ * Conventions d'usage * ───────────────────────────────────────────────────────────────────────── * 1. JAMAIS de hex inline dans le CSS de marque. Toujours `var(--np-*)`. * (Exception assumée : les teintes RGB/CMJN du widget pédagogique * soft-proof dans noteplus-components.css — ce sont des couleurs * d'exemple, pas des couleurs de marque.) * 2. Si un composant nécessite une couleur qui n'est pas dans les tokens, * REMONTER l'ajouter ici. Pas de couleur "ad hoc". * 3. Le blanc (canvas) est la marque, comme sur charte.css. Le crème * (surface-soft/surface-card) reste réservé aux bandes de section. * 4. Le corail plein est rare sur les éléments individuels, généreux sur les * callouts pleine bande. TOUT texte sur corail passe par --primary-active * (contraste 5,4:1) — jamais --primary tout court, qui ne fait que 3,57:1 * en blanc dessus (invariant du président côté GA, cf charte.css §5). * 5. Radius 3px, jamais plus — sauf cercles véritables (--radius-full). * 6. Pour le dark mode SaaS (futur), inverser ne suffit pas — créer un * fichier `design-tokens-dark.css` qui surcharge avec un mapping pensé. * * Versionning : SemVer dans header. Breaking changes = nouvelle major. * Ce fichier ne sert QUE la vitrine (voir en-tête) : plus de notification * croisée dev-noteplus/studio requise sur un simple changement de valeur. * ═════════════════════════════════════════════════════════════════════════ */