Cursor
くすぶる炭火に照らされた、居心地の良い羊皮紙工房
Cursorは、温かみのある羊皮紙のようなタイポグラフィを採用しています。クリーミーなキャンバスに、インクのような黒のテキスト、そしてボタンを埋めるのではなくリンクや選択項目をアクティブにする鮮やかなオレンジ色のアクセントが特徴です。見出しはCursorGothicの400ウェイトで設定され、文字サイズが大きくなるにつれて文字間隔が徐々に狭くなります。力強さは、大胆さではなく、抑制された細い文字ウェイトによって表現されています。表面はフラットで紙のような質感に保たれ、細い境界線と柔らかく温かみのあるグレーの影が特徴です。テキスト全体を通して、角は4pxのウェイトでシャープに保たれています。小見出しと散文にはEB Garamondが部分的に使用され、コード、タグ、メタデータにはberkeleyMonoが使用されています。これにより、システムはSaaSダッシュボードというよりも文学雑誌のようなタイポグラフィ上の個性を帯びています。
最大幅: 1300px 中央揃え、24px 余白。トップナビゲーション: 高さ 52px の透明なヘッダー、左側にロゴとテキストマーク、中央揃えのナビゲーションリンク 4 つ、「ログイン / お問い合わせ / ダウンロード」クラスターが右揃え。ヒーロー: 左揃えのヘッダー + 左上からテキストが走るダブルコールトゥアクションブロック、その後、ページ全体の幅に広がるフル幅の製品モックアップカード。トラストストライプ: セクション幅全体に 8 つのロゴタイルが 1 列に水平に並んでいます。フィーチャーセクションは、左側にテキスト、右側にスクリーンショットが交互に配置された 2 列レイアウトで、それぞれ 50/50、セクション間の垂直リズムは 64-96px です。すべてのフィーチャースクリーンショットは、macOS スタイルが同一のウィンドウモックアップです。フッター: 左側にブランドマークがある 4 列のリンクグリッド。セクションは、区切り線ではなく十分な余白で区切られており、クリーム色のキャンバス自体が区切りとなっています。
製品のスクリーンショットが中心に据えられています。macOS の大きなウィンドウ モックアップには、Cursor IDE の動作が示されています。ファイル タブ、差分表示、エージェント プラン、ターミナル パネル、Slack/チャット統合などです。各ウィンドウ モックアップは、柔らかく温かみのあるコントラストの #f2f1ed カードで囲まれています。メイン セクションを超えて、落ち着いた風景写真 (山/砂漠の地平線) が広がり、UI と競合することなく温かみを加えています。クライアントのロゴ ( Stripe 、OpenAI、Linear、Datadog、NVIDIA、Figma、Ramp、Adobe) は、ピル型の Linen タイル内にモノクロの文字で表示されています。人物の写真、イラスト、抽象的な装飾グラフィック要素はなく、視覚的な重みはすべて製品の UI とブランディングに集中しています。アイコンは、#7a7974 Ash で塗りつぶされた細いモノライン グリフで、色は使用されていません。
パレット
中性
- Ink
#26251e— メインテキスト、メインアクションボタンの背景、ナビゲーションテキスト - 温かみのある、ほぼ黒に近い色合いで、純粋な#000ではありません - Parchment
#f7f7f4— ページの背景、つまりメインのキャンバスは、温かみのあるクリーム色で、コントラストを和らげ、デジタル印刷ではなくインクジェット印刷のような印象を与えている。 - Bone
#f2f1ed— キャンバスよりも一段階暗い色の段ボールの表面と盛り上がった容器が、重なり合った、境界のない「紙の上に紙を重ねた」ような効果を生み出している。 - Linen
#e6e5e0— 暗い表面のボタンには、明るいニュートラルカラーの塗りつぶしが適しています。 - Stone
#cdcdc9— 細い境界線、区切り線、微妙な仕切り線 – 暖色系の1ピクセル線 - Mist
#a1a19f— 第3レベルの補助テキスト、キャプション - ミュートされたテキストと二次テキストの間。
タイポグラフィ
12～72ピクセル・6段階
- CursorGothic — 交換： Inter · 概要 400, 500 · ユーザーインターフェース、見出し、ナビゲーション、本文、および製品デザインに使用される主要フォントです。見出しは400ポイントの太さで、文字間隔が徐々に狭くなる（22pxで-0.005em → 72pxで-0.03em）のが特徴で、見出しは太字にはなりません。フォント関数ss08、ss09、およびtnumは、スタイル代替文字と表形式の数字を有効にします。
- EB Garamond — 交換： Iowan Old Style · 概要 400, 500 · 個々の小見出し、本文、表形式データに適した編集用セリフ書体であるCursorGothicは、インターフェースに文学的な雰囲気を加えます。
- berkeleyMono — 交換： ui-monospace · 概要 400, 500 · Monospace - コードブロック、コマンドラインスニペット、メタデータ、ファイルパス、開発者ラベルなど、技術言語に使用されます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 8px |
| ボタンの半径 | 4px |
| カード半径 | 4px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 64-96px |
| ページ幅 | 1300px |
AI がCursorスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Amplemarket — 紙吹雪が散りばめられた、陽光あふれる職場
- Getharvest — 夕暮れ時の机――温かみのあるクリーム色のキャンバス、キャンバスに掛けられた白いポストカード、そして一つの明るいオレンジ色の炎
- Drive Capital — 温かみのある紙に印刷されたレトロなロードトリップポスター
- Wealthsimple — カシミヤ張りの倉庫、ギャラリー照明付き
- Huddle — クリーム色の紙にパステルで描かれた在庫カード
- Fuser — デザイナーの仕事場の壁に散らばったポラロイド写真
- Campsite — 陽光が差し込む編集者のワークステーション ― 温かみのあるクリーム色の紙にオレンジ色の意図を示すスタンプが1つ押されている
- Redis Agency — 営業時間外に開かれる編集工房は、真っ暗な場所で、ブランディング作業はすべてセリフ体フォントと一本の赤い大根だけで行われている。
- AI Product Generation — 白い紙に印刷されたエディトリアル写真スタジオ - タイトルを表紙に、オレンジ色はエディトリアルの強調表示に使用
- Getanchor — 日焼けしたクリーム色の背景に、温かみのあるテラコッタの色合い。
- Flatfile — 温かい羊皮紙に記された、静かなデータ日記
- Inthememory — 白い大理石に描かれた建築図面。そこには温かい光が一つだけ灯っている。静寂に包まれた編集室のデータルームでは、深みのあるターコイズブルーのインクと錠剤型の操作パネルが、真っ白な表面の上に浮かび上がり、そこにオレンジ色のアクセントが一つだけ散りばめられている。