Token-Browser

Erfolg Warnung Fehler Info

Overlay-Fläche (--radius-overlay + --elevation-overlay)

Alles hier nutzt ausschließlich semantische Tokens — der Theme-Umschalter färbt es live um, ohne Re-Compile.

Farben

Vorschau	CSS-Variable	Alias auf	Live-Wert
	--color-action-primary	{palette.green.500}
	--color-action-primary-hover	{palette.green.600}
	--color-action-primary-active	{palette.green.700}
	--color-action-on-primary	{palette.neutral.0}
	--color-action-secondary	{palette.neutral.100}
	--color-action-secondary-hover	{palette.neutral.200}
	--color-action-on-secondary	{palette.neutral.950}
	--color-action-danger	{palette.red.600}
	--color-action-danger-hover	{palette.red.700}
	--color-action-danger-active	{palette.red.800}
	--color-action-on-danger	{palette.neutral.0}
	--color-action-disabled	{palette.neutral.200}
	--color-action-on-disabled	{palette.neutral.500}
	--color-action-secondary-border	{overlay.transparent}
	--color-surface-page	{palette.neutral.50}
	--color-surface-default	{palette.neutral.0}
	--color-surface-raised	{palette.neutral.0}
	--color-surface-sunken	{palette.neutral.100}
	--color-surface-overlay	{palette.neutral.0}
	--color-surface-backdrop	{overlay.dim}
	--color-text-default	{palette.neutral.950}
	--color-text-muted	{palette.neutral.500}
	--color-text-inverse	{palette.neutral.0}
	--color-text-link	{palette.green.600}
	--color-text-disabled	{palette.neutral.400}
	--color-text-placeholder	{palette.neutral.400}
	--color-border-default	{palette.neutral.200}
	--color-border-subtle	{palette.neutral.100}
	--color-border-strong	{palette.neutral.400}
	--color-border-focus	{palette.green.400}
	--color-border-error	{palette.red.500}
	--color-status-success	{palette.green.600}
	--color-status-success-surface	{palette.green.50}
	--color-status-warning	{palette.amber.600}
	--color-status-warning-surface	{palette.amber.50}
	--color-status-danger	{palette.red.600}
	--color-status-danger-surface	{palette.red.50}
	--color-status-info	{palette.blue.600}
	--color-status-info-surface	{palette.blue.50}
	--color-band-dark	{palette.neutral.950}
	--color-band-dark-text	{palette.neutral.100}
	--color-band-dark-muted	{palette.neutral.400}
	--color-band-gray	{palette.neutral.50}
	--color-band-gray-text	{palette.neutral.900}
	--color-band-gray-muted	{palette.neutral.600}
	--color-accent	{palette.green.500}
	--color-sale	{palette.red.600}

Form

Vorschau	CSS-Variable	Alias auf
—	--form-background	{palette.neutral.0}
—	--form-background-disabled	{palette.neutral.100}
—	--form-border	{palette.neutral.300}
—	--form-border-hover	{palette.neutral.400}
—	--form-border-focus	{palette.green.500}
—	--form-placeholder	{palette.neutral.400}
—	--form-error	{palette.red.600}

Focus

Vorschau	CSS-Variable	Alias auf
—	--focus-ring-color	{palette.green.400}
—	--focus-ring-width	{border.emphasis}
—	--focus-ring-offset	{size.05}

Radien

Vorschau	CSS-Variable	Alias auf	Live-Wert
	--radius-control	{radius.md}
	--radius-surface	{radius.lg}
	--radius-overlay	{radius.xl}

Elevation

Vorschau	CSS-Variable	Alias auf	Live-Wert
	--elevation-control	{shadow.control}
	--elevation-raised	{shadow.raised}
	--elevation-overlay	{shadow.overlay-large}

Layer

Vorschau	CSS-Variable	Alias auf
—	--layer-dropdown	{z.dropdown}
—	--layer-window	{z.window}
—	--layer-modal	{z.modal}
—	--layer-toast	{z.toast}

State

Vorschau	CSS-Variable	Alias auf	Live-Wert
—	--state-disabled-opacity	{opacity.disabled}

Schriftfamilien

Vorschau	CSS-Variable	Alias auf
AaBbCc 012	--font-family-default	{font.sans}
AaBbCc 012	--font-family-mono	{font.mono}
AaBbCc 012	--font-family-display	{font.sans}
AaBbCc 012	--font-size-display	{text.3xl}
AaBbCc 012	--font-size-hero	{text.6xl}
AaBbCc 012	--font-leading-display	{leading.tight}

