admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
314 lines
26 KiB
Markdown
314 lines
26 KiB
Markdown
# Vercelにインスパイアされたデザインシステム
|
||
|
||
> Category: 開発者ツール
|
||
> フロントエンドデプロイメント。白と黒の精密さ、Geistフォント。
|
||
|
||
## 1. ビジュアルテーマと雰囲気
|
||
|
||
Vercelのウェブサイトは、見えないインフラへと昇華された開発者向けデザインの視覚的な論文だ――哲学に近いほど抑制されたデザインシステム。ページは圧倒的に白（`#ffffff`）で、ほぼ黒（`#171717`）のテキストが配置され、ギャラリーのような空白の中でひとつひとつの要素がピクセルを正当化している。これは装飾としてのミニマリズムではなく、エンジニアリング原則としてのミニマリズムだ。Geistデザインシステムはインターフェースをコンパイラがコードを扱うように処理する――不必要なトークンはすべて除去され、構造だけが残る。
|
||
|
||
カスタムGeistフォントファミリーは王冠の宝石だ。Geist Sansはディスプレイサイズで積極的なネガティブレタースペーシング（-2.4pxから-2.88px）を使用し、圧縮された・切迫した・エンジニアリングされた感覚の見出しを生み出す――本番環境向けにminifyされたコードのように。ボディサイズではトラッキングが緩むが、幾何学的な精密さは持続する。Geist Monoは、コード・ターミナル出力・技術的なラベルのためのモノスペースの相棒としてシステムを完成させる。両フォントはOpenType `"liga"`（リガチャ）をグローバルで有効にし、精読するほど報われるタイポグラフィの洗練さを加えている。
|
||
|
||
Vercelを他のモノクロームデザインシステムと差別化するのが、ボーダーとしてのシャドウという哲学だ。従来のCSSボーダーの代わりに、Vercelは `box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08)` を使用する――オフセットゼロ・ブラーゼロ・1pxスプレッドのシャドウで、ボックスモデルへの影響なしにボーダーのような線を作り出す。このテクニックにより、ボーダーはシャドウレイヤーに存在でき、よりスムーズなトランジション・クリッピングなしの角丸・従来のボーダーより繊細な視覚的ウェイトを実現する。深度システム全体が、各レイヤーが特定の目的を持つ多値シャドウスタックで構築されている：ひとつはボーダーのため、ひとつは柔らかな浮き上がりのため、ひとつはアンビエントの深度のため。
|
||
|
||
**主な特徴：**
|
||
- Geist Sansのディスプレイサイズでの極端なネガティブレタースペーシング（-2.4pxから-2.88px）――圧縮されたインフラとしてのテキスト
|
||
- コードと技術的ラベルにOpenType `"liga"`をグローバルで使用したGeist Mono
|
||
- ボーダーとしてのシャドウテクニック：`box-shadow 0px 0px 0px 1px` が全体で従来のボーダーを置き換える
|
||
- 繊細な深度のための多層シャドウスタック（単一の宣言でボーダー＋浮き上がり＋アンビエント）
|
||
- `#171717` テキストのほぼ純白のキャンバス――真の黒ではなく、マイクロコントラストの柔らかさを生む
|
||
- ワークフロー固有のアクセントカラー：Ship Red（`#ff5b4f`）、Preview Pink（`#de1d8d`）、Develop Blue（`#0a72ef`）
|
||
- アクセシビリティのための `hsla(212, 100%, 48%, 1)` を使用したフォーカスリングシステム――彩度の高いブルー
|
||
- ステータスインジケーターのための淡色背景のピルバッジ（9999px）
|
||
|
||
## 2. カラーパレットと役割
|
||
|
||
### プライマリ
|
||
- **Vercel Black** (`#171717`): プライマリテキスト、見出し、ダークサーフェスの背景。純粋な黒ではない――わずかな温かみが harsh さを防ぐ。
|
||
- **Pure White** (`#ffffff`): ページ背景、カードサーフェス、ダーク上のボタンテキスト。
|
||
- **True Black** (`#000000`): セカンダリ用途、`--geist-console-text-color-default`、特定のコンソール/コードコンテキストで使用。
|
||
|
||
### ワークフローアクセントカラー
|
||
- **Ship Red** (`#ff5b4f`): `--ship-text`、「本番環境へのシップ」ワークフローステップ――温かみのある緊迫感のあるコーラルレッド。
|
||
- **Preview Pink** (`#de1d8d`): `--preview-text`、プレビューデプロイメントワークフロー――鮮やかなマゼンタピンク。
|
||
- **Develop Blue** (`#0a72ef`): `--develop-text`、開発ワークフロー――明るく集中したブルー。
|
||
|
||
### コンソール/コードカラー
|
||
- **Console Blue** (`#0070f3`): `--geist-console-text-color-blue`、シンタックスハイライトのブルー。
|
||
- **Console Purple** (`#7928ca`): `--geist-console-text-color-purple`、シンタックスハイライトのパープル。
|
||
- **Console Pink** (`#eb367f`): `--geist-console-text-color-pink`、シンタックスハイライトのピンク。
|
||
|
||
### インタラクティブ
|
||
- **Link Blue** (`#0072f5`): アンダーライン装飾付きのプライマリリンクカラー。
|
||
- **Focus Blue** (`hsla(212, 100%, 48%, 1)`): `--ds-focus-color`、インタラクティブ要素のフォーカスリング。
|
||
- **Ring Blue** (`rgba(147, 197, 253, 0.5)`): `--tw-ring-color`、Tailwindリングユーティリティ。
|
||
|
||
### ニュートラルスケール
|
||
- **Gray 900** (`#171717`): プライマリテキスト、見出し、ナビテキスト。
|
||
- **Gray 600** (`#4d4d4d`): セカンダリテキスト、説明文。
|
||
- **Gray 500** (`#666666`): ターシャリテキスト、ミュートリンク。
|
||
- **Gray 400** (`#808080`): プレースホルダーテキスト、無効状態。
|
||
- **Gray 100** (`#ebebeb`): ボーダー、カードアウトライン、ディバイダー。
|
||
- **Gray 50** (`#fafafa`): 繊細なサーフェスのティント、インナーシャドウのハイライト。
|
||
|
||
### サーフェスとオーバーレイ
|
||
- **Overlay Backdrop** (`hsla(0, 0%, 98%, 1)`): `--ds-overlay-backdrop-color`、モーダル/ダイアログの背景。
|
||
- **Selection Text** (`hsla(0, 0%, 95%, 1)`): `--geist-selection-text-color`、テキスト選択のハイライト。
|
||
- **Badge Blue Bg** (`#ebf5ff`): ピルバッジの背景、淡いブルーのサーフェス。
|
||
- **Badge Blue Text** (`#0068d6`): ピルバッジのテキスト、読みやすさのための濃いブルー。
|
||
|
||
### シャドウと深度
|
||
- **Border Shadow** (`rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`): シグネチャ――従来のボーダーを置き換える。
|
||
- **Subtle Elevation** (`rgba(0, 0, 0, 0.04) 0px 2px 2px`): カードの最小限の浮き上がり。
|
||
- **Card Stack** (`rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, rgba(0,0,0,0.04) 0px 8px 8px -8px, #fafafa 0px 0px 0px 1px`): 完全な多層カードシャドウ。
|
||
- **Ring Border** (`rgb(235, 235, 235) 0px 0px 0px 1px`): タブと画像のためのライトグレーのリングボーダー。
|
||
|
||
## 3. タイポグラフィのルール
|
||
|
||
### フォントファミリー
|
||
- **プライマリ**: `Geist`、フォールバック: `Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol`
|
||
- **モノスペース**: `Geist Mono`、フォールバック: `ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New`
|
||
- **OpenType機能**: `"liga"` はすべてのGeistテキストでグローバルに有効；特定のキャプションでは表形数字のために `"tnum"`。
|
||
|
||
### 階層
|
||
|
||
| 役割 | フォント | サイズ | ウェイト | 行の高さ | レタースペーシング | 注記 |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| Display Hero | Geist | 48px (3.00rem) | 600 | 1.00–1.17（タイト） | -2.4px から -2.88px | 最大圧縮、ビルボードインパクト |
|
||
| Section Heading | Geist | 40px (2.50rem) | 600 | 1.20（タイト） | -2.4px | フィーチャーセクションのタイトル |
|
||
| Sub-heading Large | Geist | 32px (2.00rem) | 600 | 1.25（タイト） | -1.28px | カード見出し、サブセクション |
|
||
| Sub-heading | Geist | 32px (2.00rem) | 400 | 1.50 | -1.28px | 軽めのサブ見出し |
|
||
| Card Title | Geist | 24px (1.50rem) | 600 | 1.33 | -0.96px | フィーチャーカード |
|
||
| Card Title Light | Geist | 24px (1.50rem) | 500 | 1.33 | -0.96px | セカンダリカード見出し |
|
||
| Body Large | Geist | 20px (1.25rem) | 400 | 1.80（ゆったり） | normal | イントロダクション、フィーチャー説明 |
|
||
| Body | Geist | 18px (1.13rem) | 400 | 1.56 | normal | 標準的な読み物テキスト |
|
||
| Body Small | Geist | 16px (1.00rem) | 400 | 1.50 | normal | 標準UIテキスト |
|
||
| Body Medium | Geist | 16px (1.00rem) | 500 | 1.50 | normal | ナビゲーション、強調テキスト |
|
||
| Body Semibold | Geist | 16px (1.00rem) | 600 | 1.50 | -0.32px | 強いラベル、アクティブ状態 |
|
||
| Button / Link | Geist | 14px (0.88rem) | 500 | 1.43 | normal | ボタン、リンク、キャプション |
|
||
| Button Small | Geist | 14px (0.88rem) | 400 | 1.00（タイト） | normal | コンパクトなボタン |
|
||
| Caption | Geist | 12px (0.75rem) | 400–500 | 1.33 | normal | メタデータ、タグ |
|
||
| Mono Body | Geist Mono | 16px (1.00rem) | 400 | 1.50 | normal | コードブロック |
|
||
| Mono Caption | Geist Mono | 13px (0.81rem) | 500 | 1.54 | normal | コードラベル |
|
||
| Mono Small | Geist Mono | 12px (0.75rem) | 500 | 1.00（タイト） | normal | `text-transform: uppercase`、技術的なラベル |
|
||
| Micro Badge | Geist | 7px (0.44rem) | 700 | 1.00（タイト） | normal | `text-transform: uppercase`、極小バッジ |
|
||
|
||
### 原則
|
||
- **アイデンティティとしての圧縮**: Geist Sansのディスプレイサイズでは-2.4pxから-2.88pxのレタースペーシングを使用――主要なデザインシステムの中で最も積極的なネガティブトラッキング。これにより、本番環境向けに最適化されたコードのように_minified_されたテキストが生まれる。トラッキングはサイズが小さくなるにつれ段階的に緩む：32pxで-1.28px、24pxで-0.96px、16pxで-0.32px、14pxで通常。
|
||
- **あらゆる場所でリガチャ**: すべてのGeistテキスト要素でOpenType `"liga"` を有効にする。リガチャは装飾ではなく構造的なもの――より密で効率的なグリフの組み合わせを作る。
|
||
- **3つのウェイト、厳格な役割**: 400（本文/読み物）、500（UI/インタラクティブ）、600（見出し/強調）。極小のマイクロバッジを除いてボールド（700）なし。この狭いウェイト範囲が、ウェイトではなくサイズとトラッキングで階層を作る。
|
||
- **アイデンティティのためのMono**: 大文字に `"tnum"` または `"liga"` を加えたGeist Monoが「開発者コンソール」の声として機能する――マーケティングサイトをプロダクトと結びつけるコンパクトな技術的ラベル。
|
||
|
||
## 4. コンポーネントスタイリング
|
||
|
||
### ボタン
|
||
|
||
**プライマリホワイト（シャドウボーダー）**
|
||
- 背景: `#ffffff`
|
||
- テキスト: `#171717`
|
||
- パディング: 0px 6px（最小――コンテンツドリブンの幅）
|
||
- 角丸: 6px（わずかな丸み）
|
||
- シャドウ: `rgb(235, 235, 235) 0px 0px 0px 1px`（リングボーダー）
|
||
- ホバー: 背景が `var(--ds-gray-1000)`（ダーク）にシフト
|
||
- フォーカス: `2px solid var(--ds-focus-color)` のアウトライン + `var(--ds-focus-ring)` シャドウ
|
||
- 用途: 標準的なセカンダリボタン
|
||
|
||
**プライマリダーク（Geistシステムから推定）**
|
||
- 背景: `#171717`
|
||
- テキスト: `#ffffff`
|
||
- パディング: 8px 16px
|
||
- 角丸: 6px
|
||
- 用途: プライマリCTA（「Start Deploying」、「Get Started」）
|
||
|
||
**ピルボタン/バッジ**
|
||
- 背景: `#ebf5ff`（淡いブルー）
|
||
- テキスト: `#0068d6`
|
||
- パディング: 0px 10px
|
||
- 角丸: 9999px（完全なピル）
|
||
- フォント: 12px ウェイト500
|
||
- 用途: ステータスバッジ、タグ、フィーチャーラベル
|
||
|
||
**ラージピル（ナビゲーション）**
|
||
- 背景: 透明または `#171717`
|
||
- 角丸: 64px–100px
|
||
- 用途: タブナビゲーション、セクションセレクター
|
||
|
||
### カードとコンテナ
|
||
- 背景: `#ffffff`
|
||
- ボーダー: シャドウ経由――`rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`
|
||
- 角丸: 8px（標準）、12px（フィーチャード/画像カード）
|
||
- シャドウスタック: `rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px`
|
||
- 画像カード: `1px solid #ebebeb` と上側12pxの角丸
|
||
- ホバー: 繊細なシャドウの強調
|
||
|
||
### 入力とフォーム
|
||
- ラジオ: フォーカス時に `var(--ds-gray-200)` 背景の標準スタイリング
|
||
- フォーカスシャドウ: `1px 0 0 0 var(--ds-gray-alpha-600)`
|
||
- フォーカスアウトライン: `2px solid var(--ds-focus-color)` ――一貫したブルーのフォーカスリング
|
||
- ボーダー: 従来のボーダーではなくシャドウテクニック経由
|
||
|
||
### ナビゲーション
|
||
- 白の上のクリーンな水平ナビゲーション、スティッキー
|
||
- Vercelロゴタイプ左揃え、262x52px
|
||
- リンク: Geist 14px ウェイト500、`#171717` テキスト
|
||
- アクティブ: ウェイト600またはアンダーライン
|
||
- CTA: ダークピルボタン（「Start Deploying」、「Contact Sales」）
|
||
- モバイル: ハンバーガーメニューに折りたたむ
|
||
- 多階層メニューを持つプロダクトドロップダウン
|
||
|
||
### 画像処理
|
||
- `1px solid #ebebeb` ボーダーのあるプロダクトスクリーンショット
|
||
- 上側角丸の画像: `12px 12px 0px 0px` の角丸
|
||
- ダッシュボード/コードプレビューのスクリーンショットがフィーチャーセクションを支配
|
||
- ヒーロー画像の後ろにソフトなグラデーション背景（パステルのマルチカラー）
|
||
|
||
### 特徴的なコンポーネント
|
||
|
||
**ワークフローパイプライン**
|
||
- 三ステップの水平パイプライン：Develop → Preview → Ship
|
||
- 各ステップに固有のアクセントカラー：ブルー → ピンク → レッド
|
||
- 線/矢印でつながれる
|
||
- Vercelのコアバリュープロポジションのビジュアルメタファー
|
||
|
||
**トラストバー/ロゴグリッド**
|
||
- 企業ロゴ（Perplexity、ChatGPT、Cursor等）をグレースケールで
|
||
- 水平スクロールまたはグリッドレイアウト
|
||
- `#ebebeb` の繊細なボーダー分離
|
||
|
||
**メトリクスカード**
|
||
- 大きな数値表示（例：「10x faster」）
|
||
- メトリクスにGeist 48px ウェイト600
|
||
- 下にグレーの本文テキストで説明
|
||
- シャドウボーダーのカードコンテナ
|
||
|
||
## 5. レイアウトの原則
|
||
|
||
### スペーシングシステム
|
||
- 基本単位: 8px
|
||
- スケール: 1px、2px、3px、4px、5px、6px、8px、10px、12px、14px、16px、32px、36px、40px
|
||
- 注目のギャップ: 16pxから32pxへのジャンプ――プライマリスケールに20pxや24pxなし
|
||
|
||
### グリッドとコンテナ
|
||
- 最大コンテンツ幅: 約1200px
|
||
- ヒーロー: 余裕のある上部パディングを持つ中央揃えのシングルカラム
|
||
- フィーチャーセクション: カードの2–3カラムグリッド
|
||
- `border-bottom: 1px solid #171717` を使用したフルワイドディバイダー
|
||
- コード/ダッシュボードのスクリーンショットはフルワイドまたはボーダー付きのコンテナ内
|
||
|
||
### ホワイトスペースの哲学
|
||
- **ギャラリーの空白**: セクション間の大きな垂直パディング（80px–120px以上）。ホワイトスペース自体がデザインだ――Vercelには証明するものも隠すものもないことを伝える。
|
||
- **圧縮されたテキスト、広げられたスペース**: 見出しの積極的なネガティブレタースペーシングは、周囲の余裕あるホワイトスペースで相殺される。テキストは密で、周囲のスペースは広大だ。
|
||
- **セクションのリズム**: 白いセクションが白いセクションと交互に並ぶ――セクション間に色の変化はない。分離はボーダー（シャドウボーダー）とスペーシングのみで表現される。
|
||
|
||
### ボーダー半径スケール
|
||
- マイクロ（2px）: インラインコードスニペット、小さなスパン
|
||
- 繊細（4px）: 小さなコンテナ
|
||
- 標準（6px）: ボタン、リンク、機能的要素
|
||
- 快適（8px）: カード、リストアイテム
|
||
- 画像（12px）: フィーチャードカード、画像コンテナ（上側角丸）
|
||
- ラージ（64px）: タブナビゲーションのピル
|
||
- XL（100px）: 大きなナビゲーションリンク
|
||
- フルピル（9999px）: バッジ、ステータスピル、タグ
|
||
- サークル（50%）: メニュートグル、アバターコンテナ
|
||
|
||
## 6. 深度とエレベーション
|
||
|
||
| レベル | 処理 | 用途 |
|
||
|-------|-----------|-----|
|
||
| フラット（レベル0） | シャドウなし | ページ背景、テキストブロック |
|
||
| リング（レベル1） | `rgba(0,0,0,0.08) 0px 0px 0px 1px` | ほとんどの要素のボーダーとしてのシャドウ |
|
||
| ライトリング（レベル1b） | `rgb(235,235,235) 0px 0px 0px 1px` | タブと画像のための軽いリング |
|
||
| 繊細なカード（レベル2） | リング + `rgba(0,0,0,0.04) 0px 2px 2px` | 最小限の浮き上がりの標準カード |
|
||
| フルカード（レベル3） | リング + 繊細 + `rgba(0,0,0,0.04) 0px 8px 8px -8px` + インナー `#fafafa` リング | フィーチャードカード、ハイライトパネル |
|
||
| フォーカス（アクセシビリティ） | `2px solid hsla(212, 100%, 48%, 1)` のアウトライン | すべてのインタラクティブ要素のキーボードフォーカス |
|
||
|
||
**シャドウの哲学**: Vercelはおそらく現代のウェブデザインで最も洗練されたシャドウシステムを持つ。マテリアルデザイン的な意味での従来の浮き上がりにシャドウを使うのではなく、各レイヤーが明確な建築的目的を持つ多値シャドウスタックを使用する：ひとつは「ボーダー」を作り（0pxスプレッド、1px）、もうひとつはアンビエントの柔らかさを加え（2pxブラー）、もうひとつは距離での深度を処理し（8pxブラーとネガティブスプレッド）、インナーリング（`#fafafa`）はカードを「内側から輝かせる」繊細なハイライトを生む。この多層アプローチにより、カードは浮いているのではなく、作られているように感じられる。
|
||
|
||
### 装飾的な深度
|
||
- ヒーローグラデーション: ヒーローコンテンツの後ろにある柔らかなパステルのマルチカラーグラデーションウォッシュ（ほぼ見えないほど大気的）
|
||
- セクションボーダー: 主要セクション間に `1px solid #171717`（フルダークライン）
|
||
- 背景色の変化なし――深度はシャドウレイヤリングとボーダーコントラストのみから来る
|
||
|
||
## 7. すべきこととすべきでないこと
|
||
|
||
### すべきこと
|
||
- ディスプレイサイズでGeist Sansを積極的なネガティブレタースペーシングで使用（48pxで-2.4pxから-2.88px）
|
||
- 従来のCSSボーダーの代わりにボーダーとしてのシャドウ（`0px 0px 0px 1px rgba(0,0,0,0.08)`）を使用
|
||
- すべてのGeistテキストで `"liga"` を有効にする――リガチャは構造的なもので任意ではない
|
||
- 3ウェイトシステムを使用：400（本文）、500（UI）、600（見出し）
|
||
- ワークフローアクセントカラー（レッド/ピンク/ブルー）をそのワークフローコンテキストのみに適用
|
||
- カードに多層シャドウスタックを使用（ボーダー＋浮き上がり＋アンビエント＋インナーハイライト）
|
||
- カラーパレットをアクロマティックに保つ――`#171717` から `#ffffff` のグレーがシステム
|
||
- プライマリテキストには `#000000` ではなく `#171717` を使用――マイクロな温かみが重要
|
||
|
||
### すべきでないこと
|
||
- Geist Sansにポジティブなレタースペーシングを使わない――常にネガティブまたはゼロ
|
||
- 本文テキストにウェイト700（ボールド）を使わない――600が最大で、見出しのみに使用
|
||
- カードに従来のCSS `border` を使わない――シャドウボーダーテクニックを使用
|
||
- UIクロムに温かい色（オレンジ、イエロー、グリーン）を取り入れない
|
||
- ワークフローアクセントカラー（Ship Red、Preview Pink、Develop Blue）を装飾的に適用しない
|
||
- 重いシャドウ（0.1以上の不透明度）を使わない――シャドウシステムはウィスパーレベル
|
||
- 本文テキストのレタースペーシングを増やさない――Geistはタイトに走るように設計されている
|
||
- プライマリアクションボタンにピル半径（9999px）を使わない――ピルはバッジ/タグのみ
|
||
- カードシャドウでインナーの `#fafafa` リングをスキップしない――システムを機能させる輝きがここにある
|
||
|
||
## 8. レスポンシブの振る舞い
|
||
|
||
### ブレークポイント
|
||
| 名称 | 幅 | 主な変更 |
|
||
|------|-------|-------------|
|
||
| モバイル小 | <400px | タイトなシングルカラム、最小パディング |
|
||
| モバイル | 400–600px | 標準モバイル、縦積みレイアウト |
|
||
| タブレット小 | 600–768px | 2カラムグリッドが始まる |
|
||
| タブレット | 768–1024px | フルカードグリッド、パディング拡大 |
|
||
| デスクトップ小 | 1024–1200px | 標準デスクトップレイアウト |
|
||
| デスクトップ | 1200–1400px | フルレイアウト、最大コンテンツ幅 |
|
||
| ラージデスクトップ | >1400px | 中央揃え、余裕のあるマージン |
|
||
|
||
### タッチターゲット
|
||
- ボタンは快適なパディングを使用（縦8px–16px）
|
||
- ナビゲーションリンクは適切なスペーシングで14px
|
||
- ピルバッジはタップターゲットのために水平パディング10px
|
||
- モバイルメニュートグルは50%半径の円形ボタンを使用
|
||
|
||
### 折りたたみ戦略
|
||
- ヒーロー: ディスプレイ48px → 縮小、ネガティブトラッキングを比例的に維持
|
||
- ナビゲーション: 水平リンク＋CTA → ハンバーガーメニュー
|
||
- フィーチャーカード: 3カラム → 2カラム → シングルカラムの縦積み
|
||
- コードスクリーンショット: アスペクト比を維持、水平スクロールになる場合あり
|
||
- トラストバーのロゴ: グリッド → 水平スクロール
|
||
- フッター: 複数カラム → 縦積みシングルカラム
|
||
- セクションスペーシング: 80px以上 → モバイルで48px
|
||
|
||
### 画像の振る舞い
|
||
- ダッシュボードのスクリーンショットはすべてのサイズでボーダー処理を維持
|
||
- ヒーローグラデーションはモバイルで柔らかく/シンプルになる
|
||
- プロダクトスクリーンショットは一貫したボーダー半径でレスポンシブ画像を使用
|
||
- フルワイドセクションはエッジ・ツー・エッジの処理を維持
|
||
|
||
## 9. エージェントプロンプトガイド
|
||
|
||
### クイックカラーリファレンス
|
||
- プライマリCTA: Vercel Black（`#171717`）
|
||
- 背景: Pure White（`#ffffff`）
|
||
- 見出しテキスト: Vercel Black（`#171717`）
|
||
- 本文テキスト: Gray 600（`#4d4d4d`）
|
||
- ボーダー（シャドウ）: `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`
|
||
- リンク: Link Blue（`#0072f5`）
|
||
- フォーカスリング: Focus Blue（`hsla(212, 100%, 48%, 1)`）
|
||
|
||
### コンポーネントプロンプトの例
|
||
- 「白い背景のヒーローセクションを作成してください。見出しは48px Geist ウェイト600、行の高さ1.00、レタースペーシング-2.4px、カラー#171717。サブタイトルは20px Geist ウェイト400、行の高さ1.80、カラー#4d4d4d。ダークCTAボタン（#171717、6px角丸、8px 16pxパディング）とゴーストボタン（白、シャドウボーダー rgba(0,0,0,0.08) 0px 0px 0px 1px、6px角丸）。」
|
||
- 「カードをデザインしてください：白い背景、CSSボーダーなし。シャドウスタックを使用：rgba(0,0,0,0.08) 0px 0px 0px 1px、rgba(0,0,0,0.04) 0px 2px 2px、#fafafa 0px 0px 0px 1px。角丸8px。タイトルは24px Geist ウェイト600、レタースペーシング-0.96px。本文は16px ウェイト400、#4d4d4d。」
|
||
- 「ピルバッジを作成してください：#ebf5ff 背景、#0068d6 テキスト、9999px角丸、0px 10px パディング、12px Geist ウェイト500。」
|
||
- 「ナビゲーションを作成してください：白いスティッキーヘッダー。リンクにGeist 14px ウェイト500、#171717 テキスト。右揃えのダークピルCTA「Start Deploying」。下部にシャドウボーダー：rgba(0,0,0,0.08) 0px 0px 0px 1px。」
|
||
- 「3ステップを示すワークフローセクションをデザインしてください：Develop（テキストカラー#0a72ef）、Preview（#de1d8d）、Ship（#ff5b4f）。各ステップ：14px Geist Mono 大文字ラベル + 24px Geist ウェイト600 タイトル + 16px ウェイト400 説明文（#4d4d4d）。」
|
||
|
||
### 反復ガイド
|
||
1. CSSボーダーの代わりに常にボーダーとしてのシャドウを使用――`0px 0px 0px 1px rgba(0,0,0,0.08)` が基盤
|
||
2. レタースペーシングはフォントサイズにスケール：48pxで-2.4px、32pxで-1.28px、24pxで-0.96px、14pxで通常
|
||
3. 3つのウェイトのみ：400（読む）、500（インタラクト）、600（告知）
|
||
4. カラーは機能的で、決して装飾的ではない――ワークフローカラー（レッド/ピンク/ブルー）はパイプラインステージのみを示す
|
||
5. カードシャドウのインナー `#fafafa` リングがVercelカードに繊細なインナーグローを与える
|
||
6. 技術的なラベルにGeist Mono 大文字、それ以外すべてにGeist Sans
|