Design system

Le laiton construit et s’allume ; le vert dit allez-y : un bouton, un feu, un état validé. Tout le reste qui brille est du laiton. Les rapports de contraste sont calculés au build, sur le fond de la page.

Trois matières, pas une de plus : le laiton brossé pour la structure, la laque noire pour les surfaces, le verre pour ce qui s’allume. Le tube est du laiton allumé, l’écran est du verre allumé : la lumière n’est pas une matière, c’est ce qui sort des trois. Un ornement ne mélange pas deux matières.

Chaque page a une source lumineuse unique, le feu ou un écran : la section la pose (--light-x, --light-y) et .dp-halo en tire trois couches de halo blanc chaud, jamais vert. Une révélation se fait par la lumière, pas par le flou : .dp-lit-in part lisible (--reveal-from) et monte d’un cran ; .dp-sweep fait passer une barre de luminance une fois, au pointeur fin. Les quatre temps d’arrivée d’une page, --t-light, --t-title, --t-object et --t-cta, s’enchaînent en moins d’une demi-seconde.

Le socle commun, trois formes et quatre matières. La plaque à gradins contient (carte, citation, encadré, média) : un calque de laiton biseauté détouré en gradins, puis la laque, détourée en retrait. La plaque gravée (lot 30) encadre une fiche : la laque, un filet de laiton, l’étiquette en machine à cheval sur le filet — ni rivet ni bandeau plein, le laiton plein est réservé aux objets (le feu, les boutons, les gradins) ; elle remplace les réglettes rivetées du pied de page, du formulaire, des conseils, des bassins et de la plaque d’étage. Le corps streamline (ailette à gauche, nez arrondi à droite) se touche en une ligne : tag, badge, chip, champ. Le tube néon dit un état et ne s’allume que pour cela. Survolez les plaques : le reflet du laiton suit le pointeur, et sur les variantes à comète une impulsion parcourt l’arête.

La casse d’un imprimeur parisien de 1930, devenu 2026 : l’affiche (Bodoni Moda, le Didot) pour les titres en casse de phrase et le mot colossal en capitales, jamais sous 28 pixels ni en paragraphe ; la voix (Jost, le Futura) pour tout ce qui parle et se lit, et en capitales très espacées pour les sur-titres, les menus et les boutons ; la machine (Courier Prime, la machine à écrire de la rédaction) pour ce qui se compte : folios, index, numéros, téléphone, plaques. Trois familles, pas une de plus ; chacune imprime ses défauts de casse (un caractère décalé d’un rien, selon ses voisins).

Échelle de 0,25 à 6 rem. Les écarts entre blocs prennent 5 à 7, jamais une valeur intermédiaire.

Presque tout est à angle droit : l’Art déco est fait de gradins, pas de courbes. Seule exception : la gélule du bouton et des pastilles.

L’ombre pose, la lueur signale. Une lueur néon n’apparaît qu’au survol, au focus ou sur un état actif.

Survolez ou mettez le focus sur une ligne. Deux courbes nommées (lancer, freiner) ; en mouvement réduit, les durées tombent à zéro et seul l’état final reste. La typographie cinétique (lot 20, les presses) : .dp-compose et .dp-compose--view avec Compose (composer et encrer les titres), .dp-repere et data-text (le repérage des mots colossaux), .dp-emboss (le gaufrage, lumière au pointeur), data-rotative (la rotative des bandeaux).

.ma-carte {
  padding: var(--dp-space-5);
  border: var(--dp-border-gold-soft);
  box-shadow: var(--dp-shadow-1);
  transition: box-shadow var(--dp-dur) var(--dp-ease);
}

