%20copy.png){kind=spacer}
percy.tech ↗
サイトを開く
Effortlessly clean, analyze, and transform real-world data with Python — all in your existing workspace.
Design Tokens（DOM解析データ）
このサイトを 1440×900 でレンダリングして、実際のCSS値から自動抽出した数値データです。「同じ感じ」を再現する材料になります。
カラーロール
Background
#f8f7f3Text
#000000Color #1
#000000Color #2
#474747Color #3
#ffffffColor #4
#6b6b6bColor #5
#fcf8f8タイポグラフィ
| 要素 | Font | Size | Weight | Line | Tracking |
|---|---|---|---|---|---|
| h1 | BDO Grotesk |
72px | 500 | 72px | -1.44px |
| h2 | Roboto mono |
14px | 500 | 14px | 1.4px |
| h3 | Roboto mono |
24px | 500 | 33.6px | -0.48px |
| 本文 | Roboto mono |
18px | 500 | 25.2px | normal |
| リンク | system-ui |
16px | 400 | 22.4px | normal |
| ボタン | Roboto mono |
18px | 400 | 25.2px | normal |
使用フォント頻度
system-ui38箇所
Roboto mono16箇所
BDO Grotesk1箇所
スケール・形状
- 角丸スケール
- 12px / 24px
- セクション余白(pt/pb)
- 32-0px / 0-48px / 48-0px
- コンテナ幅
- width: 1440px / max-width: none
- ナビゲーション
- 高さ 90px / position: sticky
