mandarinoriental.com ↗
サイトを開く
Design Tokens（DOM解析データ）
このサイトを 1440×900 でレンダリングして、実際のCSS値から自動抽出した数値データです。「同じ感じ」を再現する材料になります。
カラーロール
Text
#000000Color #1
#ffffffColor #2
#000000Color #3
#d8d8d8Color #4
#b59060Color #5
#555555タイポグラフィ
| 要素 | Font | Size | Weight | Line | Tracking |
|---|---|---|---|---|---|
| h2 | Futura PT Medium |
56px | 500 | 44px | normal |
| h3 | Noto Sans JP Bold |
16px | 700 | 20.8px | normal |
| 本文 | AvenirNext LT Pro |
12.992px | 400 | 19.488px | normal |
| リンク | AvenirNext LT Pro |
14px | 400 | 16.8px | normal |
| ボタン | Futura PT Medium |
14px | 400 | 16.8px | -0.16px |
使用フォント頻度
AvenirNext LT Pro494箇所
Futura PT Medium134箇所
Noto Sans JP Bold13箇所
AvenirNext LT Pro Bold9箇所
Futura PT9箇所
スケール・形状
- 角丸スケール
- 22px / 28px / 2.5px / 2px / 3px / 17px
- シャドウ
- 3パターン使用
- セクション余白(pt/pb)
- 110-100px
- コンテナ幅
- width: 1440px / max-width: 100%
- ナビゲーション
- 高さ 156px / position: fixed
outsite.co 
thecollective.com 
habyt.com 
common.com 
apartmenttherapy.com