--- name: Marginalia version: "1.0" theme: editorial-light kit: stacklift/marginalia axis: typographic-revelation colors: ink: "#15161A" ink-soft: "#3a3c44" ink-faint: "#8b8d96" paper: "#FBFAF7" paper-edge: "#efece4" klein: "#002FA7" klein-deep: "#00237d" cream: "#FBFAF7" cream-soft: "#c3ccea" fonts: display: "Playfair Display" body: "Source Sans 3" spacing: "1": "4px" "2": "8px" "3": "16px" "4": "24px" "5": "40px" "6": "64px" "7": "96px" "8": "144px" radius: sm: "2px" md: "6px" full: "9999px" type-scale: xs: "0.75rem" sm: "0.9rem" base: "1.0625rem" lg: "1.35rem" xl: "1.9rem" 2xl: "2.75rem" 3xl: "4rem" hero: "clamp(2.8rem, 8vw, 6.5rem)" full-kit: "https://www.stacklift.design/kit/marginalia" --- # Marginalia — Design System ## §1 Identité Marginalia est l'esthétique d'un journal d'art où l'encre arrive à mesure qu'on lit. Fond papier chaud (`--paper`), encre off-black (`--ink`), un seul accent : le bleu Klein (`--klein`). L'axe de rupture est la révélation typographique — l'emphase n'est pas imprimée d'avance, elle se trace au scroll, une phrase à la fois, comme un lecteur qui souligne. Pas de fond sombre. Pas de second accent. Pas de parallaxe. Le geste est unique et tout le reste se tient en repos autour de lui. ## §2 Rôles couleurs `--paper` est le fond universel des sections de lecture. `--ink` est le texte dominant ; `--ink-soft` le corps secondaire ; `--ink-faint` les méta et légendes. `--klein` est le seul accent de l'interface : c'est l'encre du marqueur sur papier, la couleur des liens et des numéros de sommaire, et le fond plein des sections « dispatch ». Sur ces sections bleues, le texte passe en `--cream` et le marqueur s'inverse (crème tracé sur le bleu, mot qui redevient `--klein`). Les œuvres de la galerie sont exemptées de la charte : elles gardent leurs propres couleurs, encadrées d'une réserve de papier. ## §3 Typographie Playfair Display (`--font-display`) pour tous les titres : serif éditorial à fort contraste, `font-weight` 700–800, `line-height` 1.04, `letter-spacing` -0.01em. L'italique 500 sert les citations et les titres d'œuvres (cartels). Source Sans 3 (`--font-body`) pour le corps : poids 300 pour le lede, 400 pour le texte courant, `line-height` 1.7. Pattern eyebrow : Source Sans 3, `--text-xs`, `letter-spacing` 0.22em, uppercase, couleur `--ink-faint`. ## §4 Composants - **Surlignage révélé (`.mark`)** : le composant signature. Englober une phrase dans `` à l'intérieur d'un titre. Deux `IntersectionObserver` rendent le geste **réversible** : le marqueur se trace quand la ligne se pose dans le viewport (seuil 0.9, background-image cloné, `box-decoration-break:clone` pour gérer le retour à la ligne) et se **retire** quand la ligne en sort, pour se re-tracer au scroll back. Un hystérésis (seuil haut pour allumer, ~0 pour éteindre) évite tout clignotement au bord. Sur `--klein` le marqueur s'inverse en crème. Respecte `prefers-reduced-motion` (état révélé instantané, sans observer). - **Modale éditoriale (`.work`)** : cliquer une œuvre ouvre une modale plein écran sur fond papier — œuvre en grand, cartel complet, puis un essai critique « On the work ». Navigation précédent/suivant (boutons + flèches clavier ← →), compteur `NN / 10`, désactivée aux extrémités, fermeture par bouton ou Échap, focus restauré à la fermeture. Le geste de surlignage ne vit PAS dans la modale (zone de repos de lecture). Chaque `figure.art` porte `data-index` et `data-essay`. - **Boutons** : variant fill (fond `--klein`, texte `--cream`) ou ghost (bordure `--klein`, texte `--klein`). Radius `--radius-md`. Liens inertes : classe `.is-soon` (opacité réduite, non cliquable). - **Cartel (légende de galerie)** : titre d'œuvre en Playfair italic, nom d'artiste en Source Sans 600, année et technique en `--ink-faint` uppercase. C'est le cartel qui transforme une image colorée en œuvre exposée. - **Pastilles** : pastille noire (`--ink` / `--paper`) pour ` · 0 · dependencies`, pastille signal (`--klein` / `--cream`) avec la flèche `↧` pour signaler la révélation au scroll. - **Sommaire éditorial (nav)** : numéros `01`–`04` en `--klein`, soulignement animé au survol. Discret et fonctionnel — jamais un second geste spectaculaire. ## §5 Layout Container max-width 1120px (`.wrap`), padding horizontal `--space-5` (40px). Colonne de lecture limitée à 680px (`.read`) pour le confort. Sections : padding vertical `--space-8` (144px) sur desktop. Galerie en grille 2 colonnes avec décalage vertical en quinconce (`nth-child(even)` descendu de `--space-7`) pour casser la rigidité — jamais une grille de murs égaux. Alternance de sections papier et de sections plein bleu Klein (rythme de lecture, pas effet animé). Breakpoint responsive : 880px (grille en une colonne, sommaire replié dans un bouton « Index »). ## §6 Instructions agent 1. Utilise `--paper` comme fond de lecture, `--klein` comme unique accent. Jamais de second accent dans l'interface. Jamais `#000000` (utilise `--ink`). Jamais `#ffffff` pur (utilise `--paper`). 2. Le surlignage `.mark` est réservé aux titres et intertitres — jamais sur le corps de texte (contraste insuffisant en petit corps). Une à deux occurrences par titre maximum. 3. Titres : Playfair Display, `line-height` 1.04, `letter-spacing` -0.01em. Toujours. 4. Corps : `--ink-soft` pour les paragraphes, `--ink` pour l'emphase. Sur sections klein : `--cream-soft` pour le corps, `--cream` pour l'emphase. 5. Les œuvres gardent leurs couleurs ; encadre-les d'une réserve `--paper` avec bordure `--paper-edge` et un cartel dessous. Ne jamais teinter une œuvre à la charte. 6. Espacements : variables `--space-*`, jamais de valeurs codées en dur. 7. Eyebrow avant chaque titre de section : `.eyebrow`, `--text-xs`, `letter-spacing` 0.22em, uppercase, `--ink-faint`. 8. Le geste de révélation est réversible : il se trace à l'entrée et se retire à la sortie du viewport, via deux observers avec hystérésis (pas de clignotement). Respecte toujours `prefers-reduced-motion` (état révélé fixe). Le surlignage ne vit jamais dans la modale éditoriale. > 💡 **Full implementation available** — This `design.md` ships with a complete, self-contained HTML/CSS/JS kit: editorial demo, reversible scroll-drawn highlight engine, polychrome gallery with cartels and a click-through editorial modal (artwork + criticism, prev/next navigation), and the in-page design system. Zero dependencies (Google Fonts only). > → [www.stacklift.design/kit/marginalia](https://www.stacklift.design/kit/marginalia)