これはオリジナルのペーストであり、証明のために保持されています。作業用コピーではありません。
正式なシステムは
docs/pixel-portfolio-style/にあり、 4つのリファレンスファイルとassets/base.cssが含まれています。そちらを読んでください。このファイルは、ビルドに依存する2つの追加事項よりも前に作成されました：ルール#0（システムをその場で適用し、動作していてテスト済みのアプリをスタイル適用のために書き換えない — 全面リスタイルを決定したルール）と、ルール#9および
references/rtl-and-locales.mdへのポインタです。代わりにこのコピーに従うと、両方を見逃すことになります。
ピクセルポートフォリオスタイル
完全なビジュアル＋モーションシステム。文字通りに従ってください。ここでカバーされていない場合は、より控えめで、より丸みがあり、より幾何学的なオプションを選択してください — 新しい色、新しいフォント、新しい角丸、新しいイージングカーブを決して導入しないでください。
絶対条件（毎回読むこと）
- 2フォントのみ。 ピクセルディスプレイフォントをセクションタイトル＋ヒーローワードに。幾何学的サンセリフをその他すべてに。
- アクセントカラーは1色のみ。 青
#0B8DF8。二次ボタン用に黒#111。それ以外は不可。 - すべてのセクションタイトルは、大文字のピクセルフォント＋手描きの波線SVGアンダーライン、中央揃え。
- すべてのセクションは、同じブラーアップトランジション（
references/motion.md参照）でスクロール時にリビールされます。 - 角丸はピル型または20px。 4px、8px、または鋭い角は不可（ノコギリ歯の区切りを除く）。
- ボーダーはなし。 区切りは
#F2F2F2の塗りつぶしとソフトシャドウによって行われ、1pxの線では行われません。 - 中央揃え、最大1080pxのコンテンツカラム。 余裕のある垂直リズム（セクション間120〜160px）。
- コピーは小文字を基本とし、自虐的／人間らしく、決して企業的ではありません。短い文章。
新しく何かを追加する際のワークフロー
references/design-tokens.mdを読む → CSS変数を使用し、生のhexは決して使わない。references/components.mdを読む → 追加したいものがパターンとして既に存在するか確認する（ピル、タグ、カード、セクションヘッダー、マーキー、カルーセル、フォームフィールド）。それを再利用する。2番目のカードスタイルを発明しない。references/motion.mdを読む → 標準のリビール＋ホバー動作を適用する。- 完全に新しいセクションの場合は、
references/section-recipes.mdを読み、「新セクションテンプレート」に正確に従う（スペーシング、ヘッダー、リビール、コンテナ）。 --bg/--bg-heroでセクションの背景を交互にする。隣接する2つのセクションの背景が異なる場合は、その間にノコギリ歯の区切り線を配置する（直線は決して使わない）。- セクションIDをナビのピルリンクに追加するのは、それがトップレベルの遷移先である場合のみ（ナビリンクは最大4つまで。5つ目を追加する場合は、どのリンクを削除するかユーザーに確認する）。
- 新しい画像スロットは、必要な正確なアスペクト比とともに
assets/IMAGES.mdに追加し、ユーザーが何を提供すべきか分かるようにする。
終了前のセルフチェック
- すべての新しい見出しがピクセルフォント＋波線アンダーラインを使用しているか？
- トークンリストにないhexコードはないか？削除する。
-
999px、20px、16px、14px以外の角丸はないか？修正する。 - 新しいブロックが
blur(10px) → 0とy: 30px → 0でフェードインするか？ - ホバー状態が
scale(1.03)＋シャドウリフト＋250msを使用しているか？ - モバイル：ファン／カルーセル／グリッドが
references/components.mdのモバイルルールに従って折りたたまれているか？ - セクションの垂直パディングを
clamp(80px, 10vw, 160px)に保ったか？
リファレンスファイル
| ファイル | いつ読むか |
|---|---|
references/design-tokens.md | 常に — 色、タイプスケール、スペーシング、シャドウ、フォント |
references/components.md | UI要素（ナビ、カード、タグ、フォーム、マーキー、カルーセル、区切り線）を構築するとき |
references/motion.md | アニメーション、リビール、ホバー、ページロードのコレオグラフィーすべて |
references/section-recipes.md | 真新しいセクションまたはページを追加するとき |
assets/base.css | すべてのトークン＋プリミティブが既に実装されたドロップインスタイルシート |
assets/IMAGES.md | サイトが必要とする画像とその比率 |