Le bouton d’appel piéton du feu, devenu l’appel principal du site (lot 27) : un disque de laiton, boîtier de laque et lunette, un anneau de verre vert (le seul vert du bouton : « allez-y ») et le bouton de laiton au centre, qui s’enfonce à la pression par crans. Le libellé reste « Parlons de votre projet » ; la sous-ligne dit le délai. Le verre s’allume à l’arrivée (bégaiement, aligné sur le feu dans le hero), respire au pointeur fin tant que le bouton est à l’écran, et s’allume en plein sous la main ; sur l’accueil, la main dessus met le feu 3D au vert. Un seul par écran : le hero (deux temps), la finale, l’en-tête (sm, muet), la barre tactile (sm).

<CallButton href="/contact/" sub="réponse sous 48 h ouvrées" magnetic cursor="Feu vert" data-cta="hero">Parlons de votre projet</CallButton>
<CallButton href="/contact/" size="sm" data-cta="header">Parlons-en</CallButton>

La plaque Streamline, pour les actions secondaires depuis le lot 27 : voir, comparer, appeler, envoyer (le formulaire). La plaque laiton garde son canal de verre vert et reste l’appel principal des pages intérieures (guichet, fiches de cas, services) tant que le bouton d’appel n’y est pas posé ; la plaque fantôme accompagne, jamais seule. Le canal s’anime au survol et au focus ; un spot blanc chaud suit le pointeur sur la face, le reflet brossé s’oriente, la plaque s’enfonce à la pression.

<Button href="/realisations/" variant="ghost">Voir les réalisations</Button>
<Button type="submit" cursor="Envoyer">Envoyer ma demande</Button>

Un filet coloré à gauche, jamais une couleur de fond : le vert dit « reçu », le rouge dit « à corriger », le clair informe. Toujours avec un texte, la couleur ne porte pas seule le sens.

Un chiffre fourni par le client ou vérifiable, avec son unité et sa légende. Jamais de chiffre non sourcé : voir les règles d’usage.

Les champs nus du socle : une étiquette liée, une hauteur d’au moins 44 px, un état d’erreur porté par aria-invalid avec un message en texte. Le formulaire de contact les habille en console (ci-dessous).

L’interrupteur à levier : une vraie case à cocher habillée d’un levier de laiton sur son socle ; la tige bascule par crans, la lampe s’allume blanc chaud. Pour une option qui change la suite du formulaire (le rappel par téléphone), jamais pour une liste de cases.

La console de contact (lot 9) : un pupitre de laque bordé de laiton, chaque champ derrière une fenêtre de verre en retrait avec sa plaque gravée et son voyant (vert quand le champ est bon), l’interrupteur du rappel, et le feu en 3D qui se tourne vers vous champ après champ : tourné au repos, de face et vert quand on peut envoyer, éteint pendant l’envoi. Tout fonctionne sans JavaScript (:has) ; le script n’ajoute que l’envoi en place. Un seul par site, sur /contact/.

La carte d’offre. Cadre laiton, laque en retrait, soleil gravé qui bouge à contresens du pointeur : tout le fond est peint dans un seul SVG, derrière le laiton. Trois par rangée au plus.

---
const service = (await getEntry('services', 'motion-design-video'))!;
---
<ServiceCard service={service} index={0} />

La palette qui devient enseigne : une tuile de laque fendue en son milieu, cerclée de laiton, à deux faces. La voix (le public gravé, la phrase d’un client entre guillemets, un voyant blanc chaud) et l’enseigne (le service en capitales de laiton, la flèche, un tube qui s’allume au passage ou au focus). À plat (Services, Secteurs, mouvement réduit), les deux faces sont empilées. Le lien est l’enseigne : son nom accessible est le service. Depuis le lot 28, le hero de l’accueil raconte les voix et les portes autrement (VoiceLine, DoorLine, ci-dessous) ; la palette vit à plat.

Une voix au feu rouge (lot 28) : le public en machine, la phrase du client en Jost italique, un voyant blanc chaud. Trois états lus dans --story-p : elle attend (en retrait), elle parle (pleine, voyant allumé), elle a été entendue (à demi). Une seule parle à la fois : c’est un dialogue entendu au feu rouge, pas une liste ; une citation lue, jamais un lien. Ici, à plat : toutes parlent.

