サイトを開く
Railway is a full-stack cloud for deploying web apps, servers, databases, and more with automatic scaling, monitoring, and security.
このデザインを再現するAIプロンプト
Cursor / Claude Code / v0 にこのまま貼り付けると、近いトーンのLPが生成できます。
クラウドインフラSaaSのLPを作って。Next.js + Tailwind。紫から濃紺へのグラデーション基調 (#5b21b6 → #1e1b4b)、フォントはInter sans + JetBrains Mono。ヒーローには大きなH1とCLI操作のデモアニメーション。各セクションで実UIスクショ、ターミナル風モック。
デザインの特徴
クラウドインフラ向けデベロッパープラットフォーム。紫 #5b21b6 を基調にしたグラデーションが宇宙感・SF感を演出。Inter sansに製品UIスクリーンショットを大きく配置、CLI操作のデモ動画も内蔵。
Design Tokens（DOM解析データ）
このサイトを 1440×900 でレンダリングして、実際のCSS値から自動抽出した数値データです。「同じ感じ」を再現する材料になります。
カラーロール
Background
#13111cText
#ffffffColor #1
#f7f7f8Color #2
#ffffffColor #3
#ffffff80Color #4
#545260Color #5
#878593タイポグラフィ
| 要素 | Font | Size | Weight | Line | Tracking |
|---|---|---|---|---|---|
| h1 | IBM Plex Serif |
54px | 500 | 60.48px | -1.96px |
| h2 | IBM Plex Serif |
40px | 400 | 48px | -0.8px |
| h3 | IBM Plex Serif |
36px | 400 | 48px | -0.72px |
| 本文 | Helvetica |
16px | 400 | 16px | normal |
| リンク | Helvetica |
16px | 400 | 20px | normal |
| ボタン | Helvetica |
16px | 400 | normal | normal |
使用フォント頻度
Inter455箇所
ui-monospace323箇所
Helvetica13箇所
IBM Plex Serif8箇所
Inter Tight1箇所
スケール・形状
- 角丸スケール
- 50% / 6px / 16px / 8px / 10px / 12px / 4px
- シャドウ
- 5パターン使用
- セクション余白(pt/pb)
- 0-16px / 96-0px
- コンテナ幅
- width: 1400px / max-width: 1696px
- ナビゲーション
- 高さ 32px / position: relative
brunocis.co 
gisi.com