サイトを開く
Onlook is a visual code editor that lets designers work directly in real codebases. Edit live React components on an infinite canvas with your team’s real Storybook design system. AI helps. The code is the source of truth. Open-source.
Design Tokens（DOM解析データ）
このサイトを 1440×900 でレンダリングして、実際のCSS値から自動抽出した数値データです。「同じ感じ」を再現する材料になります。
カラーロール
Background
lab(4.4379 0 0)Text
lab(98.26 0 0)Color #1
lab(98.26 0 0)Color #2
#abababColor #3
#999999Color #4
lab(84.9837 0.601262 -2.17986)Color #5
lab(35.1166 1.78212 -6.1173)タイポグラフィ
| 要素 | Font | Size | Weight | Line | Tracking |
|---|---|---|---|---|---|
| h1 | Inter |
60px | 300 | 54px | -2.4px |
| h2 | Inter |
36px | 300 | 45px | -0.72px |
| h3 | JetBrains Mono |
12px | 400 | 16px | normal |
| 本文 | Inter |
18px | 400 | 28px | normal |
| リンク | Inter |
14px | 400 | 20px | normal |
| ボタン | Inter |
14px | 400 | 20px | normal |
使用フォント頻度
Inter710箇所
JetBrains Mono90箇所
スケール・形状
- 角丸スケール
- 8px / 10px / 14px / 3.35544e+07px / 6px / 4px / 2px / 14px 0px 0px
- シャドウ
- 4パターン使用