Une porte de l’autre côté (lot 28) : le service en affiche, une flèche, un filet gravé et, dessus, un tube de laiton qui s’allume quand le récit passe le seuil de la porte, au survol et au focus. C’est le lien : son nom accessible est le service. Les quatre portes répondent aux quatre voix, dans le même ordre, et entrent l’une après l’autre.

La carte de preuve : une réalisation cliente. Sans visuel livrable, l’affiche est composée (soleil levant, chiffre clé) plutôt qu’illustrée par une image d’emprunt.

La carte de voix : une recommandation publique, fidèle à l’original, avec son auteur, son poste et sa date. Pas de note chiffrée, pas de balisage d’avis.

La surface générique à bordure ornementale, pour un bloc de contenu sans rôle éditorial. --gold relève la surface, --neon passe la bordure au laiton allumé.

L’emblème d’un service : un médaillon à rayons. La pièce s’allume en laiton au survol, ou en permanence avec active pour l’élément courant.

Variante panel : le contenu seul, sous l’arche.

L’arche : sommet arqué, double filet, épaulements étagés. Pour un portrait ou une image verticale ; la variante panel encadre du texte.

<ArchFrame image={photo} alt="Le lecteur de brochures en 3D" />
<OrnateFrame tone="neon" weight="tight"><p>Contenu</p></OrnateFrame>

Le cadre signature : celui du design system d’origine, tracés repris à l’identique. Un par page, pour l’image qui compte.

La plaque gravée (.dp-plaque, lot 30 ; réglette rivetée jusque-là) : la laque, un filet de laiton, l’étiquette en machine à cheval sur le filet. Le cadre commun des colonnes latérales (coordonnées du contact, « Où me trouver », livrables d’un service, engagements de la méthode) et des liens « plus » (Services, Réalisations) ; en lien, le filet s’allume d’un tube. Remplace OrnateFrame partout où le contenu est une fiche ; OrnateFrame reste pour la bible.

La bordure ornementale à angles, pour un encadré de texte. Trois épaisseurs, deux matières.

Quatre angles en gradins autour d’un contenu court : un chiffre, une citation, un mot.

L’angle droit Deco Punk, tiré du dessin de Jérôme : trois barres emboîtées coupées en biseau et un carré dans le coin. Il cadre une ouverture comme une affiche (finale du feu vert ; en-tête d’une page intérieure seulement s’il n’a pas de fil d’Ariane : le mât de la locomotive tient alors l’angle). Laiton biseauté, deux tubes allumés au défilement, lentille de laque avec un losange allumé. Toujours décoratif, toujours dans les marges, jamais sur le texte.

Le soleil levant : le fond d’une ouverture ou d’une affiche. Trois origines, deux matières. Toujours derrière le contenu, jamais devant.

Les séparateurs : un losange pour une pause, des chevrons pour une direction, l’éventail pour une tête de section. Ils se tracent à l’entrée dans l’écran.

Les lignes de vitesse des locomotives : elles ne suivent que ce qui bouge ou ce qui est lancé (un titre qui entre, un bouton). Jamais en décoration fixe.

Frise frontale 2D intégrée au footer : Avesnes, Fourmies, Trélon, La Capelle, Buire et Parfondeval. Le coupé Streamline séparé par Jérôme roule en boucle de 32 secondes, avec roues synchronisées et suspension discrète. Sources Illustrator : src/assets/svg/frise-avesnois-thierache-2d.svg (1800 × 350) et src/assets/svg/voiture.svg. Les exports restent intacts ; l’ancienne voiture fixe est retirée uniquement du rendu. Jusqu’à 700 px, le trajet continue de la première rangée à la seconde. Commande pause/reprise au clavier, pause hors écran ou onglet masqué. Voiture immobile sans JavaScript, en mouvement réduit ou économie de données.

Le feu dessiné, version légère (SVG), pour un état dans une interface dense. Pour l’état d’une page entière, préférer Signal3D.

