Token-Browser

179 Referenz-Tokens · 89 semantische Tokens · 11 Themes · generiert 2026-08-11T11:31:55.925Z · ← Übersicht

Theme:

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

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.

Semantische Tokens (2. Ebene)

Farben

VorschauCSS-VariableAlias aufLive-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-surface-inverse {palette.neutral.900}
--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}
--color-code-surface {palette.blue.900}
--color-code-surface-raised {palette.blue.800}
--color-code-border {palette.blue.800}
--color-code-text {palette.neutral.100}
--color-code-muted {palette.blue.300}
--color-code-line-number {palette.blue.400}
--color-code-keyword {palette.pink.400}
--color-code-string {palette.green.300}
--color-code-number {palette.amber.300}
--color-code-property {palette.teal.300}
--color-code-comment {palette.blue.400}
--color-code-variable {palette.violet.300}

Form

VorschauCSS-VariableAlias aufLive-Wert
— --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

VorschauCSS-VariableAlias aufLive-Wert
— --focus-ring-color {palette.green.400}
— --focus-ring-width {border.emphasis}
— --focus-ring-offset {size.05}

Radien

VorschauCSS-VariableAlias aufLive-Wert
--radius-control {radius.md}
--radius-surface {radius.lg}
--radius-overlay {radius.xl}

Elevation

VorschauCSS-VariableAlias aufLive-Wert
--elevation-control {shadow.control}
--elevation-raised {shadow.raised}
--elevation-overlay {shadow.overlay-large}

Layer

VorschauCSS-VariableAlias aufLive-Wert
— --layer-dropdown {z.dropdown}
— --layer-window {z.window}
— --layer-modal {z.modal}
— --layer-toast {z.toast}

State

VorschauCSS-VariableAlias aufLive-Wert
— --state-disabled-opacity {opacity.disabled}

Schriftfamilien

VorschauCSS-VariableAlias aufLive-Wert
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

VorschauCSS-VariableAlias aufLive-Wert
— --layout-container {container.2xl}
— --layout-content {container.xl}

Referenz-Tokens (1. Ebene)

Palette 93

VorschauCSS-VariableWert
--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

VorschauCSS-VariableWert
--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

VorschauCSS-VariableWert
— --border-hairline 1px
— --border-emphasis 2px
— --border-thick 4px

Container 5

VorschauCSS-VariableWert
— --container-sm 480px
— --container-md 640px
— --container-lg 800px
— --container-xl 1080px
— --container-2xl 1280px

Radien 6

VorschauCSS-VariableWert
--radius-none 0
--radius-sm 4px
--radius-md 8px
--radius-lg 12px
--radius-xl 16px
--radius-full 999px

Schatten 5

VorschauCSS-VariableWert
--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

VorschauCSS-VariableWert
— --overlay-dim rgba(13, 18, 16, 0.55)
— --overlay-transparent transparent

Schriftfamilien 2

VorschauCSS-VariableWert
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

VorschauCSS-VariableWert
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

VorschauCSS-VariableWert
Aa --weight-light 300
Aa --weight-regular 400
Aa --weight-medium 500
Aa --weight-semibold 600
Aa --weight-bold 700

Zeilenhöhen 3

VorschauCSS-VariableWert
— --leading-tight 1.25
— --leading-base 1.55
— --leading-loose 1.7

Tracking 3

VorschauCSS-VariableWert
— --tracking-tight -0.01em
— --tracking-base 0
— --tracking-wide 0.04em

Z 6

VorschauCSS-VariableWert
— --z-base 0
— --z-dropdown 1000
— --z-sticky 1100
— --z-window 1200
— --z-modal 1300
— --z-toast 1400

Opacity 3

VorschauCSS-VariableWert
— --opacity-disabled 0.5
— --opacity-muted 0.72
— --opacity-backdrop 0.55

Breakpoint 4

VorschauCSS-VariableWert
— --breakpoint-sm 640px
— --breakpoint-md 768px
— --breakpoint-lg 1024px
— --breakpoint-xl 1280px

Blur 3

VorschauCSS-VariableWert
— --blur-sm 4px
— --blur-md 8px
— --blur-lg 16px

Icon 3

VorschauCSS-VariableWert
— --icon-sm 16px
— --icon-md 20px
— --icon-lg 24px

Dauer 3

VorschauCSS-VariableWert
— --duration-fast 120ms
— --duration-base 200ms
— --duration-slow 320ms

Easing 3

VorschauCSS-VariableWert
— --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)

Konvention: invisible/definitions/foundations/README.md · Quelle: tokens.reference.json / tokens.semantic.json / themes/*.json