CodeViz PC表示
CodeViz タブレット表示
CodeViz スマホ表示

Understand your codebase at a glance with intelligent code visualization

Design Tokens(DOM解析データ)

このサイトを 1440×900 でレンダリングして、実際のCSS値から自動抽出した数値データです。「同じ感じ」を再現する材料になります。

カラーロール

Backgroundoklch(0.13 0.004 270)
Textoklch(0.9551 0 0)
Color #1oklch(0.9551 0 0)
Color #2oklch(0.7058 0 0)
Color #3oklch(0.6132 0.2294 235)
Color #4oklch(0.871 0.006 286.286)
Color #5oklch(1 0 0)

タイポグラフィ

要素FontSizeWeightLineTracking
h1 ui-sans-serif 56px 700 61.6px -2.8px
h2 ui-sans-serif 14px 600 21px -0.35px
h3 ui-sans-serif 21px 600 21px -1.05px
本文 ui-sans-serif 14px 400 21px -0.35px
リンク ui-sans-serif 17.5px 700 24.5px -0.35px
ボタン ui-sans-serif 12.25px 500 17.5px -0.35px

使用フォント頻度

ui-sans-serif248箇所

スケール・形状

角丸スケール
2.375px / 3.35544e+07px / 28px / 4.375px / 21px / 12.375px / 12px / 50%
シャドウ
3パターン使用
セクション余白(pt/pb)
60.48-0px / 120.96-120.96px / 105.84-105.84px / 120.96-120.96px / 120.96-120.96px
コンテナ幅
width: 1440px / max-width: none
ナビゲーション
高さ 50px / position: fixed

関連サイト