Design tokens
Declared defaults for demo-landing, 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)
95 tokensDeclared defaults · light mode · mode-independent only
Color
29 tokensSurface
land palette gray 0
--land-palette-gray-0
oklch(0.995 0.002 250)
land palette gray 1
--land-palette-gray-1
oklch(0.975 0.004 250)
land palette gray 2
--land-palette-gray-2
oklch(0.935 0.006 250)
land palette gray 3
--land-palette-gray-3
oklch(0.865 0.008 250)
land palette gray 4
--land-palette-gray-4
oklch(0.62 0.012 250)
land palette gray 5
--land-palette-gray-5
oklch(0.48 0.015 250)
land palette gray 6
--land-palette-gray-6
oklch(0.26 0.02 250)
land palette gray 7
--land-palette-gray-7
oklch(0.16 0.02 250)
land palette cobalt 1
--land-palette-cobalt-1
oklch(0.95 0.03 262)
land palette cobalt 4
--land-palette-cobalt-4
oklch(0.52 0.22 262)
land palette cobalt 5
--land-palette-cobalt-5
oklch(0.44 0.2 262)
land palette green 4
--land-palette-green-4
oklch(0.6 0.15 150)
land palette red 4
--land-palette-red-4
oklch(0.55 0.19 25)
color land bg
--color-land-bg
var(--land-palette-gray-0)
References: --land-palette-gray-0
color land surface
--color-land-surface
var(--land-palette-gray-1)
References: --land-palette-gray-1
color land surface 2
--color-land-surface-2
var(--land-palette-gray-2)
References: --land-palette-gray-2
color land border
--color-land-border
var(--land-palette-gray-3)
References: --land-palette-gray-3
Text
color land faint
--color-land-faint
var(--land-palette-gray-4)
References: --land-palette-gray-4
color land muted
--color-land-muted
var(--land-palette-gray-5)
References: --land-palette-gray-5
color land fg
--color-land-fg
var(--land-palette-gray-6)
References: --land-palette-gray-6
color land fg strong
--color-land-fg-strong
var(--land-palette-gray-7)
References: --land-palette-gray-7
color land link
--color-land-link
var(--land-palette-gray-7)
References: --land-palette-gray-7
Accent
color land accent
--color-land-accent
var(--land-palette-cobalt-4)
References: --land-palette-cobalt-4
color land accent strong
--color-land-accent-strong
var(--land-palette-cobalt-5)
References: --land-palette-cobalt-5
color land accent soft
--color-land-accent-soft
var(--land-palette-cobalt-1)
References: --land-palette-cobalt-1
color land accent fg
--color-land-accent-fg
oklch(0.99 0 0)
color land focus
--color-land-focus
var(--land-palette-cobalt-5)
References: --land-palette-cobalt-5
State
color land success
--color-land-success
var(--land-palette-green-4)
References: --land-palette-green-4
color land danger
--color-land-danger
var(--land-palette-red-4)
References: --land-palette-red-4
Spacing
19 tokensHorizontal spacing
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing land hsp xs
--spacing-land-hsp-xs
0.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing land hsp sm
--spacing-land-hsp-sm
1rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing land hsp md
--spacing-land-hsp-md
1.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing land hsp lg
--spacing-land-hsp-lg
2.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing land hsp xl
--spacing-land-hsp-xl
4rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing land hsp 2xl
--spacing-land-hsp-2xl
6rem
Vertical spacing
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing land vsp xs
--spacing-land-vsp-xs
0.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing land vsp sm
--spacing-land-vsp-sm
1rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing land vsp md
--spacing-land-vsp-md
2rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing land vsp lg
--spacing-land-vsp-lg
4rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing land vsp xl
--spacing-land-vsp-xl
6rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing land vsp 2xl
--spacing-land-vsp-2xl
9rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing land control h
--spacing-land-control-h
3rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing land control h lg
--spacing-land-control-h-lg
3.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing land nav h
--spacing-land-nav-h
4rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing land icon
--spacing-land-icon
1.25rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing land chip
--spacing-land-chip
2.75rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing land avatar
--spacing-land-avatar
3rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
spacing land wordmark
--spacing-land-wordmark
1.75rem
Font
38 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 land caption
--text-land-caption
0.875rem
text land caption font weight
--text-land-caption--font-weight
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 も宣言された値の一部として確認できます。
text land body
--text-land-body
1.0625rem
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 land lead
--text-land-lead
1.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 land h3
--text-land-h3
1.375rem
text land h3 font weight
--text-land-h3--font-weight
600
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 land h2
--text-land-h2
2.25rem
text land h2 font weight
--text-land-h2--font-weight
600
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 land h2 compact
--text-land-h2-compact
1.75rem
text land h2 compact font weight
--text-land-h2-compact--font-weight
600
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 land h1
--text-land-h1
3rem
text land h1 font weight
--text-land-h1--font-weight
700
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 land h1 compact
--text-land-h1-compact
2.25rem
text land h1 compact font weight
--text-land-h1-compact--font-weight
700
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 land display
--text-land-display
4.5rem
text land display font weight
--text-land-display--font-weight
700
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 land display compact
--text-land-display-compact
2.75rem
text land display compact font weight
--text-land-display-compact--font-weight
700
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 land price
--text-land-price
3rem
text land price font weight
--text-land-price--font-weight
700
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 land caption line height
--text-land-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 land body line height
--text-land-body--line-height
1.65
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 land lead line height
--text-land-lead--line-height
1.55
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 land h3 line height
--text-land-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 land h2 line height
--text-land-h2--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 land h2 compact line height
--text-land-h2-compact--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 land h1 line height
--text-land-h1--line-height
1.08
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 land h1 compact line height
--text-land-h1-compact--line-height
1.08
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 land display line height
--text-land-display--line-height
1
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 land display compact line height
--text-land-display-compact--line-height
1
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 land price line height
--text-land-price--line-height
1
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 land normal
--font-weight-land-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 land medium
--font-weight-land-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 land semibold
--font-weight-land-semibold
600
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 land bold
--font-weight-land-bold
700
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 land tight
--tracking-land-tight
-0.02em
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 land caps
--tracking-land-caps
0.06em
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 land sans
--font-land-sans
system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
Size
9 tokensRadius
radius land md
--radius-land-md
0.75rem
radius land pill
--radius-land-pill
9999px
Shadow
shadow land hero
--shadow-land-hero
0 24px 64px -24px oklch(0.15 0.02 262 / 0.35)
container land page
--container-land-page
72rem
container land narrow
--container-land-narrow
44rem
breakpoint land sm
--breakpoint-land-sm
40rem
breakpoint land md
--breakpoint-land-md
48rem
breakpoint land lg
--breakpoint-land-lg
64rem
breakpoint land xl
--breakpoint-land-xl
80rem