SOS デザインシステム
アートディレクション
プレミアムで、落ち着いており、シビックで、人間中心。エディトリアルマガジンと緊急指令室が融合したようなイメージ — 警戒心をあおらず、自信に満ちていること。
推奨: 特大のエディトリアル見出し、大きなネガティブスペース、意図的な非対称性を伴う強い左揃えグリッド、時折のフルブリードセクション、控えめなシネマティック照明（セクションあたり最大1つのソフトなラジアルグラデーション）、オーバーレイにのみ控えめなガラス効果、正確なアクセントとしての緊急時レッド。
非推奨: ネオングロー、彩度の高い赤い背景、絵文字グラフィック、どこにでもある一般的なダッシュボードカード、重いドロップシャドウを伴うフローティングカード、連続回転するオブジェクト、複数の競合するグラデーション、パーティクル背景。
経験則: 赤色がビューポートの約5%以上を占める場合は、多すぎます。
カラートークン
src/app/globals.css 内の Tailwind v4 @theme で一度定義します。コンポーネントはトークンユーティリティのみを使用し（bg-ink、text-paper、text-accent）、生の16進数コードは使用しません。
| トークン | 値 | 使用用途 |
|---|---|---|
--color-ink | #101318 | プライマリダーク背景 |
--color-ink-raised | #1B2027 | ダークサーフェス、電話ベゼル、ダーク上のカード |
--color-ink-line | #2A313B | ダーク上のヘアライン/区切り線 |
--color-paper | #F5F6F7 | ライトセクション背景 |
--color-paper-line | #E1E4E8 | ライト上のヘアライン |
--color-accent | #D93642 | アクセント: CTA、キーマーク、ステータスドット |
--color-accent-strong | #B8232F | ライト背景上のアクセントテキスト（#F5F6F7 上でAA） |
--color-accent-soft | #F6E8EA | ライト上の着色背景、バッジ |
--color-text-dark | #171A20 | ライト上の本文テキスト |
--color-text-light | #F7F8FA | ダーク上の本文テキスト |
--color-muted-dark | #9AA2AD | ダーク上のミュートテキスト（#101318 上で4.5:1以上） |
--color-muted-light | #5E6672 | ライト上のミュートテキスト（#F5F6F7 上で4.5:1以上） |
コントラストに関する注意:
#858D98（指定されたミュート）は大きなテキストに対してのみダーク上で合格。本文には--color-muted-darkを使用。#D93642ボタン上の白いテキストは約4.6:1 — 16px以上セミボールドのボタンラベルでOK。変更後は必ず確認。- 明るい背景上の赤いテキストは
--color-accent-strongを使用する必要があります。 - 色だけでステータスを伝えないでください — ラベルまたはアイコンと組み合わせてください。
ステータス色（トラッキングセクションのみ）: 保留 = アンバー #C98A1B + 時計アイコン、進行中 = アクセントレッド + パルスフリードット、クリア = グリーン #2F8F5B + チェックアイコン。常にラベル付き。
タイポグラフィ
- フォント:
next/font/googleを介した1つの可変サンセリフ（推奨: 見出しに Inter Tight + 本文に Inter、または Geist 単独）。display: "swap"、サブセットlatin、最大2ファミリー。 - 見出し: ウェイト600–700、タイトなトラッキング（
-0.03emから-0.045em）、行間0.95–1.05。 - 本文: ウェイト400、行間1.6、最大幅約65ch。
- アイブラウ: 12–13px、大文字、
tracking-[0.18em]、ウェイト500、ミュートカラー、多くの場合その前に短い赤いルールが付きます。
流動的スケール（@theme に --text-* として配置）:
--text-display: clamp(3rem, 1.2rem + 7.5vw, 9rem); /* ヒーロー h1 */
--text-h2: clamp(2.25rem, 1.2rem + 4.2vw, 5.5rem);
--text-h3: clamp(1.375rem, 1rem + 1.4vw, 2.25rem);
--text-lead: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
--text-body: 1rem; /* md以上では 1.0625rem */
--text-small: 0.875rem;
--text-eyebrow: 0.8125rem;
320pxではヒーローヘッドラインがオーバーフローせずに収まる必要があります。特に "Every Second Matters." でテストしてください。
レイアウトとスペーシング
- コンテナ:
max-w-[1440px]、サイドパディングclamp(1.25rem, 4vw, 4rem)。 - lg以上で12カラムグリッド。非対称スパン（例: 7/5、5/7、offset-1）。
- セクション縦リズム: top/bottom
clamp(5rem, 10vw, 10rem)。 - スペーシングスケール: 4pxベース（Tailwindデフォルト）。6、8、12、16、24、32ステップを優先。
- 半径: 小コントロール6px、カード14px、電話フレーム外側約2.6rem。
サーフェスとセクションリズム
ダークとライトを交互に使用してチャプターを作成: ヒーロー（ダーク）→ 概要（ライト）→ 仕組み（ダーク）→ カテゴリ（ライト）→ ショーケース（ダーク、フルブリード）→ 登録（ライト）→ トラッキング（ダーク）→ 連携（ライト）→ FAQ（ライト）→ 最終CTA（ダーク、シネマティック）→ フッター（ダーク）。
照明: ダークセクションあたり最大1つの radial-gradient、低不透明度（≤ 0.18）、赤またはクールグレイの色合い。静的 — アニメーション不可。
ガラス効果: bg-white/5 + backdrop-blur-md + 1px ink-line ボーダー。ナビと小さなオーバーレイのみ。大きなぼかしパネルは使用しないでください（パフォーマンス）。
コンポーネント
- プライマリボタン: アクセント背景、明るいテキスト、最小高さ48px、水平パディング20–28px、ホバー時に2pxシフトする控えめな矢印アイコン。
- セカンダリボタン: 透明、1pxボーダー（ダーク上は
ink-line/ ライト上はpaper-line）、同じサイズ。 - ストア/ダウンロードボタンはなし — このページにはインストールCTAはありません。CLAUDE.mdの「Scope: showcase, not install funnel」を参照。
- アイブラウ: 赤の24pxルール + 大文字ラベル。
- DraftBadge: 小さなアンバーアウトラインピル「Draft — pending confirmation」。下書きコンテンツがあるセクションのみ。
- カテゴリタイル: アイコン（24px lucide、ストローク1.5）+ タイトル + 1行説明。ヘアラインボーダー、重いシャドウなし。ホバー = ボーダーカラーシフト + 2px浮上。
- 電話フレーム:
app-screenshot-showcaseスキルを参照。
アイコン
lucide-reactのみ、ストローク1.5、サイズ20/24/32。コンセプトごとに1つのアイコン。アイコンはテキストを補完し、置き換えません。
ビジュアル作業完了前のチェックリスト
- トークンのみ使用。コンポーネント内に生の16進数コードなし
- 赤の使用は控えめ。ステータスを色のみで伝えない
- 見出し階層が一目でわかる。ビューポートごとに1つの支配的な要素
- ダーク/ライトリズムが維持されている
- 新しい色の組み合わせについてコントラストを確認
- 320pxで意図した見た目になっている（単に縮小されただけではない）