design-check

name	design-check
description	実装をデザインハンドオフ（docs/design/）と照合し、色・タイポ・余白・シャドウ等の乖離を洗い出す。「デザイン確認」「デザインと合ってる？」「design check」と言われたら使う。

デザイン照合チェック

実装がハンドオフに忠実かを確認し、乖離を重要度順にリスト化する。

1. 原本を読む:
   • docs/design/design-spec.md — トークン定義・意匠ルール・セクション構成
   • docs/design/kepler-landing.html — LP の具体的な数値（サイズ・色・余白・アニメーション）
2. 実装側の対応箇所を読む（src/styles/global.css のトークン定義、対象コンポーネント）。
3. 以下の観点で突き合わせる:
   • 色: navy/orange 系トークンの Hex 一致。第3の色相が混入していないか
   • タイポ: Space Grotesk / Manrope、スケール（Hero 72px・H2 44px・H3 22px・body 17px・caption 13px）
   • 意匠: ハードオフセットシャドウ（6px 6px 0、ぼかし禁止）、カードの ±1.5° 回転と hover で直立、 ピルボタン（radius 999px）、カード radius 14–20px、ステッカー形状のドリフトアニメーション
   • アクセシビリティ: orange テキストは大サイズか navy 上のみ、フォーカスリング（orange 2px）、 ヒット領域 44px 以上
4. 「Orbit」表記が「Kepler」に差し替わっているか全文 grep する（軌道マーク自体は流用で OK）。
5. 乖離を「原本の値 → 実装の値 → 該当ファイル:行」の形式で重要度順に報告する。 修正はユーザーの指示を待つ。

補足

• 目視比較が必要なとき（レイアウト崩れの疑い等）は、ユーザーに dev サーバーの起動を依頼し、 ブラウザ MCP でスクリーンショットを取って原本 HTML と見比べる。