Le feu en laiton : trois images rendues une fois dans Blender, des lueurs en CSS, aucun moteur 3D. Rouge tant qu’il manque quelque chose, vert quand on peut y aller. Sans JavaScript ou en mouvement réduit : directement vert.

<Signal3D state="rouge" height="260px" />   <!-- il manque quelque chose -->
<Signal3D state="vert" height="260px" />    <!-- tout est prêt -->
<Signal3D state="view" height="260px" />    <!-- rouge, puis vert à l'entrée dans l'écran -->

Le feu qui tourne : treize poses rendues une fois dans Blender (la caméra fait un quart de tour de chaque côté de la vue de face du site, la pose 6), posées côte à côte dans une feuille ; les poses passent par crans, les halos suivent. Au défilement dans la finale (GreenLight), ou piloté par --pose dans la console de contact. Sur l’accueil, depuis le lot 17, le feu est une scène Three.js en temps réel (src/scripts/hero3d.ts) et le hero un récit au défilement (src/scripts/hero-story.ts, 280 svh, 380 au téléphone, scène épinglée) en cinq temps : l’arrivée (rouge), au feu rouge (les quatre voix, une à la fois ; le passant les écoute), le feu vert (« Passez. » ; il soulève son chapeau vers le feu), la traversée (il traverse la rue vers le visiteur au rythme du défilement, le pictogramme de la lentille marche avec lui), de l’autre côté (« Par où commencer ? », les quatre portes, le bouton ; il vous salue). Le passant (lots 38-41) est le personnage-signal du kit, en 3D temps réel. La pose fixe de Signal3DHero reste la première image et le repli (téléphones anciens, mouvement réduit, sans JavaScript).

Le marcheur du logo : quelques kilo-octets de pièces animées en CSS, à la place d’un lecteur d’animation. Il marche au rythme de la lecture.

Le personnage-signal du brand system v1.6.0 : le marcheur du logo en volume, vert phosphore. Pose fixe de quelques kilo-octets, puis un atlas par geste (moins de 250 Ko) chargé à l’approche et joué une fois sur un canvas. Gestes aux droits sûrs seulement. Rare : le guichet, la 404, la page merci ; jamais sur fond clair ; dans la scène du feu de l'accueil, c'est le passant en 3D (src/scripts/character3d/passant.ts). Image fixe en mouvement réduit.

Le personnage-signal en temps réel (lot 35), sur la page du service 3D seulement : une conversation captée (MocapOnline « Conversations 2 », environ une minute), calculée par le navigateur (src/scripts/character3d/ : peau à six influences, CRT du kit, bloom serré, sol laqué). Console en laiton : prise, position du mouvement, pause, Recommencer, angle de vue (ou glisser). Monté au premier geste, à l’approche ; téléphones et machines modestes : extrait précalculé de 22 s lu une fois, puis « Voir en 3D temps réel » ; mouvement réduit : l’affiche Blender ci-contre. Une prise ne boucle jamais ; changer de prise coupe net (la lumière garde sa phase). Ici en affiche seulement (pas de WebGL sur cette page).

L’affiche composée, utilisée quand un cas n’a pas de visuel livrable : soleil levant, nom du client, mention.

Quatre compositions, pour qu’aucune section ne ressemble à sa voisine : axis (symétrique), split (asymétrique, numéral gravé), bare (moment nu), marquee (le titre défile). On n’enchaîne jamais deux fois la même.

<SectionHeading variant="split" numeral={2}
  eyebrow="Méthode" title="Du premier appel à la livraison"
  lead="Quatre étapes, un seul interlocuteur." id="h-methode" />

Le fil d’Ariane, sur toute page de second niveau et au-delà : la locomotive decov4 vue de profil (le mât à deux filets, la caisse au nez arrondi qui porte le chemin, deux rails qui filent à l’entrée dans l’écran). Il alimente aussi les données structurées de la page.

