STATIC TOKEN REFERENCE
Your tokens, on a plain page.
These inventories render the playground’s shared token definitions with TokenDashboard. Both modes are visible together; each preview keeps its own values inside the component.
This is a snapshot of declared defaults at build time. Saved panel edits and selected presets do not change it. Expressions stay readable as CSS; samples use the browser’s available fonts and layout context.
Switch the host theme to compare light and dark inventories below. The two host-following dashboards change their chrome while specimens keep their mode. This switch works with JavaScript disabled.
Follow the page · host inventory
20 tokensDeclared defaults · host mode1 with diagnostics
Grouped colors
2 tokensOcean ramp
Ocean paired stop
--dashboard-example-ocean-paired
light-dark(#dbeafe, #1e3a8a)
Aliases to the ramp
Alias to paired stop
--dashboard-example-ocean-paired-alias
ocean-paired
CSS: var(--dashboard-example-ocean-paired)
References: --dashboard-example-ocean-paired
Your own reading passage
1 tokensMixed mode dependence
Top-level light-dark text
--dashboard-example-mode-text
light-dark(#1d4ed8, #bfdbfe)
Spacing limits
6 tokensActual size and readable fallbacks
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
Zero spacing
--dashboard-example-zero
0
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
Large spacing — scroll the ruler to see the complete 1536 CSS px length
--dashboard-example-large
1536px
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
Local spacing source
--dashboard-example-base
2rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
Direct alias to the local spacing source
--dashboard-example-alias
var(--dashboard-example-base)
References: --dashboard-example-base
Ruler unavailable: requires a nonnegative px/rem length or a resolved direct alias.
Missing external spacing source
--dashboard-example-missing
var(--dashboard-example-not-defined)
Context needed: CSS reference --dashboard-example-not-defined is not in this inventory; its value depends on the host context or fallback.
Ruler unavailable: requires a nonnegative px/rem length or a resolved direct alias.
Expression retained without guessed ruler geometry
--dashboard-example-expression
calc(2rem + 8px)
Grouped colors
6 tokensOcean ramp
Ocean 50
--dashboard-example-ocean-50
#eff6ff
Ocean 200
--dashboard-example-ocean-200
#bfdbfe
Ocean 400
--dashboard-example-ocean-400
#60a5fa
Ocean 600
--dashboard-example-ocean-600
#2563eb
Ocean 800
--dashboard-example-ocean-800
#1e40af
Ocean 950
--dashboard-example-ocean-950
#172554
Your own reading passage
5 tokensFont size
A quiet page gives each sentence enough room. Compare the shape of letters, the spacing between words, and the rhythm as this passage wraps onto several lines.
好きな文章で、文字の大きさと行間を確かめましょう。日本語と English、数字 0123456789 を並べると、フォントごとの違いが見えてきます。読む速度に合わせて、自然な余白を探してください。
Body text
--dashboard-example-body-size
18px
A quiet page gives each sentence enough room. Compare the shape of letters, the spacing between words, and the rhythm as this passage wraps onto several lines.
好きな文章で、文字の大きさと行間を確かめましょう。日本語と English、数字 0123456789 を並べると、フォントごとの違いが見えてきます。読む速度に合わせて、自然な余白を探してください。
Large text
--dashboard-example-large-size
32px
Line height
A quiet page gives each sentence enough room. Compare the shape of letters, the spacing between words, and the rhythm as this passage wraps onto several lines.
好きな文章で、文字の大きさと行間を確かめましょう。日本語と English、数字 0123456789 を並べると、フォントごとの違いが見えてきます。読む速度に合わせて、自然な余白を探してください。
Line height 1.4
--dashboard-example-leading-1-4
1.4
A quiet page gives each sentence enough room. Compare the shape of letters, the spacing between words, and the rhythm as this passage wraps onto several lines.
好きな文章で、文字の大きさと行間を確かめましょう。日本語と English、数字 0123456789 を並べると、フォントごとの違いが見えてきます。読む速度に合わせて、自然な余白を探してください。
Line height 1.8
--dashboard-example-leading-1-8
1.8
Mixed mode dependence
Independent text
--dashboard-example-independent-text
serif
Host chrome · light inventory
2 tokensDeclared defaults · light mode
Inventory stays in its own mode
1 tokensMode-scoped color
Light/dark inventory ink
--dashboard-example-scheme-ink
#244f94
Inventory stays in its own mode
1 tokensTypography specimen
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Body text
--dashboard-example-host-body-size
18px
Custom chrome · dark inventory
2 tokensDeclared defaults · dark mode
Inventory stays in its own mode
1 tokensMode-scoped color
Light/dark inventory ink
--dashboard-example-scheme-ink
#93c5fd
Inventory stays in its own mode
1 tokensTypography specimen
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Body text
--dashboard-example-host-body-size
18px
Three instances, one source
Mode dependence is tracked per row. The paired palette stop, its alias, and the light-dark() text row appear once in each mode snapshot; independent rows appear once in the shared listing below. A mixed tier is split into its two regions without changing the order inside either region.
Light-dependent rows
3 tokensDeclared defaults · light mode · mode-dependent only
Grouped colors
2 tokensOcean ramp
Ocean paired stop
--dashboard-example-ocean-paired
#dbeafe
Aliases to the ramp
Alias to paired stop
--dashboard-example-ocean-paired-alias
ocean-paired
CSS: var(--dashboard-example-ocean-paired)
References: --dashboard-example-ocean-paired
Your own reading passage
1 tokensMixed mode dependence
Top-level light-dark text
--dashboard-example-mode-text
#1d4ed8
Dark-dependent rows
3 tokensDeclared defaults · dark mode · mode-dependent only
Grouped colors
2 tokensOcean ramp
Ocean paired stop
--dashboard-example-ocean-paired
#1e3a8a
Aliases to the ramp
Alias to paired stop
--dashboard-example-ocean-paired-alias
ocean-paired
CSS: var(--dashboard-example-ocean-paired)
References: --dashboard-example-ocean-paired
Your own reading passage
1 tokensMixed mode dependence
Top-level light-dark text
--dashboard-example-mode-text
#bfdbfe
Rulers, ramps, and reading
Spacing keeps its actual size: scroll a ruler without shrinking the value. Color stops share their declared ramp. Typography gets a full reading passage. The examples below include an intentional missing variable and an unsupported ruler expression, so you can see how unavailable samples stay readable.
The custom English/Japanese passage is supplied with previewTextduring the build. It is static text, not an editable control.
Rulers, ramps, and reading
20 tokensDeclared defaults · light mode1 with diagnostics
Grouped colors
2 tokensOcean ramp
Ocean paired stop
--dashboard-example-ocean-paired
#dbeafe
Aliases to the ramp
Alias to paired stop
--dashboard-example-ocean-paired-alias
ocean-paired
CSS: var(--dashboard-example-ocean-paired)
References: --dashboard-example-ocean-paired
Your own reading passage
1 tokensMixed mode dependence
Top-level light-dark text
--dashboard-example-mode-text
#1d4ed8
Spacing limits
6 tokensActual size and readable fallbacks
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
Zero spacing
--dashboard-example-zero
0
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
Large spacing — scroll the ruler to see the complete 1536 CSS px length
--dashboard-example-large
1536px
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
Local spacing source
--dashboard-example-base
2rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
Direct alias to the local spacing source
--dashboard-example-alias
var(--dashboard-example-base)
References: --dashboard-example-base
Ruler unavailable: requires a nonnegative px/rem length or a resolved direct alias.
Missing external spacing source
--dashboard-example-missing
var(--dashboard-example-not-defined)
Context needed: CSS reference --dashboard-example-not-defined is not in this inventory; its value depends on the host context or fallback.
Ruler unavailable: requires a nonnegative px/rem length or a resolved direct alias.
Expression retained without guessed ruler geometry
--dashboard-example-expression
calc(2rem + 8px)
Grouped colors
6 tokensOcean ramp
Ocean 50
--dashboard-example-ocean-50
#eff6ff
Ocean 200
--dashboard-example-ocean-200
#bfdbfe
Ocean 400
--dashboard-example-ocean-400
#60a5fa
Ocean 600
--dashboard-example-ocean-600
#2563eb
Ocean 800
--dashboard-example-ocean-800
#1e40af
Ocean 950
--dashboard-example-ocean-950
#172554
Your own reading passage
5 tokensFont size
A quiet page gives each sentence enough room. Compare the shape of letters, the spacing between words, and the rhythm as this passage wraps onto several lines.
好きな文章で、文字の大きさと行間を確かめましょう。日本語と English、数字 0123456789 を並べると、フォントごとの違いが見えてきます。読む速度に合わせて、自然な余白を探してください。
Body text
--dashboard-example-body-size
18px
A quiet page gives each sentence enough room. Compare the shape of letters, the spacing between words, and the rhythm as this passage wraps onto several lines.
好きな文章で、文字の大きさと行間を確かめましょう。日本語と English、数字 0123456789 を並べると、フォントごとの違いが見えてきます。読む速度に合わせて、自然な余白を探してください。
Large text
--dashboard-example-large-size
32px
Line height
A quiet page gives each sentence enough room. Compare the shape of letters, the spacing between words, and the rhythm as this passage wraps onto several lines.
好きな文章で、文字の大きさと行間を確かめましょう。日本語と English、数字 0123456789 を並べると、フォントごとの違いが見えてきます。読む速度に合わせて、自然な余白を探してください。
Line height 1.4
--dashboard-example-leading-1-4
1.4
A quiet page gives each sentence enough room. Compare the shape of letters, the spacing between words, and the rhythm as this passage wraps onto several lines.
好きな文章で、文字の大きさと行間を確かめましょう。日本語と English、数字 0123456789 を並べると、フォントごとの違いが見えてきます。読む速度に合わせて、自然な余白を探してください。
Line height 1.8
--dashboard-example-leading-1-8
1.8
Mixed mode dependence
Independent text
--dashboard-example-independent-text
serif
Light defaults
74 tokensDeclared defaults · light mode
Color
11 tokensSemantic
Background
--zfb-bg
var(--zfb-palette-base-0)
References: --zfb-palette-base-0
Foreground
--zfb-fg
var(--zfb-palette-base-6)
References: --zfb-palette-base-6
Surface
--zfb-color-surface
var(--zfb-palette-base-1)
References: --zfb-palette-base-1
Border
--zfb-color-border
var(--zfb-palette-base-2)
References: --zfb-palette-base-2
Muted
--zfb-color-muted
var(--zfb-palette-base-4)
References: --zfb-palette-base-4
Code background
--zfb-color-code-bg
var(--zfb-palette-base-6)
References: --zfb-palette-base-6
Code foreground
--zfb-color-code-fg
var(--zfb-palette-base-0)
References: --zfb-palette-base-0
Primary
--zfb-color-primary
var(--zfb-palette-brand-3)
References: --zfb-palette-brand-3
Primary hover
--zfb-color-primary-hover
var(--zfb-palette-brand-4)
References: --zfb-palette-brand-4
Primary subtle
--zfb-color-primary-subtle
var(--zfb-palette-brand-0)
References: --zfb-palette-brand-0
Accent
--zfb-color-accent
var(--zfb-palette-accent-3)
References: --zfb-palette-accent-3
Spacing
12 tokensHorizontal spacing
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
H-Spacing XS
--zfb-hsp-xs
0.25rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
H-Spacing S
--zfb-hsp-sm
0.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
H-Spacing M
--zfb-hsp-md
1rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
H-Spacing L
--zfb-hsp-lg
1.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
H-Spacing XL
--zfb-hsp-xl
2rem
Vertical spacing
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
V-Spacing 2XS
--zfb-vsp-2xs
0.25rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
V-Spacing XS
--zfb-vsp-xs
0.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
V-Spacing S
--zfb-vsp-sm
0.75rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
V-Spacing M
--zfb-vsp-md
1rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
V-Spacing L
--zfb-vsp-lg
1.75rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
V-Spacing XL
--zfb-vsp-xl
2.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
V-Spacing 2XL
--zfb-vsp-2xl
3.5rem
Font
20 tokensFont scale
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Scale XS
--zfb-scale-xs
0.75rem
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Scale SM
--zfb-scale-sm
0.875rem
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Scale Base
--zfb-scale-base
1rem
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Scale MD
--zfb-scale-md
1.125rem
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Scale LG
--zfb-scale-lg
1.25rem
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Scale XL
--zfb-scale-xl
1.75rem
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Scale 2XL
--zfb-scale-2xl
2.5rem
Font role
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Page title
--zfb-text-page-title
zfb-scale-xl
CSS: var(--zfb-scale-xl)
References: --zfb-scale-xl
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Section title
--zfb-text-section-title
zfb-scale-lg
CSS: var(--zfb-scale-lg)
References: --zfb-scale-lg
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Subsection title
--zfb-text-subsection-title
zfb-scale-md
CSS: var(--zfb-scale-md)
References: --zfb-scale-md
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Body
--zfb-text-body
zfb-scale-base
CSS: var(--zfb-scale-base)
References: --zfb-scale-base
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Helper
--zfb-text-helper
zfb-scale-sm
CSS: var(--zfb-scale-sm)
References: --zfb-scale-sm
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Annotation
--zfb-text-annotation
zfb-scale-xs
CSS: var(--zfb-scale-xs)
References: --zfb-scale-xs
Line height
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Tight
--zfb-leading-tight
1.2
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Body
--zfb-leading-body
1.6
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Relaxed
--zfb-leading-relaxed
1.8
Font weight
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Body
--zfb-weight-body
400
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Heading
--zfb-weight-heading
700
Font family
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Sans
--zfb-font-sans
system-ui, sans-serif
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Mono
--zfb-font-mono
ui-monospace, monospace
Size
5 tokensRadius
Small
--zfb-radius-sm
0.25rem
Medium
--zfb-radius-md
0.5rem
Large
--zfb-radius-lg
1rem
Transition
Fast
--zfb-transition-fast
120ms
Normal
--zfb-transition-normal
220ms
Palette
20 tokensBase
Base 0
--zfb-palette-base-0
oklch(98.5% .003 264)
Base 1
--zfb-palette-base-1
oklch(95% .004 264)
Base 2
--zfb-palette-base-2
oklch(88% .006 264)
Base 3
--zfb-palette-base-3
oklch(62% .010 264)
Base 4
--zfb-palette-base-4
oklch(38% .012 264)
Base 5
--zfb-palette-base-5
oklch(22% .014 264)
Base 6
--zfb-palette-base-6
oklch(13% .012 264)
Brand
Brand 0
--zfb-palette-brand-0
oklch(95% .03 250)
Brand 1
--zfb-palette-brand-1
oklch(80% .10 250)
Brand 2
--zfb-palette-brand-2
oklch(58% .19 250)
Brand 3
--zfb-palette-brand-3
oklch(45% .16 250)
Brand 4
--zfb-palette-brand-4
oklch(32% .11 250)
Accent
Accent 0
--zfb-palette-accent-0
oklch(95% .035 50)
Accent 1
--zfb-palette-accent-1
oklch(78% .12 50)
Accent 2
--zfb-palette-accent-2
oklch(62% .15 50)
Accent 3
--zfb-palette-accent-3
oklch(45% .12 50)
State
Success
--zfb-palette-state-0
oklch(64% .15 150)
Danger
--zfb-palette-state-1
oklch(62% .19 25)
Warning
--zfb-palette-state-2
oklch(76% .14 82)
Info
--zfb-palette-state-3
oklch(64% .14 245)
Color
4 tokensSemantic
Success
--zfb-color-success
state:state-0
CSS: var(--zfb-palette-state-0)
References: --zfb-palette-state-0
Danger
--zfb-color-danger
state:state-1
CSS: var(--zfb-palette-state-1)
References: --zfb-palette-state-1
Warning
--zfb-color-warning
state:state-2
CSS: var(--zfb-palette-state-2)
References: --zfb-palette-state-2
Info
--zfb-color-info
state:state-3
CSS: var(--zfb-palette-state-3)
References: --zfb-palette-state-3
Easing
2 tokensEasing
Standard
--zfb-easing-standard
cubic-bezier(0.2, 0, 0, 1)
Linear
--zfb-easing-linear
linear
Dark defaults
74 tokensDeclared defaults · dark mode
Color
11 tokensSemantic
Background
--zfb-bg
var(--zfb-palette-base-6)
References: --zfb-palette-base-6
Foreground
--zfb-fg
var(--zfb-palette-base-0)
References: --zfb-palette-base-0
Surface
--zfb-color-surface
var(--zfb-palette-base-5)
References: --zfb-palette-base-5
Border
--zfb-color-border
var(--zfb-palette-base-4)
References: --zfb-palette-base-4
Muted
--zfb-color-muted
var(--zfb-palette-base-2)
References: --zfb-palette-base-2
Code background
--zfb-color-code-bg
var(--zfb-palette-base-1)
References: --zfb-palette-base-1
Code foreground
--zfb-color-code-fg
var(--zfb-palette-base-6)
References: --zfb-palette-base-6
Primary
--zfb-color-primary
var(--zfb-palette-brand-1)
References: --zfb-palette-brand-1
Primary hover
--zfb-color-primary-hover
var(--zfb-palette-brand-0)
References: --zfb-palette-brand-0
Primary subtle
--zfb-color-primary-subtle
var(--zfb-palette-brand-4)
References: --zfb-palette-brand-4
Accent
--zfb-color-accent
var(--zfb-palette-accent-1)
References: --zfb-palette-accent-1
Spacing
12 tokensHorizontal spacing
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
H-Spacing XS
--zfb-hsp-xs
0.25rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
H-Spacing S
--zfb-hsp-sm
0.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
H-Spacing M
--zfb-hsp-md
1rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
H-Spacing L
--zfb-hsp-lg
1.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
H-Spacing XL
--zfb-hsp-xl
2rem
Vertical spacing
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
V-Spacing 2XS
--zfb-vsp-2xs
0.25rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
V-Spacing XS
--zfb-vsp-xs
0.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
V-Spacing S
--zfb-vsp-sm
0.75rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
V-Spacing M
--zfb-vsp-md
1rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
V-Spacing L
--zfb-vsp-lg
1.75rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
V-Spacing XL
--zfb-vsp-xl
2.5rem
Actual size · ticks every 8 CSS px · major ticks every 64 CSS px
0
V-Spacing 2XL
--zfb-vsp-2xl
3.5rem
Font
20 tokensFont scale
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Scale XS
--zfb-scale-xs
0.75rem
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Scale SM
--zfb-scale-sm
0.875rem
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Scale Base
--zfb-scale-base
1rem
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Scale MD
--zfb-scale-md
1.125rem
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Scale LG
--zfb-scale-lg
1.25rem
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Scale XL
--zfb-scale-xl
1.75rem
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Scale 2XL
--zfb-scale-2xl
2.5rem
Font role
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Page title
--zfb-text-page-title
zfb-scale-xl
CSS: var(--zfb-scale-xl)
References: --zfb-scale-xl
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Section title
--zfb-text-section-title
zfb-scale-lg
CSS: var(--zfb-scale-lg)
References: --zfb-scale-lg
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Subsection title
--zfb-text-subsection-title
zfb-scale-md
CSS: var(--zfb-scale-md)
References: --zfb-scale-md
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Body
--zfb-text-body
zfb-scale-base
CSS: var(--zfb-scale-base)
References: --zfb-scale-base
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Helper
--zfb-text-helper
zfb-scale-sm
CSS: var(--zfb-scale-sm)
References: --zfb-scale-sm
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Annotation
--zfb-text-annotation
zfb-scale-xs
CSS: var(--zfb-scale-xs)
References: --zfb-scale-xs
Line height
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Tight
--zfb-leading-tight
1.2
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Body
--zfb-leading-body
1.6
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Relaxed
--zfb-leading-relaxed
1.8
Font weight
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Body
--zfb-weight-body
400
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Heading
--zfb-weight-heading
700
Font family
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Sans
--zfb-font-sans
system-ui, sans-serif
Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789
Mono
--zfb-font-mono
ui-monospace, monospace
Size
5 tokensRadius
Small
--zfb-radius-sm
0.25rem
Medium
--zfb-radius-md
0.5rem
Large
--zfb-radius-lg
1rem
Transition
Fast
--zfb-transition-fast
120ms
Normal
--zfb-transition-normal
220ms
Palette
20 tokensBase
Base 0
--zfb-palette-base-0
oklch(98.5% .003 264)
Base 1
--zfb-palette-base-1
oklch(95% .004 264)
Base 2
--zfb-palette-base-2
oklch(88% .006 264)
Base 3
--zfb-palette-base-3
oklch(62% .010 264)
Base 4
--zfb-palette-base-4
oklch(38% .012 264)
Base 5
--zfb-palette-base-5
oklch(22% .014 264)
Base 6
--zfb-palette-base-6
oklch(13% .012 264)
Brand
Brand 0
--zfb-palette-brand-0
oklch(95% .03 250)
Brand 1
--zfb-palette-brand-1
oklch(80% .10 250)
Brand 2
--zfb-palette-brand-2
oklch(58% .19 250)
Brand 3
--zfb-palette-brand-3
oklch(45% .16 250)
Brand 4
--zfb-palette-brand-4
oklch(32% .11 250)
Accent
Accent 0
--zfb-palette-accent-0
oklch(95% .035 50)
Accent 1
--zfb-palette-accent-1
oklch(78% .12 50)
Accent 2
--zfb-palette-accent-2
oklch(62% .15 50)
Accent 3
--zfb-palette-accent-3
oklch(45% .12 50)
State
Success
--zfb-palette-state-0
oklch(64% .15 150)
Danger
--zfb-palette-state-1
oklch(62% .19 25)
Warning
--zfb-palette-state-2
oklch(76% .14 82)
Info
--zfb-palette-state-3
oklch(64% .14 245)
Color
4 tokensSemantic
Success
--zfb-color-success
state:state-0
CSS: var(--zfb-palette-state-0)
References: --zfb-palette-state-0
Danger
--zfb-color-danger
state:state-1
CSS: var(--zfb-palette-state-1)
References: --zfb-palette-state-1
Warning
--zfb-color-warning
state:state-2
CSS: var(--zfb-palette-state-2)
References: --zfb-palette-state-2
Info
--zfb-color-info
state:state-3
CSS: var(--zfb-palette-state-3)
References: --zfb-palette-state-3
Easing
2 tokensEasing
Standard
--zfb-easing-standard
cubic-bezier(0.2, 0, 0, 1)
Linear
--zfb-easing-linear
linear