Sample Styleguide

Design tokens

Declared defaults for @takazudo/zudo-sg/stories, 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)
15 tokensDeclared defaults · light mode · mode-dependent only
Color
15 tokens
Surface
color-bg
--color-bg
var(--palette-neutral-0)
References: --palette-neutral-0
color-surface
--color-surface
var(--palette-neutral-0)
References: --palette-neutral-0
color-surface-2
--color-surface-2
var(--palette-neutral-1)
References: --palette-neutral-1
color-border
--color-border
var(--palette-neutral-1)
References: --palette-neutral-1
color-loading-scrim
--color-loading-scrim
color-mix(in srgb, var(--color-bg) 40%, transparent)
References: --color-bg
Text
color-fg
--color-fg
var(--palette-neutral-3)
References: --palette-neutral-3
color-muted
--color-muted
var(--palette-neutral-2)
References: --palette-neutral-2
Accent
color-accent
--color-accent
var(--palette-accent-2)
References: --palette-accent-2
color-accent-hover
--color-accent-hover
var(--palette-accent-3)
References: --palette-accent-3
color-on-accent
--color-on-accent
var(--palette-neutral-0)
References: --palette-neutral-0
color-focus
--color-focus
var(--palette-accent-2)
References: --palette-accent-2
State
color-success
--color-success
var(--palette-state-success)
References: --palette-state-success
color-danger
--color-danger
var(--palette-state-danger)
References: --palette-state-danger
color-warning
--color-warning
var(--palette-state-warning)
References: --palette-state-warning
color-info
--color-info
var(--palette-state-info)
References: --palette-state-info
UI tokens — mode-dependent defaults (dark)
15 tokensDeclared defaults · dark mode · mode-dependent only
Color
15 tokens
Surface
color-bg
--color-bg
var(--palette-neutral-3)
References: --palette-neutral-3
color-surface
--color-surface
var(--palette-neutral-3)
References: --palette-neutral-3
color-surface-2
--color-surface-2
var(--palette-neutral-2)
References: --palette-neutral-2
color-border
--color-border
var(--palette-neutral-2)
References: --palette-neutral-2
color-loading-scrim
--color-loading-scrim
color-mix(in srgb, var(--color-bg) 40%, transparent)
References: --color-bg
Text
color-fg
--color-fg
var(--palette-neutral-0)
References: --palette-neutral-0
color-muted
--color-muted
var(--palette-neutral-1)
References: --palette-neutral-1
Accent
color-accent
--color-accent
var(--palette-accent-1)
References: --palette-accent-1
color-accent-hover
--color-accent-hover
var(--palette-accent-0)
References: --palette-accent-0
color-on-accent
--color-on-accent
var(--palette-neutral-3)
References: --palette-neutral-3
color-focus
--color-focus
var(--palette-accent-1)
References: --palette-accent-1
State
color-success
--color-success
var(--palette-state-success-dark)
References: --palette-state-success-dark
color-danger
--color-danger
var(--palette-state-danger-dark)
References: --palette-state-danger-dark
color-warning
--color-warning
var(--palette-state-warning-dark)
References: --palette-state-warning-dark
color-info
--color-info
var(--palette-state-info-dark)
References: --palette-state-info-dark
UI tokens — shared defaults (mode-independent)
87 tokensDeclared defaults · light mode · mode-independent only
Color
6 tokens
Rail
color-rail-bg
--color-rail-bg
var(--palette-neutral-3)
References: --palette-neutral-3
color-rail-bg-strong
--color-rail-bg-strong
var(--palette-neutral-3)
References: --palette-neutral-3
color-rail-fg
--color-rail-fg
var(--palette-neutral-0)
References: --palette-neutral-0
color-rail-muted
--color-rail-muted
var(--palette-neutral-1)
References: --palette-neutral-1
color-rail-border
--color-rail-border
var(--palette-neutral-2)
References: --palette-neutral-2
color-rail-hover-bg
--color-rail-hover-bg
var(--palette-neutral-2)
References: --palette-neutral-2
Palette
36 tokens
Neutral
palette-neutral-0
--palette-neutral-0
oklch(0.970 0.006 75)
palette-neutral-1
--palette-neutral-1
oklch(0.885 0.009 75)
palette-neutral-2
--palette-neutral-2
oklch(0.410 0.012 75)
palette-neutral-3
--palette-neutral-3
oklch(0.235 0.010 75)
Accent
palette-accent-0
--palette-accent-0
oklch(.755 .130 64)
palette-accent-1
--palette-accent-1
oklch(.700 .158 62)
palette-accent-2
--palette-accent-2
oklch(.470 .120 56)
palette-accent-3
--palette-accent-3
oklch(.400 .096 56)
State
palette-state-danger
--palette-state-danger
oklch(.505 .170 25)
palette-state-danger-dark
--palette-state-danger-dark
oklch(.700 .170 25)
palette-state-success
--palette-state-success
oklch(.470 .140 145)
palette-state-success-dark
--palette-state-success-dark
oklch(.680 .145 145)
palette-state-warning
--palette-state-warning
oklch(.490 .100 82)
palette-state-warning-dark
--palette-state-warning-dark
oklch(.760 .135 82)
palette-state-info
--palette-state-info
oklch(.485 .122 245)
palette-state-info-dark
--palette-state-info-dark
oklch(.680 .130 245)
Line · Vacuum
palette-line-vacuum-accent
--palette-line-vacuum-accent
oklch(.525 .100 200)
palette-line-vacuum-accent-dark
--palette-line-vacuum-accent-dark
oklch(.760 .085 200)
palette-line-vacuum-hover
--palette-line-vacuum-hover
oklch(.460 .088 200)
palette-line-vacuum-hover-dark
--palette-line-vacuum-hover-dark
oklch(.830 .070 200)
Line · Process
palette-line-process-accent
--palette-line-process-accent
oklch(.530 .150 300)
palette-line-process-accent-dark
--palette-line-process-accent-dark
oklch(.720 .130 300)
palette-line-process-hover
--palette-line-process-hover
oklch(.455 .140 300)
palette-line-process-hover-dark
--palette-line-process-hover-dark
oklch(.795 .110 300)
Line · Laser
palette-line-laser-accent
--palette-line-laser-accent
oklch(.555 .175 28)
palette-line-laser-accent-dark
--palette-line-laser-accent-dark
oklch(.700 .165 28)
palette-line-laser-hover
--palette-line-laser-hover
oklch(.478 .168 28)
palette-line-laser-hover-dark
--palette-line-laser-hover-dark
oklch(.775 .140 28)
Line · Meeting
palette-line-meeting-accent
--palette-line-meeting-accent
oklch(.525 .132 150)
palette-line-meeting-accent-dark
--palette-line-meeting-accent-dark
oklch(.740 .125 150)
palette-line-meeting-hover
--palette-line-meeting-hover
oklch(.458 .116 150)
palette-line-meeting-hover-dark
--palette-line-meeting-hover-dark
oklch(.815 .105 150)
Line · Beauty
palette-line-beauty-accent
--palette-line-beauty-accent
oklch(.565 .172 350)
palette-line-beauty-accent-dark
--palette-line-beauty-accent-dark
oklch(.720 .150 350)
palette-line-beauty-hover
--palette-line-beauty-hover
oklch(.485 .166 350)
palette-line-beauty-hover-dark
--palette-line-beauty-hover-dark
oklch(.795 .130 350)
Spacing
15 tokens
Horizontal spacing
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
hsp-2xs
--spacing-hsp-2xs
0.125rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
hsp-xs
--spacing-hsp-xs
0.375rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
hsp-sm
--spacing-hsp-sm
0.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
hsp-md
--spacing-hsp-md
0.75rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
hsp-lg
--spacing-hsp-lg
1rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
hsp-xl
--spacing-hsp-xl
1.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
hsp-2xl
--spacing-hsp-2xl
2rem
Vertical spacing
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
vsp-3xs
--spacing-vsp-3xs
0.25rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
vsp-2xs
--spacing-vsp-2xs
0.4375rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
vsp-xs
--spacing-vsp-xs
0.875rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
vsp-sm
--spacing-vsp-sm
1.25rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
vsp-md
--spacing-vsp-md
1.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
vsp-lg
--spacing-vsp-lg
1.75rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
vsp-xl
--spacing-vsp-xl
2.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
vsp-2xl
--spacing-vsp-2xl
3.5rem
Font
22 tokens
Font 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-xs
--text-xs
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-sm
--text-sm
0.875rem
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-base
--text-base
1rem
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-lg
--text-lg
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-xl
--text-xl
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-2xl
--text-2xl
2.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-xs / lh
--text-xs--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-sm / lh
--text-sm--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-base / lh
--text-base--line-height
1.75
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-lg / lh
--text-lg--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-xl / lh
--text-xl--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-2xl / lh
--text-2xl--line-height
1.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-normal
--font-weight-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-medium
--font-weight-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-semibold
--font-weight-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-bold
--font-weight-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 も宣言された値の一部として確認できます。
leading-tight
--leading-tight
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 も宣言された値の一部として確認できます。
leading-snug
--leading-snug
1.4
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 も宣言された値の一部として確認できます。
leading-normal
--leading-normal
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 も宣言された値の一部として確認できます。
leading-relaxed
--leading-relaxed
1.75
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-sans
--font-sans
ui-sans-serif, 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-mono
--font-mono
ui-monospace, "JetBrains Mono", "Fira Code", monospace
Size
8 tokens
Radius
radius-DEFAULT
--radius-DEFAULT
0.25rem
radius-sm
--radius-sm
0.25rem
radius-md
--radius-md
0.5rem
radius-lg
--radius-lg
1rem
radius-full
--radius-full
9999px
Shadow
shadow-card
--shadow-card
0 0.5px 1px oklch(.185 .005 65 / 0.05), 0 2px 4px oklch(.185 .005 65 / 0.05), 0 5px 10px oklch(.185 .005 65 / 0.05)
shadow-raised
--shadow-raised
0 1px 2px oklch(.185 .005 65 / 0.06), 0 4px 8px oklch(.185 .005 65 / 0.06), 0 12px 24px oklch(.185 .005 65 / 0.07)
shadow-overlay
--shadow-overlay
0 2px 4px oklch(.185 .005 65 / 0.08), 0 8px 16px oklch(.185 .005 65 / 0.08), 0 24px 48px oklch(.185 .005 65 / 0.10)