Le tiroir de classeur : une façade de laque cernée de laiton, l’étiquette sur un carton crème, la question gravée, une poignée-coquille. On tire (<details> natif : clavier, lecteur d’écran et recherche dans la page fonctionnent sans JavaScript) : la façade avance, la poignée s’allume, la fiche en carton crème se dresse avec la réponse. Empilés, les tiroirs forment un classeur (Objections, Faq).

Des questions franches, avec des réponses courtes : un classeur de tiroirs (Drawer). Le JSON-LD FAQPage est émis par la page avec les mêmes items.

Les quatre règles de conception d’un outil : simple, efficace, lisible, adopté. Chaque plaque porte une mini-démonstration dont l’élément néon est ce que la règle met en avant, allumé au survol et au focus.

La méthode en étapes numérotées en chiffres romains, alimentée par data/method.ts. detailed ajoute le détail de chaque étape.

Une chronologie courte : jalons faits en néon, à venir en laiton.

Un hologramme en vidéo légère sur socle de laque et de laiton, avec une image fixe de repli. La vidéo se lance à l’entrée dans l’écran et reste cliquable en pause.

La pellicule (lot 9) : les étapes d’un projet comme les photogrammes d’une bande de film, perforations de laiton continues, chaque image derrière un biseau de laiton avec son numéro gravé. Les images sont projetées : sombres hors de l’écran, pleine lumière par paliers quand la bande entre, balayées une fois par la lanterne au pointeur fin. Rail à jauge sous 700 px.

La gazette (lot 10) : les conseils comme des feuilles de journal épinglées sous des pinces de laiton, légèrement de travers ; manchette à filet double, numéro et date, titre en Jost, chapeau. À l’entrée la feuille descend de sa pince par crans ; au survol ou au clavier elle se soulève et la pince s’allume. Pour la liste des conseils, jamais pour des cartes de service.

Juillet 2023 Aujourd’hui Part de la nouvelle version affichée

Avant, après

Faites glisser le rideau : à gauche juillet 2023, à droite aujourd’hui.

La visionneuse (lot 9) : les deux captures derrière le verre d’un écran Deco, un rideau de laiton que l’on tire (souris, doigt, clavier : flèches), une poignée gravée, deux plaques dont celle du côté le plus visible s’allume. À l’entrée dans l’écran, le rideau se tire tout seul de la droite au milieu, par crans. Pour une refonte, jamais pour un simple changement de couleur.

Accueil

Appartements

L’écran de la salle des machines : une lunette de laiton à gradins, un verre bombé (reflet, phosphore, balayage) et, derrière, une vraie capture. Il s’allume comme un tube cathodique quand il entre à l’écran. Toute capture d’interface du site vit dans un DecoScreen ; sa lumière est blanc chaud, jamais verte.

Site internet

Deux adresses sur la Côte d’Émeraude

Un site réalisé pour un client de Saint-Malo, pour présenter ses locations de charme à Saint-Malo et Dinard et guider les visiteurs vers leur prochain séjour.

• Saint-Malo et Dinard
• Découvrir les appartements
• Préparer son séjour

Lire le cas

Site internet

Accueil et appartements

Un outil en service, sur ses écrans : un moniteur Deco (source de lumière de la section) et une tablette en retrait, avec les vraies captures de la fiche. Pour une réalisation logicielle livrée, jamais pour une maquette.

1. I Logiciels et solutions sur mesure Un outil qui ressemble à votre métier, pas l’inverse. →
2. II Conseil IA et informatique Choisir juste avant de dépenser. →
3. III Site internet et référencement Mettre en ligne, puis faire venir les gens. →
4. IV Pilotage de projet multimédia Un planning, un devis, un seul interlocuteur. →
5. V IA générative et formation Utiliser l’IA sans prendre de risque. →
6. VI Identité visuelle et PAO Concevoir ce qui doit être imprimé juste du premier coup. →
7. VII Motion design et vidéo Faire tenir un message en trente secondes. →
8. VIII 3D, hologramme et temps réel Montrer ce qui n’existe pas encore. →

