replit.com ↗
サイトを開く
Build and deploy software collaboratively with the power of AI without spending a second on setup.
Design Tokens（DOM解析データ）
このサイトを 1440×900 でレンダリングして、実際のCSS値から自動抽出した数値データです。「同じ感じ」を再現する材料になります。
カラーロール
Background
#faf6f1Text
#0e0e0fColor #1
#0e0e0fColor #2
#36373bColor #3
#312e2eColor #4
#898c94Color #5
#2f3034タイポグラフィ
| 要素 | Font | Size | Weight | Line | Tracking |
|---|---|---|---|---|---|
| h1 | ABC Diatype Plus Variable |
64px | 400 | 64px | -3.84px |
| h2 | ABC Diatype Plus Variable |
60px | 400 | 53.4px | -3px |
| h3 | ABC Diatype Plus Variable |
26px | 400 | 31.2px | -0.78px |
| 本文 | ABC Diatype Plus Variable |
28px | 400 | 23.24px | -1.12px |
| リンク | ABC Diatype |
14px | 400 | normal | normal |
| ボタン | ABC Diatype |
13.3333px | 400 | normal | normal |
使用フォント頻度
ABC Diatype524箇所
ABC Diatype Plus Variable241箇所
ABC Diatype Variable15箇所
IBM Plex Sans11箇所
スケール・形状
- 角丸スケール
- 6px / 12px / 8px / 999px / 20px / 100px / 16px / 1028px
- シャドウ
- 3パターン使用
- セクション余白(pt/pb)
- 4-4px
- ナビゲーション
- 高さ 79px / position: sticky
