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"。

階層

原則

• アイデンティティとしての圧縮: 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. 深度とエレベーション

シャドウの哲学: 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. レスポンシブの振る舞い

ブレークポイント

タッチターゲット

• ボタンは快適なパディングを使用（縦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