ポートフォリオデザインシステム
このサイトにはデザインシステムがあります。スタイルを変更する前に、リポジトリルートの DESIGN.md を読み、それに従って作業してください。
ルール
- すべての色、フォントサイズ、スペーシングステップ、角丸、および再生時間は、
index.htmlの先頭にある:rootブロック内のCSSカスタムプロパティです。ルールではトークンを使用してください。トークンですでにカバーされている生の16進数値、ピクセルサイズ、または再生時間を記述しないでください。 - 新しい値には、
DESIGN.mdに対応する行とともに、同じ変更内で:rootに新しいトークンが必要です。 デザインシステムはClaude内にもデザインシステムアーティファクト（https://claude.ai/artifact/2iPwsVBSqA9gs8nkaYC5g1）として存在します。トークン、パターン、またはルールがここで変更された場合は、同じ作業内でそのアーティファクトのproject/tokens.jsonとproject/README.mdも更新し、3つのコピーが決してずれないようにしてください。 - テキストと背景はペアで提供されます。新しいパネルの色クラスは両方を設定します。
DESIGN.mdのAAリストに対してペアリングを確認し、プルリクエストを開く前にREADME.mdのaxeスキャンを実行してください。 - ダークモードはありません。
prefers-color-scheme: darkルールを追加しないでください。ページは意図的にcolor-scheme: lightを設定しています。 - モーションは
--easeと--dur-*トークンを使用し、prefers-reduced-motion: reduceの下で停止する必要があります。 webapp-testingスキルを使用して、390pxと1280pxの幅で、モーション軽減をオンとオフにしてテストしてください。スタイルのリファクタリングでは、前後でピクセル単位で同一のスクリーンショットが生成される必要があります。
構成要素の配置場所
- トークン:
index.html内の:root - リファレンスとパターンカタログ:
DESIGN.md - Three.jsの色:
scene.js内の16進数リテラル。手動でパレットと歩調を合わせて維持します。 - Claude内のコピー: https://claude.ai/artifact/2iPwsVBSqA9gs8nkaYC5g1（トークン、ブランドブック、コンポーネントプレビュー）