サイトを開く
Thomas is the world
Design Tokens（DOM解析データ）
このサイトを 1440×900 でレンダリングして、実際のCSS値から自動抽出した数値データです。「同じ感じ」を再現する材料になります。
カラーロール
Background
#fafaf8Text
#111111Color #1
#f9f5ebColor #2
#383838Color #3
#efeff1Color #4
#111111Color #5
#0a0a0aタイポグラフィ
| 要素 | Font | Size | Weight | Line | Tracking |
|---|---|---|---|---|---|
| h1 | Host Grotesk |
16px | 400 | 24px | normal |
| h2 | Instrument Serif |
56px | 400 | 58.8px | normal |
| h3 | Benne |
22px | 700 | 28px | normal |
| 本文 | Host Grotesk |
22px | 400 | 29.48px | normal |
| リンク | Instrument Serif |
28px | 400 | 25.2px | normal |
| ボタン | Inter |
12px | 800 | 12px | normal |
使用フォント頻度
Inter32箇所
Benne21箇所
Rethink Sans13箇所
Host Grotesk10箇所
Instrument Serif5箇所
スケール・形状
- 角丸スケール
- 8px 8px 0px 0px / 3px / 4px / 999px / 6px
- シャドウ
- 3パターン使用
- セクション余白(pt/pb)
- 72-72px / 94-124px
- コンテナ幅
- width: 1440px / max-width: 100%
- ナビゲーション
- 高さ 64px / position: fixed
