厳選・オープン・無料

Vercel

鮮やかなgradientが点在する、峻別されたモノクローム美学を持つ高性能開発者プラットフォーム。

01

デザイン DNA

モダンWeb基盤のための精密なインストゥルメント

02

カラー

タイポグラフィと高コントラストなUI要素が視覚的な重みを担う、峻別されたモノクローム基盤。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display48px · 500
• headline32px · 500
• body16px · 400
• caption14px · 400
• mono14px · 400

ディスプレイサイズではtightなnegative tracking · 本文ではgenerousなvertical rhythm · すべてのコード表現にモノスペースフォントを使用

04

余白

4pxのベースグリッドを使用し、間隔とサイズに一貫した倍数を適用

05

サーフェス (角丸 / 影 / 罫線)

1px solid #ebebeb

rgba(0,0,0,0.08) 0px 0px 0px 1px · rgba(0,0,0,0.04) 0px 2px 2px 0px

06

レイアウト

ワイドマージンを持つ中央揃えシングルカラムレイアウト。ヒーローでは可见な12カラムグリッドを活用

07

モーションとインタラクション

Subtleなopacity transition · hover時のcolor shift · click時のtransform

Subtleな色の変化またはborder transition · わずかなtransformまたはopacity shiftによる即座の視覚応答

08

コンポーネント

• button 高コントラストなピル型ボタン。プライマリは白文字のソリッドブラック、セカンダリは黒文字のアウトライン
• card 薄いborderとlight shadow、generousなpaddingを持つsubtleなカード
• chip minimalなpaddingとthinなborderを持つsmallな角丸タグ
• input subtleなborderと内部paddingを持つcleanなテキスト入力
• hero 目立つbackground graphic、明確なCTA、supportingなsubtextを持つlargeな中央ヘッドライン

09

文体と禁止事項

• トーン Professionalでdirect、かつtechnically precise
• 見出し Boldでconcise、かつaction-orientedなステートメント
• CTA 「Start Deploying」や「Get a Demo」のような明確でimperativeな動詞

• 鮮やかまたはneonな色をプライマリUI要素として使用しない — スクリーンショットはstrictなモノクロームインターフェースを示している
• すべての要素にrounded cornerを使用しない — スクリーンショットはロゴやカードのようなsharpでgeometricな形状を示している
• 幅広でdecorativeなフォントを使用しない — スクリーンショットはすべての見出しにcleanでfunctionalなsans-serifを使用している
• 多くのカラムを持つoverly complexなレイアウトを作成しない — スクリーンショットはspaciousでsingle-columnなフローを示している
• drop shadowでdepthを表現しない — スクリーンショットはseparationにthinなborderとhigh contrastに依存している
• 本文にall-capsを使用しない — スクリーンショットは大文字をsmallなlabelまたはtagにのみ使用している
• 避ける: 過度にplayfulな言葉遣い
• 避ける: 曖昧な用語
• 避ける: 過度な感嘆符の使用

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko