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値から自動抽出した数値データです。「同じ感じ」を再現する材料になります。
カラーロール
lab(4.4379 0 0)lab(98.26 0 0)lab(98.26 0 0)#ababab#999999lab(84.9837 0.601262 -2.17986)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 |
使用フォント頻度
スケール・形状
- 角丸スケール
- 8px / 10px / 14px / 3.35544e+07px / 6px / 4px / 2px / 14px 0px 0px
- シャドウ
- 4パターン使用