Design Tokens(DOM解析データ)
このサイトを 1440×900 でレンダリングして、実際のCSS値から自動抽出した数値データです。「同じ感じ」を再現する材料になります。
カラーロール
Background
#fcfcfcText
#000000Color #1
#191919Color #2
#1919198fColor #3
#ffffff8fColor #4
#ffffffColor #5
#e7e7e7タイポグラフィ
| 要素 | Font | Size | Weight | Line | Tracking |
|---|---|---|---|---|---|
| h1 | Inter |
64px | 500 | 64px | -2.56px |
| h2 | Inter |
36px | 500 | 43.2px | -0.72px |
| h3 | Inter |
36px | 500 | 43.2px | -0.72px |
| 本文 | Inter |
20px | 400 | 25px | -0.16px |
| リンク | Inter |
16px | 400 | 24px | normal |
| ボタン | Inter |
16px | 400 | 24px | normal |
使用フォント頻度
Inter655箇所
Menlo38箇所
IBM Plex Mono1箇所
スケール・形状
- 角丸スケール
- 4px / 2px / 8px 8px 0px 0px / 7px / 6px / 12px / 10px / 200px
- シャドウ
- 4パターン使用
- セクション余白(pt/pb)
- 0-48px
- コンテナ幅
- width: 1320px / max-width: none
- ナビゲーション
- 高さ 128px / position: fixed