ui-craft-minimal

UI Craft — Minimal

あらかじめ決められたミニマルスタイル：エディトリアルで洗練された、Linear／Notion／Vercel のようなデザインです。余白を構成の要とします。アクセントは1色、細い境界線を使い、動きはほとんど加えません。

Knobs (locked)

• CRAFT_LEVEL = 8 — ミニマルな美しさは、精密に仕上げてこそ実現します。Polish Pass は必須です。
• MOTION_INTENSITY = 3 — ホバーとモーダルの表示／終了のみです。スクロール時の表示、ページ遷移、スタッガーは使いません。
• VISUAL_DENSITY = 2 — 余白を多く取り、1行あたりの項目数は1〜2個にして、ゆったりとしたガターを設けます。

これらについて Discovery で再確認しないでください。曖昧な場合は、アクセントカラーとフォントの確認に進んでください。

スタイルの基準

• 白またはほぼ白のキャンバスに、黒またはほぼ黒の文字を配置します。モノクロームにアクセントカラーを1色だけ加えます。
• 本文には Inter／Geist を使用します。ディスプレイフォントは使いません。
• セクションの上下パディングは120〜200px、ガターは40〜80pxにします。
• 影の代わりに細い境界線 1px solid oklch(92% 0.005 250) を使います。
• 階層はタイポグラフィで表現します。装飾的なグラデーション、パターン、ガラス表現は使いません。
• ヒーローは1カラムを基本とします。レイアウト上の仕掛けではなく、補助要素を1つ使って非対称性を表現します。
• 動きは句読点のように使い、見せ場にはしません。
• すべてのピクセルに意図を持たせます。迷ったら削ります。

基本ルール（継承）

../ui-craft/SKILL.md のすべてのルールが適用されます。このファイルではノブのデフォルト値を上書きし、以下にスタイル固有のガイダンスを追加します。アンチスロップとクラフトのテストも引き続きすべて適用されます。

スタイル固有の上書き

タイポグラフィ

• 本文：Inter または Geist、ウェイト400。UI の強調には500を使います。本文では600／700を使いません。
• フォールバックのフォントスタックには system-ui, -apple-system を使います。
• 見出し：24pxを超える場合は tracking-tight ／ -0.02em を適用し、ウェイトは最大でも500または600にします。
• 見出しには text-wrap: balance、段落には text-wrap: pretty を指定します。
• ディスプレイ用セリフ体は使いません。幾何学的なディスプレイ用サンセリフ体も使いません。サンセリフ体のファミリーを2種類混在させません。

色

• サーフェス：oklch(99% 0 0)（ライト）／oklch(14% 0.005 250)（ダーク）。
• テキスト：oklch(18% 0.01 250) をプライマリ、oklch(46% 0.01 250) をセカンダリにします。
• アクセントはプライマリ CTA、アクティブなナビ項目、主要な指標1つに限って使います。それだけです。
• 境界線：oklch(92% 0.005 250)（ライト）／oklch(24% 0.008 250)（ダーク）。色付きの境界線は使いません。

間隔とレイアウト

• セクションの上下方向：py-24 md:py-32 lg:py-40（96／128／160px）以上にします。大画面のヒーローでは200pxにします。
• コンテナー：通常は max-w-5xl、読み物コンテンツには max-w-3xl を使います。
• 1つのビューポートにつき、アクセントの配置は1か所が望ましく、最大でも2か所にします。
• デスクトップでは、3カラムを超えるカードグリッドは使いません。

境界線とエレベーション

• デフォルトのクロームには、影を使わず1pxの細い境界線を使います。
• エレベーションはフローティング UI（メニュー、トースト、モーダル）に限って使います。レイヤーを重ねず、柔らかなアンビエントシャドウを1つだけ使います。
• 角丸：入力欄は6px、カードは8px、モーダルは12pxにします。スケールの幅は狭く保ちます。

動き

• 許可：ホバー（不透明度／境界線の色、120〜150ms）、モーダルとダイアログの表示／終了（180〜220ms ease-out）、フォーカスリング。
• この強度では禁止：スクロールをトリガーとする表示、スタッガー、ページ遷移、パララックス、カーソルへの磁石効果、登場時の演出。
• すべてのアニメーションで prefers-reduced-motion を尊重する必要があります。

構成

• ヒーロー：見出しは左揃えまたは中央揃えにし、補助要素を1つだけ配置します（ソーシャルプルーフの文、スクリーンショット、単一のチップ）。フローティングバッジ、オーブ、ブロブは使いません。
• 特長：実際のビジュアルを1つずつ添えた行を積み重ねます。魅力的に見えても、均一な3列のアイコングリッドは使いません。
• ナビゲーション：テキストのみのリンクを使います。現在の状態はアクセントの下線、またはウェイト500で示します。ピル型の背景は使いません。

最初に読むリファレンスファイル

読む対象は絞り、../ui-craft/references/ から以下のファイルだけを読み込んでください。

• layout.md — 間隔、階層、構成
• typography.md — スケール、読みやすさ、ウェイト
• color.md — モノクロームのスケール、OKLCH、ダークモード
• accessibility.md — フォーカス、コントラスト、キーボード

明示的に関連する場合を除き、dashboard.md、stack.md、sound.md は読み飛ばしてください。

このスタイルで避けるべきアンチパターン

• アクセントカラーを複数使うこと。アクセントカラーは1色だけにします。
• ディスプレイ用セリフ体、幾何学的なディスプレイ用サンセリフ体、または2種類のサンセリフ体を組み合わせること。
• 装飾的なグラデーション、メッシュ背景、ノイズのオーバーレイ、ガラス風パネル。
• スクロールをトリガーにした表示、段階的な表示、ページ遷移。「控えめ」なものも避けます。
• アイコン、見出し、テキストを均一に3列で並べた機能グリッド。
• アフォーダンスとして色付きの影やグローを使うこと。
• 密度の高いレイアウト。密度がちょうどよく感じられるなら、このバリアントは適切ではありません。ui-craft-dense-dashboard に切り替えてください。
• ナビゲーションリンクやボタンに、デフォルトでピル型の背景を付けること。テキストと下線を優先します。
• デスクトップでセクションのパディングを96px未満にすること。