La tour des services de l’accueil (lot 59) : un gratte-ciel Art déco de huit étages, un par service, huit étages pour une seule adresse. La couronne à arches en soleil levant, redessinée par Jérôme (lot 61) : le passant en ombre chinoise cernée de laiton, ailé, marche sur la corniche, le fanal sur le chapeau ; deux projecteurs ; entre deux piliers cannelés, chaque étage porte son numéral, l’emblème du service, son nom et sa promesse dans une baie vitrée ; le hall et son portail en bas. Les baies s’allument une à une au défilement ; la main sur un étage fait passer son voyant et le fanal au vert. Styles chargés après coup (sous la ligne de flottaison).

Le tableau d’affichage à palettes d’une gare : voie, destination, en clair, lentille « à l’heure ». Chaque ligne est un lien ; la destination claque lettre à lettre quand la ligne entre à l’écran, ligne après ligne. Le texte reste entier dans le DOM ; statique au tactile et en mouvement réduit.

Le cadre d’un média qui n’est pas un écran : une fenêtre de laiton, plaque à gradins du socle, dont le contenu est détouré par les mêmes gradins. InSitu et LogoJourney l’emploient (depuis les lots 9 et 10, les étapes d’un cas sont une FilmStrip, l’avant/après et la carte de la zone sont des écrans). Jamais pour une capture d’interface : c’est le rôle de DecoScreen.

Le bouton lecture / pause unique du site (WCAG 2.2.2), en losange de laiton. Le même sur VideoCase, InSitu, HoloStage et le défilé des références. Au survol et au focus l’arête passe au tube néon.

Le marqueur compact d’une étape : losange de laiton, numéral ou lentille. Line et FlapBoard l’emploient (lentilles) ; les étapes de ProcessSteps et de Story portent désormais une plaque de station (StationSign, ci-dessous). Le laiton allumé dit « franchi » ou « abouti » ; le vert est réservé aux boutons, aux feux et aux états validés.

La plaque de station : une lampe sur le rail, un bras de laiton, une plaque de laque cernée de laiton aux angles en gradins, le numéral en lettres d’affiche. La lampe s’allume en laiton quand la station est franchie (défilement, CSS pur). ProcessSteps et Story l’emploient, posée sur leur rail.

Le cadran d’étage d’un ascenseur (lot 11) : un demi-cadran de laiton biseauté, des graduations, un numéral par étage ; l’aiguille part de la gauche et rejoint l’étage par crans, puis la lampe s’allume. En tête des pages de secteur (PageHero scene="secteur", floor), avec la plaque gravée de l’étage.

Le tableau des départs : chaque lettre défile dans l’alphabet avant de se poser sur la bonne. Zéro JavaScript, texte intact dans le DOM (les lettres qui défilent sont du contenu généré). Pour un mot-clé, un libellé de service ; jamais pour un paragraphe. Avec tile, chaque caractère est une vraie palette.

Le compteur à rouleaux : les chiffres montent à leur valeur quand le nombre entre à l’écran (CSS pur), les unités plus tard que les dizaines. La valeur finale est dans le HTML. Pour un chiffre réel, déjà publié.

Tubes Nixie en verre à double paroi : reflets, supports de cathodes, chiffres en fil lumineux ivoire à halo ambre et douilles en laiton fileté. Aucun maillage sur le verre. Le comptage suit l’entrée dans l’écran ; la valeur finale reste lisible sans JavaScript et en mouvement réduit. Le nombre est annoncé une seule fois, les filaments sont décoratifs. Réservé aux chiffres clés réels (KpiRow nixie).

La traverse de la voie : notre coupé Streamline avance sur un rail de laiton au rythme du défilement, accompagné d’une trace lumineuse. À la place d’un séparateur muet, deux fois par page au plus.

