Design tokens
Declared defaults for demo-webshop, 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)
72 tokensDeclared defaults · light mode · mode-independent only
Color
30 tokensSurface
shop palette gray 0
--shop-palette-gray-0
oklch(0.14 0.005 70)
shop palette gray 1
--shop-palette-gray-1
oklch(0.18 0.005 70)
shop palette gray 2
--shop-palette-gray-2
oklch(0.23 0.006 70)
shop palette gray 3
--shop-palette-gray-3
oklch(0.32 0.006 70)
shop palette gray 4
--shop-palette-gray-4
oklch(0.5 0.008 70)
shop palette gray 5
--shop-palette-gray-5
oklch(0.66 0.008 70)
shop palette gray 6
--shop-palette-gray-6
oklch(0.84 0.008 70)
shop palette gray 7
--shop-palette-gray-7
oklch(0.96 0.006 70)
shop palette brass 3
--shop-palette-brass-3
oklch(0.78 0.13 85)
shop palette brass 4
--shop-palette-brass-4
oklch(0.7 0.13 85)
shop palette brass 5
--shop-palette-brass-5
oklch(0.58 0.12 85)
shop palette green 4
--shop-palette-green-4
oklch(0.72 0.14 150)
shop palette red 4
--shop-palette-red-4
oklch(0.66 0.18 25)
color shop bg
--color-shop-bg
var(--shop-palette-gray-0)
References: --shop-palette-gray-0
color shop surface
--color-shop-surface
var(--shop-palette-gray-1)
References: --shop-palette-gray-1
color shop surface 2
--color-shop-surface-2
var(--shop-palette-gray-2)
References: --shop-palette-gray-2
color shop border
--color-shop-border
var(--shop-palette-gray-3)
References: --shop-palette-gray-3
color shop inverse bg
--color-shop-inverse-bg
var(--shop-palette-gray-7)
References: --shop-palette-gray-7
Text
color shop faint
--color-shop-faint
var(--shop-palette-gray-4)
References: --shop-palette-gray-4
color shop muted
--color-shop-muted
var(--shop-palette-gray-5)
References: --shop-palette-gray-5
color shop fg
--color-shop-fg
var(--shop-palette-gray-6)
References: --shop-palette-gray-6
color shop fg strong
--color-shop-fg-strong
var(--shop-palette-gray-7)
References: --shop-palette-gray-7
color shop link
--color-shop-link
var(--shop-palette-gray-7)
References: --shop-palette-gray-7
color shop inverse fg
--color-shop-inverse-fg
var(--shop-palette-gray-0)
References: --shop-palette-gray-0
color shop price
--color-shop-price
var(--shop-palette-gray-7)
References: --shop-palette-gray-7
Accent
color shop accent
--color-shop-accent
var(--shop-palette-brass-4)
References: --shop-palette-brass-4
color shop accent fg
--color-shop-accent-fg
var(--shop-palette-gray-0)
References: --shop-palette-gray-0
color shop focus
--color-shop-focus
var(--shop-palette-brass-3)
References: --shop-palette-brass-3
State
color shop success
--color-shop-success
var(--shop-palette-green-4)
References: --shop-palette-green-4
color shop danger
--color-shop-danger
var(--shop-palette-red-4)
References: --shop-palette-red-4
Spacing
14 tokensHorizontal spacing
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing shop hsp xs
--spacing-shop-hsp-xs
0.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing shop hsp sm
--spacing-shop-hsp-sm
0.75rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing shop hsp md
--spacing-shop-hsp-md
1.25rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing shop hsp lg
--spacing-shop-hsp-lg
2rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing shop hsp xl
--spacing-shop-hsp-xl
3rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing shop hsp 2xl
--spacing-shop-hsp-2xl
5rem
Vertical spacing
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing shop vsp xs
--spacing-shop-vsp-xs
0.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing shop vsp sm
--spacing-shop-vsp-sm
0.75rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing shop vsp md
--spacing-shop-vsp-md
1.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing shop vsp lg
--spacing-shop-vsp-lg
3rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing shop vsp xl
--spacing-shop-vsp-xl
5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing shop vsp 2xl
--spacing-shop-vsp-2xl
8rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing shop control h
--spacing-shop-control-h
2.75rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing shop nav h
--spacing-shop-nav-h
3.5rem
Font
20 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 shop caption
--text-shop-caption
0.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 shop body
--text-shop-body
0.9375rem
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 shop lead
--text-shop-lead
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 shop h3
--text-shop-h3
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 shop h2
--text-shop-h2
1.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 shop h1
--text-shop-h1
2.25rem
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 shop display
--text-shop-display
3.5rem
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 shop caption line height
--text-shop-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 shop body line height
--text-shop-body--line-height
1.6
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 shop lead line height
--text-shop-lead--line-height
1.6
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 shop h3 line height
--text-shop-h3--line-height
1.35
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 shop h2 line height
--text-shop-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 shop h1 line height
--text-shop-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 shop display line height
--text-shop-display--line-height
1.02
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 shop normal
--font-weight-shop-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 shop semibold
--font-weight-shop-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 shop caps
--tracking-shop-caps
0.08em
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 shop tight
--tracking-shop-tight
-0.01em
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 shop sans
--font-shop-sans
"Helvetica Neue", Helvetica, Arial, system-ui, 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 shop mono
--font-shop-mono
ui-monospace, "SF Mono", Menlo, Consolas, monospace
Size
8 tokensRadius
radius shop dot
--radius-shop-dot
9999px
Shadow
shadow shop drawer
--shadow-shop-drawer
-24px 0 48px oklch(0 0 0 / 0.55)
container shop page
--container-shop-page
80rem
container shop prose
--container-shop-prose
40rem
breakpoint shop sm
--breakpoint-shop-sm
40rem
breakpoint shop md
--breakpoint-shop-md
48rem
breakpoint shop lg
--breakpoint-shop-lg
64rem
breakpoint shop xl
--breakpoint-shop-xl
80rem