Design tokens
Declared defaults for demo-blog, shown as light, dark, and shared token references. Open Preview tokens to edit the component previews; these reference dashboards stay unchanged.
Declared defaults
These are the declared defaults of the design-token manifest, shown as light, dark, and shared token references. The light and dark frames show only tokens whose declared value differs by mode (light-dark() pairs and rows that reference them); the shared frame lists every other token once and follows the site theme. Samples are isolated from the live panels and anything saved in them. Nothing here is clickable or editable.
UI tokens — mode-dependent defaults (light)
0 tokensDeclared defaults · light mode · mode-dependent only
No tokens match this view.
UI tokens — mode-dependent defaults (dark)
0 tokensDeclared defaults · dark mode · mode-dependent only
No tokens match this view.
UI tokens — shared defaults (mode-independent)
76 tokensDeclared defaults · light mode · mode-independent only
Color
28 tokensSurface
blog palette gray 0
--blog-palette-gray-0
oklch(0.975 0.012 80)
blog palette gray 1
--blog-palette-gray-1
oklch(0.955 0.014 80)
blog palette gray 2
--blog-palette-gray-2
oklch(0.92 0.015 80)
blog palette gray 3
--blog-palette-gray-3
oklch(0.85 0.015 80)
blog palette gray 4
--blog-palette-gray-4
oklch(0.58 0.015 70)
blog palette gray 5
--blog-palette-gray-5
oklch(0.45 0.018 70)
blog palette gray 6
--blog-palette-gray-6
oklch(0.25 0.02 60)
blog palette gray 7
--blog-palette-gray-7
oklch(0.17 0.02 60)
blog palette oxblood 1
--blog-palette-oxblood-1
oklch(0.93 0.03 25)
blog palette oxblood 4
--blog-palette-oxblood-4
oklch(0.46 0.13 25)
blog palette oxblood 5
--blog-palette-oxblood-5
oklch(0.38 0.12 25)
blog palette green 4
--blog-palette-green-4
oklch(0.55 0.13 150)
blog palette red 4
--blog-palette-red-4
oklch(0.52 0.17 25)
color blog bg
--color-blog-bg
var(--blog-palette-gray-0)
References: --blog-palette-gray-0
color blog surface
--color-blog-surface
var(--blog-palette-gray-1)
References: --blog-palette-gray-1
color blog surface 2
--color-blog-surface-2
var(--blog-palette-gray-2)
References: --blog-palette-gray-2
color blog border
--color-blog-border
var(--blog-palette-gray-3)
References: --blog-palette-gray-3
Text
color blog faint
--color-blog-faint
var(--blog-palette-gray-4)
References: --blog-palette-gray-4
color blog muted
--color-blog-muted
var(--blog-palette-gray-5)
References: --blog-palette-gray-5
color blog fg
--color-blog-fg
var(--blog-palette-gray-6)
References: --blog-palette-gray-6
color blog fg strong
--color-blog-fg-strong
var(--blog-palette-gray-7)
References: --blog-palette-gray-7
color blog link
--color-blog-link
var(--blog-palette-oxblood-4)
References: --blog-palette-oxblood-4
Accent
color blog accent
--color-blog-accent
var(--blog-palette-oxblood-4)
References: --blog-palette-oxblood-4
color blog accent strong
--color-blog-accent-strong
var(--blog-palette-oxblood-5)
References: --blog-palette-oxblood-5
color blog accent soft
--color-blog-accent-soft
var(--blog-palette-oxblood-1)
References: --blog-palette-oxblood-1
color blog focus
--color-blog-focus
var(--blog-palette-oxblood-5)
References: --blog-palette-oxblood-5
State
color blog success
--color-blog-success
var(--blog-palette-green-4)
References: --blog-palette-green-4
color blog danger
--color-blog-danger
var(--blog-palette-red-4)
References: --blog-palette-red-4
Spacing
16 tokensHorizontal spacing
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing blog hsp xs
--spacing-blog-hsp-xs
0.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing blog hsp sm
--spacing-blog-hsp-sm
1rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing blog hsp md
--spacing-blog-hsp-md
1.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing blog hsp lg
--spacing-blog-hsp-lg
2.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing blog hsp xl
--spacing-blog-hsp-xl
4rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing blog hsp 2xl
--spacing-blog-hsp-2xl
6rem
Vertical spacing
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing blog vsp xs
--spacing-blog-vsp-xs
0.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing blog vsp sm
--spacing-blog-vsp-sm
1rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing blog vsp md
--spacing-blog-vsp-md
1.75rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing blog vsp lg
--spacing-blog-vsp-lg
3rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing blog vsp xl
--spacing-blog-vsp-xl
5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing blog vsp 2xl
--spacing-blog-vsp-2xl
7rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing blog control h
--spacing-blog-control-h
2.75rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing blog nav h
--spacing-blog-nav-h
3.75rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing blog avatar sm
--spacing-blog-avatar-sm
2.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing blog avatar lg
--spacing-blog-avatar-lg
5rem
Font
26 tokensFont size
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
text blog caption
--text-blog-caption
0.8125rem
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
text blog body
--text-blog-body
1.125rem
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
text blog lead
--text-blog-lead
1.3125rem
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
text blog h3
--text-blog-h3
1.375rem
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
text blog h2
--text-blog-h2
1.75rem
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
text blog h1 sm
--text-blog-h1-sm
2rem
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
text blog h1
--text-blog-h1
2.5rem
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
text blog display
--text-blog-display
3.5rem
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
text blog code
--text-blog-code
0.9em
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
text blog drop cap
--text-blog-drop-cap
3.4em
Font size / line height
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
text blog caption line height
--text-blog-caption--line-height
1.5
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
text blog body line height
--text-blog-body--line-height
1.7
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
text blog lead line height
--text-blog-lead--line-height
1.5
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
text blog h3 line height
--text-blog-h3--line-height
1.3
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
text blog h2 line height
--text-blog-h2--line-height
1.25
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
text blog h1 sm line height
--text-blog-h1-sm--line-height
1.15
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
text blog h1 line height
--text-blog-h1--line-height
1.15
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
text blog display line height
--text-blog-display--line-height
1.05
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
text blog drop cap line height
--text-blog-drop-cap--line-height
0.85
Font weight
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
font weight blog normal
--font-weight-blog-normal
400
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
font weight blog medium
--font-weight-blog-medium
500
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
font weight blog semibold
--font-weight-blog-semibold
600
Line height
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
tracking blog caps
--tracking-blog-caps
0.08em
Font family
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
font blog serif
--font-blog-serif
"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
font blog sans
--font-blog-sans
system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
Design tokens give an interface a shared rhythm across pages and themes. This specimen keeps the declared values visible while you compare scale, color, and shape (102 entries). デザイントークンは、画面のリズムと読みやすさを支えます。 The light and dark views are isolated from panel edits, so saved tweaks never change this reference. 数字の 0、1、2、3、4 も宣言された値の一部として確認できます。
font blog mono
--font-blog-mono
ui-monospace, "SF Mono", Menlo, Consolas, monospace
Size
6 tokensRadius
radius blog avatar
--radius-blog-avatar
9999px
Shadow
container blog measure
--container-blog-measure
38rem
container blog page
--container-blog-page
64rem
breakpoint blog sm
--breakpoint-blog-sm
40rem
breakpoint blog md
--breakpoint-blog-md
48rem
breakpoint blog lg
--breakpoint-blog-lg
64rem