Le guichet : cadre horizontal à gradins, laiton biseauté, laque et arc lumineux. Le personnage-signal de la marque (SignalCharacter) partage le cadre avec le texte et les boutons ; sur mobile il passe dessous. Il soulève son chapeau quand le guichet entre à l’écran, puis présente le bouton d’appel quand la main ou le focus s’en approche ; image fixe en mouvement réduit. Le bouton de contact allume le feu et l’arc en vert. Dernier appel des pages de contenu ; l’accueil conserve sa finale GreenLight.

La rangée de repères chiffrés, alimentée par data/kpis.ts. Aucune métrique non validée n’est publiée. Trois rendus : les plaques gravées (ci-dessous), la prop paper (chiffres imprimés dans une colonne Pullman sur papier crème) et la prop nixie (accueil : la console de la salle des machines, un tube par chiffre, plaques gravées pour les légendes).

Le défilé des logos clients, en PNG monochromes teintés laiton, alimenté par data/clients.ts. Il s’arrête au survol et en mouvement réduit.

La table lumineuse (lot 10) : la carte stylisée de la zone derrière le verre d’un écran Deco (source de lumière de la section), trois anneaux de temps de trajet autour de Fourmies, communes placées sur la carte, et un balayage radar blanc chaud qui tourne par crans au pointeur fin.

Le panneau haut et étroit, à double filet. Sur papier : cadre en encre, hachures claires qui s’effacent vers le bas, pied en damier ou en gradins. Sur page noire (on=dark) : cadre, hachures et damier en laiton. Le contenu se centre ; sans label, il est décoratif.

<PanelTall stars={3} label="Panneau à hachures" />
<PanelTall on="dark" foot="stairs" />

La colonne Pullman : marque en lettrage d’affiche, capitales géométriques très espacées avec leur « et » en minuscules, chiffre d’affiche, signature en capitales larges et fines, petits chevrons entre les groupes. Les couleurs sont héritées : elle tient sur noir comme sur crème. Seule la ville est affichée tant que la rue n’est pas renseignée.

<BrandColumn mark="Motion Drive" kicker="le feu vert pour vos projets"
  title="Logiciels" title2="conseil en IA"
  lines={['conçus sur mesure', 'par un seul interlocuteur']}
  figure={{ value: '25', suffix: 'ans', note: 'de métier, depuis 2001' }}
  seller="Jérôme Baube" address />

Huit classes, en CSS pur (gradients et masques SVG en data-URI), environ 1 Ko compressé. Les couleurs viennent de currentColor ou de variables : --c, --ck-a, --ck-b pour le damier, --hc et --hp pour les hachures, --fr pour le cadre.

<div class="dp-checker" style="--c:9px; --ck-a:#b68933; --ck-b:var(--panel)"></div>
<div class="dp-hatch" style="--hc:rgba(244,238,219,.4)">…</div>
<i class="dp-chevrons"></i>   <span class="dp-stars"></span>
<section class="dp-paper">…</section>

L’épreuve : une feuille sortie de la presse, entre deux bandes en gradins. Papier vergé, traits de coupe aux coins de la page, mires de repérage dans les marges, folio et colophon en machine, gamme de contrôle à l’encre noire et bronze (jamais de vert). Les jetons de texte y sont retournés en encre (le texte courant à l’encre douce), les plaques noires gardent les leurs ; les titres reçoivent le foulage.

<PaperScene labelledby="h-exemple" folio="Épreuve 1 / 2 · Spécimen">
  <h2 class="dp-h2" id="h-exemple">Titre</h2>
  <p class="dp-body">Texte en encre sur crème.</p>
</PaperScene>

Sur fond noir, trois matières pour que deux sections voisines ne se ressemblent pas : la laque (par défaut), les hachures de laiton à 3,5 % et le rideau cannelé à 4 %. Le motif est un calque sous le contenu, fondu en haut et en bas ; il ne verdit jamais le fond.

<section class="dp-section dp-section--hatch">…</section>
<section class="dp-section dp-section--curtain">…</section>