PRINTSTREAM — Printstream Frontend Design System

PRINTSTREAM · Printstream Frontend Design

Translate the flat graphic language of CS2's "Printstream" sticker sheet into a complete frontend design specification. Core principle: The recognizability of this aesthetic lies entirely in the patterns (dot screens, barcodes, X‑step rulers, corner marks, rainbow bands, dashed arcs), not in the background color. Changing only the background while leaving patterns unchanged yields a "light mode," not a new design.

Workflow (Follow Strictly)

1. Read the rules first — references/rules-and-antipatterns.md. 12 ironclad rules + 12 verified antipatterns (each with explanations). Skipping this step will inevitably lead to mistakes.
2. Define tokens — Read references/design-tokens.md, import assets/tokens.css into the project (or copy the variables into the existing theme). All components must consume only variables—never raw hex values (except for rainbow band definitions and device indicator colors).
3. Build the skeleton — references/components.md: Complete recipes for panels, buttons, tables, stat cards, progress bars, alerts, empty states, brand strips, and footer stamps, including all interactive states.
4. Place motifs — references/motifs.md: Parameterized generators for nine motifs. Follow the “placement” suggestions and obey the quantity discipline (e.g., one large motif per full page).
5. For images, symbols, fonts, halftoning — references/asset-library.md + assets/ (50 deduplicated motif SVGs, 10 OFL fonts, single-file demo page).
6. Validation — Run the 11‑item self‑check list at the end of rules-and-antipatterns.md.

The Three Most Important Disciplines (Remember These Even If You Forget Everything Else)

1. Borders are ink itself (#0d1117), not a light gray; all border radii are zero; the only 3D effect is a hard misregister offset (2–3px solid ink shadow). Print materials do not glow, float, or use gradient fills.
2. Color is only in the rainbow bands (three thick horizontal bars: pink #f8a8a0 → magenta #f088f0 → cyan #20e0e0). Functional indicator colors are for “readings,” not decoration, and must remain readable on paper (one shade darker than base).
3. Inverted regions use independently named --inv-* variables—never let two variables point to each other (CSS variables have no swap semantics); inversion only changes the container’s color scheme—the ok/idl/bad indicators themselves remain unchanged—readings must never lie.

Asset Inventory

Path	Purpose
assets/tokens.css	Ready to use: all design tokens + @font-face; link directly with <link>
assets/demo-printstream.html	Sample console with all nine motifs rendered; view it first to establish a visual baseline
assets/motifs/	50 deduplicated motif SVGs + manifest.json (annotated by category)
assets/fonts/	10 OFL fonts + licenses + loading instructions
references/design-tokens.md	Color / typography / shape / spacing tokens with proven ratios
references/motifs.md	Nine motif generators (the core value of this skill)
references/components.md	Component recipes and interactive states
references/rules-and-antipatterns.md	Ironclad rules + antipatterns + validation checklist
references/asset-library.md	Engineering asset map, motif database defects, ISO/GHS and halftoning usage
scripts/curate_motifs.py	Deduplication and curation of the motif database by (class, size ±3px, scale ±15%)

Execution Points

• Motifs are generated with code, not bitmap images. Fixed‑resolution tiles will break at different sizes; the traced SVGs in assets/motifs/ are for shape reference only—rewrite parameterized versions per motifs.md for production.
• Each motif has a limit: one large motif per full page; thick black bars only accompany section titles; diamond clusters only in white space. Overusing motifs = devolving into an asset pile.
• Text labels are placeholder fields: Number; / Signature; (e.g., _B42 or DESIGN BY WyHXnR;)—replaceable, not fixed graphics.
• Mobile: Below 620px, reduce height and font size; do not remove motifs; add max-width:100% to fixed‑width input fields.
• Pairing with dark themes: You can have two sets of variables for the same page (light = Printstream / dark = Shadow); switching themes changes only the palette, not the structure.
• Delivery format (HTML/CSS, React, Tailwind, Vue) is your choice—only the output format changes; token and motif disciplines remain consistent.

Scope

Suitable for tool‑oriented consoles, dashboards, audit/operations product pages, and marketing pages requiring an “industrial print” feel. Not suitable for: glassmorphism or skeuomorphic products (aesthetic conflict), or pages dominated by photography/illustration (the only way to incorporate photos into Printstream’s aesthetic is through halftoning—see asset-library.md).