Vercel
白い紙に印刷された端末
Vercelのデザインシステムは、規律あるモノクロームの実践です。ほぼ白のキャンバス（#fafafa）、黒の文字、細い境界線、そして装飾的な色の完全な排除。視覚言語は、印刷された開発者の端末を想起させます。Geist Sansは、400～450のウェイトと-0.06emの文字間隔で「英雄的」なスケールではほとんど判読できませんが、Geist Monoは、11～13pxの大文字でラベル、メタデータ、コードサンプルを適用します。ボタンは、白地に黒、または黒地に白の、6pxの鋭い半径または長方形です。このシステムは、色ではなくコントラストとタイポグラフィの階層に依存しており、三角形の記号（▲）と2行のワードマークを唯一のブランディング要素として使用しています。サーフェスは、#fafafa → #ebebeb → #171717の順に積み重ねられ、影や色ではなく、トーン値の変化によって奥行きが生まれます。各要素は4ピクセルのグリッドに基づいて構築され、密度が高く、エンジニアのノートを彷彿とさせるインターフェースとなっている。つまり、正確で機能的であり、余白を恐れていない。
コンテナは幅1280pxで中央揃え、水平方向の余白は24～48pxと広めです。メインブロックは非対称の3ゾーン構成で、左側に大きな見出し、中央にブランドロゴ、右側に「眉毛」ブロックを配置しています。メインブロックの下には、交互にストライプ状にコンテンツを配置。クライアントのロゴが入った全幅のストライプ、左側に見出し、右側に製品レイアウトが配置された2列の「エージェントクリエイター」セクション、そして特徴を示す3枚のカードのグリッドが続きます。各セクションは、区切り線や背景のオフセットなしで、96～128pxの縦方向のガターで区切られています。ナビゲーションは、背景がぼかされた64pxの固定パネルです。カードグリッドは、16～24pxのガターを持つ2列または3列のレイアウトを常に採用しています。全体の密度はコンパクトで、テキストは読みやすく、余白も十分ですが、フォントサイズとコンポーネントサイズのため、ページ全体にゆとりは感じられません。
画像は少なく、常に機能的です。主要な視覚要素は黒い三角形（▲）で、これは「大文字」サイズで浮かぶシルエットとして表示される幾何学的なブランドマークです。コンセプト実証ストリップ上のクライアントロゴは、各ブランドの実際のワードマークをグレースケールで使用しています。製品モックアップ（Notionのチャットインターフェース、CLIターミナル出力、パスポートカード）は、フレーム付きカード内にライトモードのスクリーンショットとして埋め込まれています。写真、イラスト、3D要素は一切なく、システムは白い紙の上に純粋なタイポグラフィと幾何学的形状のみで構成されています。
パレット
中性
- Obsidian
#171717— メインの見出し、ナビゲーションの境界線、暗いボタンの塗りつぶし、リストマーカーはすべてほぼ黒色で、きつさやけばけばしい彩度を避けている。 - Paper White
#fafafa— ページキャンバス、カードの表面、ボタンのライトフィル――これらはすべて、他のすべての要素が配置される標準的な背景です。 - Pure White
#ffffff— 隆起したカード表面、挿入物、入力フィールド。 - Hairline
#ebebeb— ボタン、リンク、カードの1ピクセルの境界線は、高倍率ズームでは表示されますが、低倍率ズームでは表示されません。 - Ash
#c9c9c9— 無効化されたテキスト、ミュートされたラベル、クライアントのロゴにブランド名の透かし。 - Smoke
#a8a8a8— 補助テキスト、プレースホルダーテキスト、控えめなアイコン塗りつぶし。
タイポグラフィ
11ピクセルから64ピクセルまで · 6段階
- Geist Sans — 交換： Inter · 概要 400, 450, 500 · インターフェースと見出しのメインフォントは、Vercel社が独自にデザインした幾何学的なサンセリフ体で、大きなサイズでは文字間隔が狭くなっています（56～64pxで-0.06em、30pxで-0.05em）。ページ上部の見出しには、450ウェイトが選ばれました。これはLightより太く、Semi-Boldより細いため、自信に満ちた、しかし威圧感のない印象を与えます。
- Geist Mono — 交換： JetBrains Mono · 概要 400, 500, 600 · キャプション、コードブロック、CLI出力パネル、メタデータ、大文字テキスト用の等幅フォントです。8px/600px/大文字の組み合わせにより、小さなワードマークを正確に配置できます。等幅フォントの広い文字間隔（0.071em）は、大文字テキストに十分なスペースを提供します。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 12px |
| ボタンの半径 | 6px |
| カード半径 | 6px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 96-128px |
| ページ幅 | 1280px |
AI がVercelスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Headspace — 温かみのある紙に描かれた、陽光あふれるウェルネスコーナー
- WHOOP — 真夜中のパフォーマンスラボ ― 黒い劇場空間の下に白い臨床検査台、紫色の電気パルスが一つだけ
- Together AI — 氷河紙の研究コンソール
- v0 by Vercel — 旋盤加工による製図。精度と機能性が最優先され、各要素は明確な目的を果たし、技術的に完璧な表面上に配置されています。
- Dovetail — 黒い月の下の設計図――かろうじて見えるグラフ線、白い文字、紫色の火花が一つ
- Glideapps — モノクロの製図台、エレクトリックターコイズスパークルが1つ
- Timescale — 温かみのある方眼紙に描かれたエンジニアリング図面
- UGLYCASH — クリーム色の紙にステッカーが貼られたノートは、大胆でマキシマリスト的なフィンテック企業の雰囲気を醸し出し、その混沌とした世界を堂々と見せつけている。
- Sprout Social — 黒いスレートの上に芽吹いた緑の芽。厳格なモノクロームのキャンバスに、鮮やかなアクセントが一つ。色は動きを表現するためだけに用いられ、自信に満ちた幾何学的なフォントが道標の役割を果たしている。
- Krea — 真夜中のギャラリー・ノワール
- Evergreen — リネン紙に描かれたソーラー温室
- Factory — 真夜中の「作戦室」の端末。「工場」は、懐中電灯で照らされた指令書のように一枚の白いカードが置かれる、殺風景な黒い制御盤だ。部屋にある唯一の物体は、仕事そのものだけだ。