印花集 · PRINTSTREAM 前端设计

Que fait 印花集 · PRINTSTREAM 前端设计 ?

Version française du design system « PRINTSTREAM » – une charte graphique inspirée des stickers de CS2, prête à être implémentée en code front-end.

Principe fondamental : la reconnaissance de ce style repose entièrement sur les motifs (points, code-barres, échelle en X, coins, bande arc-en-ciel, arcs pointillés), pas sur la couleur de fond. Changer uniquement le fond sans toucher aux motifs = obtenir un « mode clair », pas un nouveau design.

Workflow (à suivre dans l'ordre)

1. Lire les règles avant d'écrire – references/rules-and-antipatterns.md. 12 lois + 12 anti-patterns validés (avec explications). Ignorer cette étape garantit des pièges.
2. Définir les tokens – Lire references/design-tokens.md, importer assets/tokens.css dans le projet (ou recopier les variables dans le thème existant). Tous les composants utilisent uniquement les variables, jamais de hex brut (sauf exceptions pour la bande arc-en-ciel et la couleur de veilleuse).
3. Construire la structure – references/components.md : recettes complètes pour panneaux, boutons, tableaux, cartes de statistiques, barres de progression, alertes, état vide, bande de marque, tampon de pied de page, avec tous les états interactifs.
4. Appliquer les motifs – references/motifs.md : générateurs paramétriques des neuf motifs, placement selon les recommandations (limitation stricte : un grand motif par page, etc.).
5. Pour images, symboles, polices, tramage – references/asset-library.md + assets/ (50 SVG de motifs dédoublonnés, 10 polices OFL, page d'exemple unique).
6. Validation – rules-and-antipatterns.md en fin de document : 11 points d'auto-vérification, à passer un par un.

Trois règles les plus importantes (à retenir même si tout est oublié)

1. Les bordures sont l'encre elle-même (#0d1117), pas un gris clair ; les angles arrondis sont toujours à zéro ; la seule « 3D » est le décalage dur de 2 à 3 px de l'ombre d'encre pleine. Les impressions ne brillent pas, ne flottent pas, n'ont pas de dégradés.
2. Les couleurs n'apparaissent que dans la bande arc-en-ciel (rose #f8a8a0 → magenta #f088f0 → cyan #20e0e0 : trois larges bandes horizontales). Les couleurs fonctionnelles (ok/idl/bad) sont des « lectures », pas de la décoration, et doivent rester lisibles sur fond papier (une nuance plus foncée).
3. Les zones inversées utilisent des variables --inv-* nommées indépendamment, jamais deux variables ne se renvoient l'une à l'autre (les variables CSS n'ont pas de sémantique d'échange). L'inversion ne change que la couleur du conteneur, le jugement ok/idl/bad reste inchangé – la lecture ne doit pas mentir.

Inventaire des ressources

Chemin	Usage
assets/tokens.css	Prêt à l'emploi : tous les tokens de design + @font-face, à lier directement via <link>
assets/demo-printstream.html	Page d'exemple avec les neuf motifs déployés, à consulter en premier pour établir une référence visuelle
assets/motifs/	50 SVG de motifs dédoublonnés + manifest.json (classés par type)
assets/fonts/	10 polices OFL + licences + instructions de chargement
references/design-tokens.md	Tokens de couleur, typographie, forme, espacement + ratios mesurés
references/motifs.md	Générateurs des neuf motifs (cœur du skill)
references/components.md	Recettes de composants et états interactifs
references/rules-and-antipatterns.md	Lois + anti-patterns + liste de validation
references/asset-library.md	Carte des ressources, défauts des motifs, usage ISO/GHS et tramage
scripts/curate_motifs.py	Script de dédoublonnage des motifs par (type, taille ± 3 px, échelle ± 15%)

Points d'exécution

• Les motifs sont générés par code, pas collés en bitmap. Les SVG de assets/motifs/ sont des références de formes ; en production, réécrire la version paramétrique selon motifs.md.
• Chaque motif est limité : un grand motif par page ; la bande noire épaisse uniquement sur les titres de sections ; les losanges uniquement dans les zones vides. Tout saturer = reculer vers un empilage de ressources.
• Les textes de marquage sont des emplacements : Numéro; / Signature; (ex. _B42, DESIGN BY WyHXnR;), remplaçables, pas des formes fixes.
• Mobile : en dessous de 620 px, réduire la hauteur et la taille de police, ne pas supprimer les motifs ; les champs de saisie à largeur fixe doivent avoir max-width:100%.
• Couplage avec thème sombre : on peut implémenter deux ensembles de variables dans la même page (clair = Printstream / sombre = Ombre), en changeant uniquement les couleurs, la structure reste identique.
• Format de livraison (HTML/CSS, React, Tailwind, Vue) au choix – changer le format sans changer le langage, les tokens et les règles des motifs restent cohérents.

Périmètre

Convient aux consoles d'outils, dashboards, pages de produits d'audit/maintenance, ainsi qu'aux pages marketing à l'esthétique industrielle imprimée. Ne convient pas : aux interfaces vitrées/glassmorphiques (conflit de langage), aux pages centrées sur la photographie ou l'illustration (le seul moyen pour le Printstream d'intégrer des photos est le tramage, voir asset-library.md).