Layout

Vorschau	CSS-Variable	Alias auf	Live-Wert
—	--layout-container	{container.2xl}
—	--layout-content	{container.xl}

Palette 93

Vorschau	CSS-Variable	Wert
	--palette-green-50	#e6f4ee
	--palette-green-100	#c4e6d6
	--palette-green-200	#9dd6bc
	--palette-green-300	#6ec29d
	--palette-green-400	#3fa87e
	--palette-green-500	#16895f
	--palette-green-600	#11744f
	--palette-green-700	#0d5e40
	--palette-green-800	#094830
	--palette-green-900	#063321
	--palette-neutral-0	#ffffff
	--palette-neutral-50	#f5f7f6
	--palette-neutral-100	#e9edeb
	--palette-neutral-200	#d5dcd8
	--palette-neutral-300	#b8c2bd
	--palette-neutral-400	#93a29a
	--palette-neutral-500	#71817a
	--palette-neutral-600	#55645d
	--palette-neutral-700	#3d4a44
	--palette-neutral-800	#29332e
	--palette-neutral-900	#1c2420
	--palette-neutral-950	#17201d
	--palette-neutral-1000	#0d1210
	--palette-violet-50	#f0ebff
	--palette-violet-100	#ddd1ff
	--palette-violet-200	#c3adff
	--palette-violet-300	#a583ff
	--palette-violet-400	#8a61ff
	--palette-violet-500	#7148ff
	--palette-violet-600	#5c35e0
	--palette-violet-700	#4827b8
	--palette-violet-800	#351b8f
	--palette-violet-900	#241166
	--palette-red-50	#fdecea
	--palette-red-100	#fad3cf
	--palette-red-200	#f5b0a9
	--palette-red-300	#ee8779
	--palette-red-400	#e15c49
	--palette-red-500	#d3392c
	--palette-red-600	#b42d22
	--palette-red-700	#8f231a
	--palette-red-800	#661712
	--palette-red-900	#380d08
	--palette-amber-50	#fdf5e0
	--palette-amber-100	#faeac0
	--palette-amber-200	#f3d98e
	--palette-amber-300	#e9c55c
	--palette-amber-400	#dbb43c
	--palette-amber-500	#c9a227
	--palette-amber-600	#a8861d
	--palette-amber-700	#816614
	--palette-amber-800	#5a4710
	--palette-amber-900	#33270a
	--palette-blue-50	#e8f1fb
	--palette-blue-100	#cfe2f6
	--palette-blue-200	#a9cbee
	--palette-blue-300	#7fb0e2
	--palette-blue-400	#548fd2
	--palette-blue-500	#2f6fbd
	--palette-blue-600	#275da0
	--palette-blue-700	#1e4a82
	--palette-blue-800	#15355d
	--palette-blue-900	#0c1f38
	--palette-orange-50	#fdf0e7
	--palette-orange-100	#fadcc7
	--palette-orange-200	#f5c29a
	--palette-orange-300	#eda368
	--palette-orange-400	#e28540
	--palette-orange-500	#d3691f
	--palette-orange-600	#b25618
	--palette-orange-700	#8c4413
	--palette-orange-800	#66310e
	--palette-orange-900	#401f09
	--palette-teal-50	#e6f6f4
	--palette-teal-100	#c2e9e4
	--palette-teal-200	#96d8d0
	--palette-teal-300	#66c2b8
	--palette-teal-400	#3aa89d
	--palette-teal-500	#1a8c81
	--palette-teal-600	#14766d
	--palette-teal-700	#0f5f58
	--palette-teal-800	#0a4842
	--palette-teal-900	#06312d
	--palette-pink-50	#fdecf3
	--palette-pink-100	#f9cfe0
	--palette-pink-200	#f3a8c7
	--palette-pink-300	#e97ba9
	--palette-pink-400	#dc538c
	--palette-pink-500	#c93370
	--palette-pink-600	#ab285e
	--palette-pink-700	#871f4a
	--palette-pink-800	#631636
	--palette-pink-900	#400e23

Größen 16

Vorschau	CSS-Variable	Wert
	--size-0	0
	--size-1	4px
	--size-2	8px
	--size-3	12px
	--size-4	16px
	--size-5	20px
	--size-6	24px
	--size-8	32px
	--size-10	40px
	--size-12	48px
	--size-16	64px
	--size-20	80px
	--size-24	96px
	--size-32	128px
	--size-40	160px
	--size-05	2px

