印花集 · PRINTSTREAM フロントエンドデザイン
CS2「印花集」ステッカーコレクションの平面美術言語を、フロントエンドコードに落とし込むための完全な設計システム。 中核認識：このデザイン言語の識別度はすべてパターン（網点、バーコード、X段差、角標、虹帯、破線アーク）にあり、背景色にはありません。背景色だけ変えてパターンを変えない＝「ライトモード」になるだけで、デザインシステムとして成立しません。
ワークフロー（厳守順序）
- 鉄則を読んでから実装 ——
references/rules-and-antipatterns.md。 12の鉄則 + 12の検証済みアンチパターン（すべてに「なぜダメか」の説明付き）。これをスキップすると必ず問題が発生します。 - トークンを定義 ——
references/design-tokens.mdを読み、assets/tokens.cssをプロジェクトに導入（または既存テーマに変数をコピー）。すべてのコンポーネントは変数のみ使用し、生のhex値は書きません（虹帯定義とデバイスライトカラーの2つの例外を除く）。 - 骨組みを構築 ——
references/components.md：パネル/ボタン/テーブル/統計カード/プログレスバー/アラート/空状態/ブランドバー/フッター印章の完全レシピ、各インタラクション状態付き。 - モチーフを配置 ——
references/motifs.md：9つのモチーフのパラメトリックジェネレーター。各モチーフの「配置推奨」に従い、使用制限を遵守（大モチーフは全ページに1つだけなど）。 - テクスチャ/シンボル/フォント/網点化 ——
references/asset-library.md+assets/（50の重複除去モチーフSVG、10のOFLフォント、シングルファイルデモページ）。 - 検収 ——
rules-and-antipatterns.md末尾の11項目チェックリストを順に確認。
最も重要な3つのルール（他は忘れてもこれを覚える）
- 境界線は墨そのもの（#0d1117）、薄い灰色ではない；コーナーラウンドはすべてゼロ；唯一の「立体感」はオフセットしたハードエッジ（2～3pxの実線墨シャドウ）。印刷物は光らず、浮かび上がらず、グラデーション塗りもしません。
- 色彩は虹帯のみ（ピンク #f8a8a0 → マゼンタ #f088f0 → シアン #20e0e0 の3本の太い横線）。機能的三状態色（OK/IDL/BAD）は「読み取り値」であり装飾ではありません。紙面で読みやすくなければならず（一段階濃くする）。
- 反転ゾーンは独立命名の --inv- 変数を使用し、変数を互いに参照させてはいけません*（CSS変数には交換セマンティクスがありません）；反転はコンテナの配色のみを変更し、ok/idl/bad判定テキストは1文字も変えてはいけません——読み取り値に嘘をつかない。
アセット一覧
| パス | 用途 |
|---|---|
assets/tokens.css | すぐに使える：すべてのデザイントークン + @font-face、<link>で直接読み込み |
assets/demo-printstream.html | 9モチーフをすべて配置したリファレンスコンソール。まずこれを見て視覚的ベースラインを確立 |
assets/motifs/ | 50の重複除去モチーフSVG + manifest.json（カテゴリ別） |
assets/fonts/ | 10のOFLフォント + ライセンス + 読み込み説明 |
references/design-tokens.md | カラー/フォント/形状/スペーシングトークンと実測比率 |
references/motifs.md | 9大モチーフジェネレーター（本スキルの中核的価値） |
references/components.md | コンポーネントレシピとインタラクション状態 |
references/rules-and-antipatterns.md | 鉄則 + アンチパターン + チェックリスト |
references/asset-library.md | エンジニアリングマテリアルマップ、モチーフセットの欠陥、ISO/GHSと網点化の使い方 |
scripts/curate_motifs.py | モチーフセットを（カテゴリ、サイズ±3px、寸法±15%）で重複除去 |
実行のポイント
- モチーフはコードで生成し、ビットマップは使いません。固定解像度の画像は別のサイズで見劣りします。
assets/motifs/のSVGは形状リファレンスとしてのみ使用し、本番ではmotifs.mdに従ってパラメトリック版を書き直してください。 - 各モチーフの使用制限：大モチーフは全ページに1つだけ；太黒帯はセクションタイトルにのみ；ドット菱形クラスターは空白領域にのみ。使いすぎると素材の寄せ集めに退化します。
- テキストラベルはスロットテキスト：
番号;/署名;（例：_B42、DESIGN BY WyHXnR;）、置換可能、固定グラフィックではありません。 - モバイル対応：<620pxでは高さとフォントサイズを縮め、モチーフは削除しない；固定幅入力ボックスには
max-width:100%を設定。 - ダークテーマとのペアリング：リファレンスに従い、同一ページで2セットの変数（ライト=Printstream / ダーク=Shadow）を実装可能。テーマ変更は値だけ変え、構造は変えません。
- デリバリー形式（HTML/CSS、React、Tailwind、Vue）は自由選択 — 出力形式は変わっても言語は同じ、トークンとモチーフのルールは統一されます。
適用範囲
ツール系コンソール、ダッシュボード、監査・運用系プロダクトページ、および「工業印刷感」が必要なマーケティングページに最適。不適合：グラデーショングラスモーフィズム製品（デザイン言語が競合）、写真やイラストがメインビジュアルのページ（Printstreamで写真を取り込む唯一の方法は網点化、詳細は asset-library.md）。