Design system — « Atelier tamponné »

Le design system officiel de Papers Empire, choisi le 2026-07-17. Toute évolution visuelle (CSS, assets, images générées) doit respecter ce document.

Concept

Le décor reste la nuit de l'atelier : ciel crépusculaire violet, diorama three.js, wordmark letterpress — intouchables. Tout ce qui se manipule devient un objet de papeterie physique : fiches bristol crème opaques, boutons-tampons épais qui s'écrasent au clic, étiquettes kraft, listings perforés, visas « APPROUVÉ ». La parodie vient de la bureaucratie matérielle prise au sérieux.

Tokens

La source de vérité est la couche :root de assets/css/style.css (primitives historiques + couche sémantique + surcharges « Atelier tamponné »). Ne jamais coder une couleur en dur dans un composant : consommer les tokens.

Palette de référence :

Rôle	Token	Valeur
Bristol (faces des fiches)	`--paper-bright`	`#fdf8ec`
Papier ombré (plis, trames)	`--paper-shade`	`#eee3c9`
Kraft (étiquettes, onglets)	`--kraft`	`#d9c29a`
Encre principale	`--ink-strong`	`#33261a`
Encre diluée	`--ink-soft`	`#6b5b45`
Rouge tampon	`--stamp-red`	`#b3251e`
Or (monnaie, premium)	`--accent`	`#fbbf24`
Nuit de l'atelier	`--bg-sky` / `--bg-deep`	`#271c40` / `#0b0617`

Règles clés :

Pas d'emoji dans le chrome d'action et de structure (boutons, footer, navigation, titres de colonnes, jauges, hauts faits) : l'iconographie y passe par les stickers, tampons et SVG encrés générés (images-todo.md). Exception : les surfaces de données — les compteurs du panneau de stats et le tableau de bord (titre + tuiles KPI) gardent leurs emojis, qui y apportent de la lisibilité ludique sans casser la hiérarchie. Les emojis dynamiques des événements sont tolérés en attendant leurs illustrations.
Le kraft est un accent, jamais un fond de contrôle : liserés (--kraft-deep), bordures, étiquettes. Les contrôles secondaires (onglets, navigation) vivent en --paper-shade ; seuls les boutons d'ACTION portent les couleurs fortes (or, vert, indigo, rouge).
Les boutons sont GROS et assumés : socle 3D en box-shadow dur, écrasement au :active par translateY qui consomme la tranche. Jamais de bouton plat.
Ombres toujours en 2 couches : tranche dure sans flou + portée douce.
Chiffres et KPIs en chasse fixe (--font-mono), façon dactylographie.
Motion : max 5 animations infinies simultanées, prefers-reduced-motion respecté.
Contrastes AA minimum (encre/bristol ≈ 12,8:1) ; focus ring adapté au fond clair.
Modes pref-high-contrast et pref-large-text toujours fonctionnels.

Génération d'images — LE prompt-maître

Toute image générée pour le jeu (bâtiments, hauts faits, headers, textures, compétences futures) DOIT composer avec ce prompt-maître pour garder la cohérence. Structure : [PROMPT-MAÎTRE] + [description spécifique de l'asset].

Papers Empire art style: vintage bureaucratic stationery aesthetic for a
satirical printing-factory idle game. Cream ivory cardstock (#fdf8ec) and warm
kraft paper (#d9c29a) surfaces, dark sepia ink (#33261a) linework,
administrative rubber-stamp red (#b3251e) accents, amber gold (#fbbf24)
highlights used sparingly. When a background or environment is needed, a
dusk-purple print-works night (#271c40 to #0b0617). Flat 2D scanned-paper
look, subtle cotton fiber grain, slightly distressed rubber-stamp edges,
clean simple shapes, soft even lighting, no photorealism, no gloss, no neon.
Strictly no letters, no words, no numbers in the image.

Contraintes non négociables :

Jamais de texte dans les images (l'i18n 4 langues passe par le HTML).
La palette ci-dessus, rien d'autre (pas de bleus/verts saturés hors tokens).
Fond transparent pour tout ce qui se pose sur une fiche ou le ciel ; fond nuit violette uniquement pour les headers/key art.
Style « objet scanné à plat » pour les éléments d'UI ; le rendu 3D lowpoly est réservé à la scène three.js (et au key art qui la met en scène).
Formats : WebP pour les opaques, PNG pour les transparents ; tailles en puissances de 2 quand c'est une tuile.

La liste des assets à générer vit dans images-todo.md.

Stickers de bâtiments vs 3D (décision 2026-07-18)

Les 11 stickers de bâtiments restent les illustrations dessinées à la main (caractère, personnalité) : décision de Nicolas. La cohérence avec le diorama three.js passe par la palette partagée (crème/sépia/or, cf. 0.18.2), pas par une identité pixel-à-pixel. Un pipeline de régénération existe (rendu isométrique par bâtiment → API OpenAI edits) et fonctionne, mais n'est PAS utilisé — ne pas remplacer les stickers dessinés sans nouvelle décision.

Zones gelées

Wordmark letterpress .header-title (pile de text-shadows violets).
Scène three.js et ses recettes de bâtiments lowpoly.
Overrides .sky-dawn/.sky-day/.sky-night et scrims figés.
Bloc .pref-high-contrast (stylé à part, jamais routé par les tokens).