Border 3

Vorschau	CSS-Variable	Wert
—	--border-hairline	1px
—	--border-emphasis	2px
—	--border-thick	4px

Container 5

Vorschau	CSS-Variable	Wert
—	--container-sm	480px
—	--container-md	640px
—	--container-lg	800px
—	--container-xl	1080px
—	--container-2xl	1280px

Radien 6

Vorschau	CSS-Variable	Wert
	--radius-none	0
	--radius-sm	4px
	--radius-md	8px
	--radius-lg	12px
	--radius-xl	16px
	--radius-full	999px

Schatten 5

Vorschau	CSS-Variable	Wert
	--shadow-control	0 1px 2px rgba(13, 18, 16, 0.10)
	--shadow-raised	0 2px 8px rgba(13, 18, 16, 0.14)
	--shadow-overlay-small	0 8px 24px rgba(13, 18, 16, 0.20)
	--shadow-overlay-large	0 16px 48px rgba(13, 18, 16, 0.28)
	--shadow-inset	inset 0 1px 2px rgba(13, 18, 16, 0.08)

Overlay 2

Vorschau	CSS-Variable	Wert
—	--overlay-dim	rgba(13, 18, 16, 0.55)
—	--overlay-transparent	transparent

Schriftfamilien 2

Vorschau	CSS-Variable	Wert
AaBbCc 012	--font-sans	system-ui, -apple-system, "Segoe UI", sans-serif
AaBbCc 012	--font-mono	ui-monospace, "JetBrains Mono", Consolas, monospace

Schriftgrößen 11

Vorschau	CSS-Variable	Wert
Ag	--text-xs	12px
Ag	--text-sm	13px
Ag	--text-md	14px
Ag	--text-lg	16px
Ag	--text-xl	20px
Ag	--text-2xl	26px
Ag	--text-3xl	32px
Ag	--text-4xl	40px
Ag	--text-5xl	48px
Ag	--text-6xl	64px
Ag	--text-reading	18px

Schriftgewichte 5

Vorschau	CSS-Variable	Wert
Aa	--weight-light	300
Aa	--weight-regular	400
Aa	--weight-medium	500
Aa	--weight-semibold	600
Aa	--weight-bold	700

Zeilenhöhen 3

Vorschau	CSS-Variable	Wert
—	--leading-tight	1.25
—	--leading-base	1.55
—	--leading-loose	1.7

Tracking 3

Vorschau	CSS-Variable	Wert
—	--tracking-tight	-0.01em
—	--tracking-base	0
—	--tracking-wide	0.04em

Z 6

Vorschau	CSS-Variable	Wert
—	--z-base	0
—	--z-dropdown	1000
—	--z-sticky	1100
—	--z-window	1200
—	--z-modal	1300
—	--z-toast	1400

Opacity 3

Vorschau	CSS-Variable	Wert
—	--opacity-disabled	0.5
—	--opacity-muted	0.72
—	--opacity-backdrop	0.55

Breakpoint 4

Vorschau	CSS-Variable	Wert
—	--breakpoint-sm	640px
—	--breakpoint-md	768px
—	--breakpoint-lg	1024px
—	--breakpoint-xl	1280px

Blur 3

Vorschau	CSS-Variable	Wert
—	--blur-sm	4px
—	--blur-md	8px
—	--blur-lg	16px

Icon 3

Vorschau	CSS-Variable	Wert
—	--icon-sm	16px
—	--icon-md	20px
—	--icon-lg	24px

Dauer 3

Vorschau	CSS-Variable	Wert
—	--duration-fast	120ms
—	--duration-base	200ms
—	--duration-slow	320ms

Easing 3

Vorschau	CSS-Variable	Wert
—	--easing-standard	cubic-bezier(0.2, 0, 0, 1)
—	--easing-in	cubic-bezier(0.4, 0, 1, 1)
—	--easing-out	cubic-bezier(0, 0, 0.2, 1)

Komponenten-Token-Demo (3. Ebene, live)

Semantische Tokens (2. Ebene)

Farben

Form

Focus

Radien

Elevation

Layer

State

Schriftfamilien

Layout

Referenz-Tokens (1. Ebene)

Palette 93

Größen 16

Border 3

Container 5

Radien 6

Schatten 5

Overlay 2

Schriftfamilien 2

Schriftgrößen 11

Schriftgewichte 5

Zeilenhöhen 3

Tracking 3

Z 6

Opacity 3

Breakpoint 4

Blur 3

Icon 3

Dauer 3

Easing 3