Lebende Skin-Referenz

Diese Seite wird aus demselben deklarierten Skin sowie denselben Vertragen und Manifesten wie die Website erstellt.

Build-Provenienz

Diese Werte kennzeichnen den genauen deklarierten Zustand, den diese Seite darstellt.

Schemaversion: 2
Marken-Hash: 456eb865f104d2e4d1580ddc3806ddefbb5fd1f66f1dd3fc3d5e32cecc48207b
Markenvollstandigkeit: complete
Markenlucken: 0
Zuletzt gepruft von: agent
Prufdatum: 2026-07-30

Identitatseingaben

Marken- und Verhaltenseingaben behalten ihre Herkunft, damit akzeptierte und berechnete Entscheidungen sichtbar bleiben.

Identitatseingaben
Pfad	Wert	Quelle
`identity.color.accentHue`	`238`	declared
`identity.color.contrast`	`normal`	declared
`identity.color.hue`	`58`	declared
`identity.color.neutralTint`	`0.09`	declared
`identity.elevation.style`	`soft`	declared
`identity.motion.energy`	`standard`	declared
`identity.shape.roundness`	`0.42`	declared
`identity.space.density`	`spacious`	declared
`identity.stage.default`	`light`	declared
`identity.type.baseSize.max`	`1.125rem`	declared
`identity.type.baseSize.min`	`1rem`	declared
`identity.type.primaryFamily.fallbackStack`	`old-style`	declared
`identity.type.primaryFamily.family`	`Georgia`	declared
`identity.type.primaryFamily.variable`	`false`	declared
`identity.type.primaryFamily.weights`	`[400,500,700]`	declared
`identity.type.ratio.max`	`1.4`	declared
`identity.type.ratio.min`	`1.25`	declared
`identity.type.secondaryFamily.fallbackStack`	`neo-grotesque`	declared
`identity.type.secondaryFamily.family`	`system-ui`	declared
`identity.type.secondaryFamily.variable`	`false`	declared
`identity.type.secondaryFamily.weights`	`[400,500,650]`	declared
`identity.type.tertiaryFamily.fallbackStack`	`monospace-code`	declared
`identity.type.tertiaryFamily.family`	`ui-monospace`	declared
`identity.type.tertiaryFamily.variable`	`false`	declared
`identity.type.tertiaryFamily.weights`	`[400]`	declared

Farbrampen

Jede deklarierte Stufe fur beide Farbmodi und alle vier Rampenfamilien ist unten aufgefuhrt.

dark/accent
Pfad	Wert	Quelle
`ramps.dark.accent.1`	`oklch(0.150000 0.002371 238.000)`	computed
`ramps.dark.accent.2`	`oklch(0.194444 0.002698 238.364)`	computed
`ramps.dark.accent.3`	`oklch(0.238889 0.002816 238.727)`	computed
`ramps.dark.accent.4`	`oklch(0.305556 0.002075 239.091)`	computed
`ramps.dark.accent.5`	`oklch(0.350000 0.001126 239.455)`	computed
`ramps.dark.accent.6`	`oklch(0.450000 0.019643 239.818)`	computed
`ramps.dark.accent.7`	`oklch(0.550000 0.046968 240.182)`	computed
`ramps.dark.accent.8`	`oklch(0.650000 0.087768 240.545)`	computed
`ramps.dark.accent.9`	`oklch(0.720000 0.111193 240.909)`	computed
`ramps.dark.accent.10`	`oklch(0.780000 0.084729 241.273)`	computed
`ramps.dark.accent.11`	`oklch(0.870000 0.037227 241.636)`	computed
`ramps.dark.accent.12`	`oklch(0.940000 0.009073 242.000)`	computed

dark/brand
Pfad	Wert	Quelle
`ramps.dark.brand.1`	`oklch(0.150000 0.003139 58.000)`	computed
`ramps.dark.brand.2`	`oklch(0.194444 0.003540 57.636)`	computed
`ramps.dark.brand.3`	`oklch(0.238889 0.003837 57.273)`	computed
`ramps.dark.brand.4`	`oklch(0.305556 0.002686 56.909)`	computed
`ramps.dark.brand.5`	`oklch(0.350000 0.001325 56.545)`	computed
`ramps.dark.brand.6`	`oklch(0.450000 0.026599 56.182)`	computed
`ramps.dark.brand.7`	`oklch(0.550000 0.065861 55.818)`	computed
`ramps.dark.brand.8`	`oklch(0.650000 0.126279 55.455)`	computed
`ramps.dark.brand.9`	`oklch(0.720000 0.136000 55.091)`	computed
`ramps.dark.brand.10`	`oklch(0.780000 0.105960 54.727)`	computed
`ramps.dark.brand.11`	`oklch(0.870000 0.046622 54.364)`	computed
`ramps.dark.brand.12`	`oklch(0.940000 0.011302 54.000)`	computed

dark/neutral
Pfad	Wert	Quelle
`ramps.dark.neutral.1`	`oklch(0.150000 0.001765 38.000)`	computed
`ramps.dark.neutral.2`	`oklch(0.194444 0.001678 38.182)`	computed
`ramps.dark.neutral.3`	`oklch(0.238889 0.001441 38.364)`	computed
`ramps.dark.neutral.4`	`oklch(0.305556 0.000796 38.545)`	computed
`ramps.dark.neutral.5`	`oklch(0.350000 0.000378 38.727)`	computed
`ramps.dark.neutral.6`	`oklch(0.450000 0.005178 38.909)`	computed
`ramps.dark.neutral.7`	`oklch(0.550000 0.010064 39.091)`	computed
`ramps.dark.neutral.8`	`oklch(0.650000 0.015414 39.273)`	computed
`ramps.dark.neutral.9`	`oklch(0.720000 0.018236 39.455)`	computed
`ramps.dark.neutral.10`	`oklch(0.780000 0.013854 39.636)`	computed
`ramps.dark.neutral.11`	`oklch(0.870000 0.008740 39.818)`	computed
`ramps.dark.neutral.12`	`oklch(0.940000 0.004003 40.000)`	computed

dark/tint
Pfad	Wert	Quelle
`ramps.dark.tint.1`	`oklch(0.150000 0.001950 42.738)`	computed
`ramps.dark.tint.2`	`oklch(0.194444 0.001935 43.426)`	computed
`ramps.dark.tint.3`	`oklch(0.238889 0.001779 44.382)`	computed
`ramps.dark.tint.4`	`oklch(0.305556 0.001067 45.378)`	computed
`ramps.dark.tint.5`	`oklch(0.350000 0.000514 45.518)`	computed
`ramps.dark.tint.6`	`oklch(0.450000 0.008296 47.119)`	computed
`ramps.dark.tint.7`	`oklch(0.550000 0.018238 48.060)`	computed
`ramps.dark.tint.8`	`oklch(0.650000 0.031736 48.848)`	computed
`ramps.dark.tint.9`	`oklch(0.720000 0.035573 48.346)`	computed
`ramps.dark.tint.10`	`oklch(0.780000 0.027435 48.311)`	computed
`ramps.dark.tint.11`	`oklch(0.870000 0.014306 46.870)`	computed
`ramps.dark.tint.12`	`oklch(0.940000 0.005063 44.645)`	computed

light/accent
Pfad	Wert	Quelle
`ramps.light.accent.1`	`oklch(0.940000 0.002790 238.000)`	computed
`ramps.light.accent.2`	`oklch(0.951111 0.003174 238.364)`	computed
`ramps.light.accent.3`	`oklch(0.962222 0.003313 238.727)`	computed
`ramps.light.accent.4`	`oklch(0.978889 0.002441 239.091)`	computed
`ramps.light.accent.5`	`oklch(0.990000 0.001325 239.455)`	computed
`ramps.light.accent.6`	`oklch(0.900000 0.023110 239.818)`	computed
`ramps.light.accent.7`	`oklch(0.820000 0.055256 240.182)`	computed
`ramps.light.accent.8`	`oklch(0.740000 0.103256 240.545)`	computed
`ramps.light.accent.9`	`oklch(0.650000 0.130815 240.909)`	computed
`ramps.light.accent.10`	`oklch(0.550000 0.099681 241.273)`	computed
`ramps.light.accent.11`	`oklch(0.400000 0.043796 241.636)`	computed
`ramps.light.accent.12`	`oklch(0.220000 0.010674 242.000)`	computed

light/brand
Pfad	Wert	Quelle
`ramps.light.brand.1`	`oklch(0.940000 0.003693 58.000)`	computed
`ramps.light.brand.2`	`oklch(0.951111 0.004165 57.636)`	computed
`ramps.light.brand.3`	`oklch(0.962222 0.004514 57.273)`	computed
`ramps.light.brand.4`	`oklch(0.978889 0.003160 56.909)`	computed
`ramps.light.brand.5`	`oklch(0.990000 0.001559 56.545)`	computed
`ramps.light.brand.6`	`oklch(0.900000 0.031293 56.182)`	computed
`ramps.light.brand.7`	`oklch(0.820000 0.077483 55.818)`	computed
`ramps.light.brand.8`	`oklch(0.740000 0.148564 55.455)`	computed
`ramps.light.brand.9`	`oklch(0.650000 0.160000 55.091)`	computed
`ramps.light.brand.10`	`oklch(0.550000 0.124659 54.727)`	computed
`ramps.light.brand.11`	`oklch(0.400000 0.054849 54.364)`	computed
`ramps.light.brand.12`	`oklch(0.220000 0.013296 54.000)`	computed

light/neutral
Pfad	Wert	Quelle
`ramps.light.neutral.1`	`oklch(0.940000 0.002077 38.000)`	computed
`ramps.light.neutral.2`	`oklch(0.951111 0.001974 38.182)`	computed
`ramps.light.neutral.3`	`oklch(0.962222 0.001695 38.364)`	computed
`ramps.light.neutral.4`	`oklch(0.978889 0.000937 38.545)`	computed
`ramps.light.neutral.5`	`oklch(0.990000 0.000445 38.727)`	computed
`ramps.light.neutral.6`	`oklch(0.900000 0.006092 38.909)`	computed
`ramps.light.neutral.7`	`oklch(0.820000 0.011840 39.091)`	computed
`ramps.light.neutral.8`	`oklch(0.740000 0.018134 39.273)`	computed
`ramps.light.neutral.9`	`oklch(0.650000 0.021454 39.455)`	computed
`ramps.light.neutral.10`	`oklch(0.550000 0.016299 39.636)`	computed
`ramps.light.neutral.11`	`oklch(0.400000 0.010282 39.818)`	computed
`ramps.light.neutral.12`	`oklch(0.220000 0.004709 40.000)`	computed

light/tint
Pfad	Wert	Quelle
`ramps.light.tint.1`	`oklch(0.940000 0.002294 42.738)`	computed
`ramps.light.tint.2`	`oklch(0.951111 0.002277 43.426)`	computed
`ramps.light.tint.3`	`oklch(0.962222 0.002093 44.382)`	computed
`ramps.light.tint.4`	`oklch(0.978889 0.001255 45.378)`	computed
`ramps.light.tint.5`	`oklch(0.990000 0.000605 45.518)`	computed
`ramps.light.tint.6`	`oklch(0.900000 0.009760 47.119)`	computed
`ramps.light.tint.7`	`oklch(0.820000 0.021457 48.060)`	computed
`ramps.light.tint.8`	`oklch(0.740000 0.037336 48.848)`	computed
`ramps.light.tint.9`	`oklch(0.650000 0.041851 48.346)`	computed
`ramps.light.tint.10`	`oklch(0.550000 0.032277 48.311)`	computed
`ramps.light.tint.11`	`oklch(0.400000 0.016831 46.870)`	computed
`ramps.light.tint.12`	`oklch(0.220000 0.005957 44.645)`	computed

Designskalen

Typografie, Abstand, Rahmen, Radius, Tiefe und Bewegung werden direkt aus dem Skin projiziert.

border
Pfad	Wert	Quelle
`scales.border.styles.default`	`solid`	manual
`scales.border.widths.blockquote`	`0.25rem`	manual
`scales.border.widths.default`	`0.0625rem`	manual
`scales.border.widths.focus`	`0.1875rem`	manual

elevation
Pfad	Wert	Quelle
`scales.elevation.levels.1`	`0 0.0625rem 0.1875rem -0.0625rem oklch(0.2 0.04 58 / 0.1), 0 0.25rem 0.75rem -0.25rem oklch(0.2 0.04 58 / 0.08)`	computed
`scales.elevation.levels.2`	`0 0.125rem 0.375rem -0.125rem oklch(0.2 0.04 58 / 0.12), 0 0.5rem 1.5rem -0.375rem oklch(0.2 0.04 58 / 0.1)`	computed
`scales.elevation.levels.3`	`0 0.25rem 0.75rem -0.25rem oklch(0.2 0.04 58 / 0.14), 0 1rem 2.5rem -0.5rem oklch(0.2 0.04 58 / 0.12)`	computed
`scales.elevation.shadowColor`	`oklch(0.2 0.04 58)`	computed

motion
Pfad	Wert	Quelle
`scales.motion.durations.base`	`180ms`	computed
`scales.motion.durations.fast`	`120ms`	computed
`scales.motion.durations.reduced`	`0ms`	computed
`scales.motion.durations.slow`	`280ms`	computed
`scales.motion.easings.entrance`	`cubic-bezier(0, 0, 0, 1)`	computed
`scales.motion.easings.exit`	`cubic-bezier(0.3, 0, 1, 1)`	computed
`scales.motion.easings.standard`	`cubic-bezier(0.2, 0, 0, 1)`	computed

radius
Pfad	Wert	Quelle
`scales.radius.steps.default`	`0.375rem`	computed
`scales.radius.steps.large`	`1.25rem`	computed
`scales.radius.steps.pill`	`999px`	manual
`scales.radius.steps.small`	`0.375rem`	computed

space
Pfad	Wert	Quelle
`scales.space.density`	`1.15`	computed
`scales.space.steps.2xl`	`3.8813rem`	computed
`scales.space.steps.2xs`	`0.2875rem`	computed
`scales.space.steps.3xl`	`5.8219rem`	computed
`scales.space.steps.lg`	`1.725rem`	computed
`scales.space.steps.md`	`1.15rem`	computed
`scales.space.steps.sectionBlock`	`clamp(2.5875rem, 2.0812rem + 2.2501cqi, 3.8813rem)`	accepted
`scales.space.steps.sm`	`0.8625rem`	computed
`scales.space.steps.xl`	`2.5875rem`	computed
`scales.space.steps.xs`	`0.575rem`	computed

type
Pfad	Wert	Quelle
`scales.type.baseSize.max`	`1.125rem`	computed
`scales.type.baseSize.min`	`1rem`	computed
`scales.type.ratio.max`	`1.4`	computed
`scales.type.ratio.min`	`1.25`	computed
`scales.type.steps.base`	`clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem)`	computed
`scales.type.steps.h1`	`clamp(2.4414rem, 1.7056rem + 3.2703vw, 4.3218rem)`	computed
`scales.type.steps.h2`	`clamp(1.7469rem, 1.4096rem + 1.4993vw, 2.609rem)`	computed
`scales.type.steps.h3`	`clamp(1.3975rem, 1.2151rem + 0.8106vw, 1.8636rem)`	computed
`scales.type.steps.h4`	`clamp(1.25rem, 1.1228rem + 0.5652vw, 1.575rem)`	computed
`scales.type.steps.lead`	`clamp(1.25rem, 1.1228rem + 0.5652vw, 1.575rem)`	computed
`scales.type.steps.sm`	`clamp(0.9457rem, 0.9111rem + 0.1539vw, 1.0342rem)`	computed

Oberflachenkoordinaten

Jede Kombination aus Modus, Tiefe, Hintergrund und semantischer Rolle besitzt eine verbindliche Zeile.

Oberflachenkoordinaten
Pfad	Wert	Quelle	Referenz
`surfaces.dark.base.bold.background`	`oklch(0.150000 0.003139 58.000)`	computed	`ramps.dark.brand.1`
`surfaces.dark.base.bold.backgroundMuted`	`oklch(0.194444 0.003540 57.636)`	computed	`ramps.dark.brand.2`
`surfaces.dark.base.bold.backgroundStrong`	`oklch(0.238889 0.003837 57.273)`	computed	`ramps.dark.brand.3`
`surfaces.dark.base.bold.border`	`oklch(0.150000 0.001765 38.000)`	computed	`ramps.dark.neutral.1`
`surfaces.dark.base.bold.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.base.bold.focus`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.base.bold.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.base.bold.interactive`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.base.bold.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.base.bold.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.base.bold.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.base.bold.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.base.bold.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.base.bold.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.base.branded.background`	`oklch(0.150000 0.003139 58.000)`	computed	`ramps.dark.brand.1`
`surfaces.dark.base.branded.backgroundMuted`	`oklch(0.194444 0.003540 57.636)`	computed	`ramps.dark.brand.2`
`surfaces.dark.base.branded.backgroundStrong`	`oklch(0.238889 0.003837 57.273)`	computed	`ramps.dark.brand.3`
`surfaces.dark.base.branded.border`	`oklch(0.150000 0.001765 38.000)`	computed	`ramps.dark.neutral.1`
`surfaces.dark.base.branded.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.base.branded.focus`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.base.branded.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.base.branded.interactive`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.base.branded.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.base.branded.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.base.branded.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.base.branded.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.base.branded.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.base.branded.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.base.neutral.background`	`oklch(0.150000 0.001765 38.000)`	computed	`ramps.dark.neutral.1`
`surfaces.dark.base.neutral.backgroundMuted`	`oklch(0.194444 0.001678 38.182)`	computed	`ramps.dark.neutral.2`
`surfaces.dark.base.neutral.backgroundStrong`	`oklch(0.238889 0.001441 38.364)`	computed	`ramps.dark.neutral.3`
`surfaces.dark.base.neutral.border`	`oklch(0.150000 0.001765 38.000)`	computed	`ramps.dark.neutral.1`
`surfaces.dark.base.neutral.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.base.neutral.focus`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.base.neutral.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.base.neutral.interactive`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.base.neutral.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.base.neutral.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.base.neutral.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.base.neutral.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.base.neutral.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.base.neutral.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.base.tinted.background`	`oklch(0.150000 0.001950 42.738)`	computed	`ramps.dark.tint.1`
`surfaces.dark.base.tinted.backgroundMuted`	`oklch(0.194444 0.001935 43.426)`	computed	`ramps.dark.tint.2`
`surfaces.dark.base.tinted.backgroundStrong`	`oklch(0.238889 0.001779 44.382)`	computed	`ramps.dark.tint.3`
`surfaces.dark.base.tinted.border`	`oklch(0.150000 0.001765 38.000)`	computed	`ramps.dark.neutral.1`
`surfaces.dark.base.tinted.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.base.tinted.focus`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.base.tinted.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.base.tinted.interactive`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.base.tinted.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.base.tinted.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.base.tinted.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.base.tinted.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.base.tinted.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.base.tinted.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.high.bold.background`	`oklch(0.305556 0.002686 56.909)`	computed	`ramps.dark.brand.4`
`surfaces.dark.high.bold.backgroundMuted`	`oklch(0.350000 0.001325 56.545)`	computed	`ramps.dark.brand.5`
`surfaces.dark.high.bold.backgroundStrong`	`oklch(0.350000 0.001325 56.545)`	computed	`ramps.dark.brand.5`
`surfaces.dark.high.bold.border`	`oklch(0.238889 0.001441 38.364)`	computed	`ramps.dark.neutral.3`
`surfaces.dark.high.bold.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.high.bold.focus`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.high.bold.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.high.bold.interactive`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.high.bold.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.high.bold.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.high.bold.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.high.bold.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.high.bold.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.high.bold.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.high.branded.background`	`oklch(0.305556 0.002686 56.909)`	computed	`ramps.dark.brand.4`
`surfaces.dark.high.branded.backgroundMuted`	`oklch(0.350000 0.001325 56.545)`	computed	`ramps.dark.brand.5`
`surfaces.dark.high.branded.backgroundStrong`	`oklch(0.350000 0.001325 56.545)`	computed	`ramps.dark.brand.5`
`surfaces.dark.high.branded.border`	`oklch(0.238889 0.001441 38.364)`	computed	`ramps.dark.neutral.3`
`surfaces.dark.high.branded.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.high.branded.focus`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.high.branded.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.high.branded.interactive`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.high.branded.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.high.branded.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.high.branded.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.high.branded.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.high.branded.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.high.branded.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.high.neutral.background`	`oklch(0.305556 0.000796 38.545)`	computed	`ramps.dark.neutral.4`
`surfaces.dark.high.neutral.backgroundMuted`	`oklch(0.350000 0.000378 38.727)`	computed	`ramps.dark.neutral.5`
`surfaces.dark.high.neutral.backgroundStrong`	`oklch(0.350000 0.000378 38.727)`	computed	`ramps.dark.neutral.5`
`surfaces.dark.high.neutral.border`	`oklch(0.238889 0.001441 38.364)`	computed	`ramps.dark.neutral.3`
`surfaces.dark.high.neutral.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.high.neutral.focus`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.high.neutral.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.high.neutral.interactive`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.high.neutral.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.high.neutral.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.high.neutral.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.high.neutral.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.high.neutral.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.high.neutral.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.high.tinted.background`	`oklch(0.305556 0.001067 45.378)`	computed	`ramps.dark.tint.4`
`surfaces.dark.high.tinted.backgroundMuted`	`oklch(0.350000 0.000514 45.518)`	computed	`ramps.dark.tint.5`
`surfaces.dark.high.tinted.backgroundStrong`	`oklch(0.350000 0.000514 45.518)`	computed	`ramps.dark.tint.5`
`surfaces.dark.high.tinted.border`	`oklch(0.238889 0.001441 38.364)`	computed	`ramps.dark.neutral.3`
`surfaces.dark.high.tinted.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.high.tinted.focus`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.high.tinted.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.high.tinted.interactive`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.high.tinted.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.high.tinted.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.high.tinted.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.high.tinted.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.high.tinted.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.high.tinted.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.highest.bold.background`	`oklch(0.350000 0.001325 56.545)`	computed	`ramps.dark.brand.5`
`surfaces.dark.highest.bold.backgroundMuted`	`oklch(0.350000 0.001325 56.545)`	computed	`ramps.dark.brand.5`
`surfaces.dark.highest.bold.backgroundStrong`	`oklch(0.350000 0.001325 56.545)`	computed	`ramps.dark.brand.5`
`surfaces.dark.highest.bold.border`	`oklch(0.305556 0.000796 38.545)`	computed	`ramps.dark.neutral.4`
`surfaces.dark.highest.bold.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.highest.bold.focus`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.highest.bold.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.highest.bold.interactive`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.highest.bold.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.highest.bold.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.highest.bold.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.highest.bold.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.highest.bold.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.highest.bold.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.highest.branded.background`	`oklch(0.350000 0.001325 56.545)`	computed	`ramps.dark.brand.5`
`surfaces.dark.highest.branded.backgroundMuted`	`oklch(0.350000 0.001325 56.545)`	computed	`ramps.dark.brand.5`
`surfaces.dark.highest.branded.backgroundStrong`	`oklch(0.350000 0.001325 56.545)`	computed	`ramps.dark.brand.5`
`surfaces.dark.highest.branded.border`	`oklch(0.305556 0.000796 38.545)`	computed	`ramps.dark.neutral.4`
`surfaces.dark.highest.branded.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.highest.branded.focus`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.highest.branded.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.highest.branded.interactive`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.highest.branded.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.highest.branded.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.highest.branded.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.highest.branded.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.highest.branded.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.highest.branded.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.highest.neutral.background`	`oklch(0.350000 0.000378 38.727)`	computed	`ramps.dark.neutral.5`
`surfaces.dark.highest.neutral.backgroundMuted`	`oklch(0.350000 0.000378 38.727)`	computed	`ramps.dark.neutral.5`
`surfaces.dark.highest.neutral.backgroundStrong`	`oklch(0.350000 0.000378 38.727)`	computed	`ramps.dark.neutral.5`
`surfaces.dark.highest.neutral.border`	`oklch(0.305556 0.000796 38.545)`	computed	`ramps.dark.neutral.4`
`surfaces.dark.highest.neutral.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.highest.neutral.focus`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.highest.neutral.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.highest.neutral.interactive`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.highest.neutral.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.highest.neutral.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.highest.neutral.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.highest.neutral.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.highest.neutral.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.highest.neutral.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.highest.tinted.background`	`oklch(0.350000 0.000514 45.518)`	computed	`ramps.dark.tint.5`
`surfaces.dark.highest.tinted.backgroundMuted`	`oklch(0.350000 0.000514 45.518)`	computed	`ramps.dark.tint.5`
`surfaces.dark.highest.tinted.backgroundStrong`	`oklch(0.350000 0.000514 45.518)`	computed	`ramps.dark.tint.5`
`surfaces.dark.highest.tinted.border`	`oklch(0.305556 0.000796 38.545)`	computed	`ramps.dark.neutral.4`
`surfaces.dark.highest.tinted.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.highest.tinted.focus`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.highest.tinted.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.highest.tinted.interactive`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.highest.tinted.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.highest.tinted.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.highest.tinted.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.highest.tinted.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.highest.tinted.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.highest.tinted.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.low.bold.background`	`oklch(0.194444 0.003540 57.636)`	computed	`ramps.dark.brand.2`
`surfaces.dark.low.bold.backgroundMuted`	`oklch(0.238889 0.003837 57.273)`	computed	`ramps.dark.brand.3`
`surfaces.dark.low.bold.backgroundStrong`	`oklch(0.305556 0.002686 56.909)`	computed	`ramps.dark.brand.4`
`surfaces.dark.low.bold.border`	`oklch(0.150000 0.001765 38.000)`	computed	`ramps.dark.neutral.1`
`surfaces.dark.low.bold.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.low.bold.focus`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.low.bold.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.low.bold.interactive`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.low.bold.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.low.bold.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.low.bold.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.low.bold.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.low.bold.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.low.bold.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.low.branded.background`	`oklch(0.194444 0.003540 57.636)`	computed	`ramps.dark.brand.2`
`surfaces.dark.low.branded.backgroundMuted`	`oklch(0.238889 0.003837 57.273)`	computed	`ramps.dark.brand.3`
`surfaces.dark.low.branded.backgroundStrong`	`oklch(0.305556 0.002686 56.909)`	computed	`ramps.dark.brand.4`
`surfaces.dark.low.branded.border`	`oklch(0.150000 0.001765 38.000)`	computed	`ramps.dark.neutral.1`
`surfaces.dark.low.branded.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.low.branded.focus`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.low.branded.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.low.branded.interactive`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.low.branded.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.low.branded.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.low.branded.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.low.branded.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.low.branded.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.low.branded.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.low.neutral.background`	`oklch(0.194444 0.001678 38.182)`	computed	`ramps.dark.neutral.2`
`surfaces.dark.low.neutral.backgroundMuted`	`oklch(0.238889 0.001441 38.364)`	computed	`ramps.dark.neutral.3`
`surfaces.dark.low.neutral.backgroundStrong`	`oklch(0.305556 0.000796 38.545)`	computed	`ramps.dark.neutral.4`
`surfaces.dark.low.neutral.border`	`oklch(0.150000 0.001765 38.000)`	computed	`ramps.dark.neutral.1`
`surfaces.dark.low.neutral.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.low.neutral.focus`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.low.neutral.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.low.neutral.interactive`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.low.neutral.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.low.neutral.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.low.neutral.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.low.neutral.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.low.neutral.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.low.neutral.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.low.tinted.background`	`oklch(0.194444 0.001935 43.426)`	computed	`ramps.dark.tint.2`
`surfaces.dark.low.tinted.backgroundMuted`	`oklch(0.238889 0.001779 44.382)`	computed	`ramps.dark.tint.3`
`surfaces.dark.low.tinted.backgroundStrong`	`oklch(0.305556 0.001067 45.378)`	computed	`ramps.dark.tint.4`
`surfaces.dark.low.tinted.border`	`oklch(0.150000 0.001765 38.000)`	computed	`ramps.dark.neutral.1`
`surfaces.dark.low.tinted.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.low.tinted.focus`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.low.tinted.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.low.tinted.interactive`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.low.tinted.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.low.tinted.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.low.tinted.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.low.tinted.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.low.tinted.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.low.tinted.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.mid.bold.background`	`oklch(0.238889 0.003837 57.273)`	computed	`ramps.dark.brand.3`
`surfaces.dark.mid.bold.backgroundMuted`	`oklch(0.305556 0.002686 56.909)`	computed	`ramps.dark.brand.4`
`surfaces.dark.mid.bold.backgroundStrong`	`oklch(0.350000 0.001325 56.545)`	computed	`ramps.dark.brand.5`
`surfaces.dark.mid.bold.border`	`oklch(0.194444 0.001678 38.182)`	computed	`ramps.dark.neutral.2`
`surfaces.dark.mid.bold.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.mid.bold.focus`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.mid.bold.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.mid.bold.interactive`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.mid.bold.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.mid.bold.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.mid.bold.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.mid.bold.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.mid.bold.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.mid.bold.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.mid.branded.background`	`oklch(0.238889 0.003837 57.273)`	computed	`ramps.dark.brand.3`
`surfaces.dark.mid.branded.backgroundMuted`	`oklch(0.305556 0.002686 56.909)`	computed	`ramps.dark.brand.4`
`surfaces.dark.mid.branded.backgroundStrong`	`oklch(0.350000 0.001325 56.545)`	computed	`ramps.dark.brand.5`
`surfaces.dark.mid.branded.border`	`oklch(0.194444 0.001678 38.182)`	computed	`ramps.dark.neutral.2`
`surfaces.dark.mid.branded.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.mid.branded.focus`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.mid.branded.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.mid.branded.interactive`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.mid.branded.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.mid.branded.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.mid.branded.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.mid.branded.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.mid.branded.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.mid.branded.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.mid.neutral.background`	`oklch(0.238889 0.001441 38.364)`	computed	`ramps.dark.neutral.3`
`surfaces.dark.mid.neutral.backgroundMuted`	`oklch(0.305556 0.000796 38.545)`	computed	`ramps.dark.neutral.4`
`surfaces.dark.mid.neutral.backgroundStrong`	`oklch(0.350000 0.000378 38.727)`	computed	`ramps.dark.neutral.5`
`surfaces.dark.mid.neutral.border`	`oklch(0.194444 0.001678 38.182)`	computed	`ramps.dark.neutral.2`
`surfaces.dark.mid.neutral.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.mid.neutral.focus`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.mid.neutral.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.mid.neutral.interactive`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.mid.neutral.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.mid.neutral.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.mid.neutral.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.mid.neutral.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.mid.neutral.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.mid.neutral.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.mid.tinted.background`	`oklch(0.238889 0.001779 44.382)`	computed	`ramps.dark.tint.3`
`surfaces.dark.mid.tinted.backgroundMuted`	`oklch(0.305556 0.001067 45.378)`	computed	`ramps.dark.tint.4`
`surfaces.dark.mid.tinted.backgroundStrong`	`oklch(0.350000 0.000514 45.518)`	computed	`ramps.dark.tint.5`
`surfaces.dark.mid.tinted.border`	`oklch(0.194444 0.001678 38.182)`	computed	`ramps.dark.neutral.2`
`surfaces.dark.mid.tinted.borderStrong`	`oklch(0.650000 0.015414 39.273)`	computed	`ramps.dark.neutral.8`
`surfaces.dark.mid.tinted.focus`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.mid.tinted.heading`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.mid.tinted.interactive`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.mid.tinted.onBold`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.mid.tinted.placeholder`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.dark.mid.tinted.primaryContrast`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.mid.tinted.selection`	`oklch(0.940000 0.011302 54.000)`	computed	`ramps.dark.brand.12`
`surfaces.dark.mid.tinted.text`	`oklch(0.940000 0.004003 40.000)`	computed	`ramps.dark.neutral.12`
`surfaces.dark.mid.tinted.textMuted`	`oklch(0.870000 0.008740 39.818)`	computed	`ramps.dark.neutral.11`
`surfaces.light.base.bold.background`	`oklch(0.940000 0.003693 58.000)`	computed	`ramps.light.brand.1`
`surfaces.light.base.bold.backgroundMuted`	`oklch(0.951111 0.004165 57.636)`	computed	`ramps.light.brand.2`
`surfaces.light.base.bold.backgroundStrong`	`oklch(0.962222 0.004514 57.273)`	computed	`ramps.light.brand.3`
`surfaces.light.base.bold.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.base.bold.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.base.bold.focus`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.base.bold.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.base.bold.interactive`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.base.bold.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.base.bold.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.base.bold.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.base.bold.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.base.bold.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.base.bold.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.base.branded.background`	`oklch(0.940000 0.003693 58.000)`	computed	`ramps.light.brand.1`
`surfaces.light.base.branded.backgroundMuted`	`oklch(0.951111 0.004165 57.636)`	computed	`ramps.light.brand.2`
`surfaces.light.base.branded.backgroundStrong`	`oklch(0.962222 0.004514 57.273)`	computed	`ramps.light.brand.3`
`surfaces.light.base.branded.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.base.branded.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.base.branded.focus`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.base.branded.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.base.branded.interactive`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.base.branded.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.base.branded.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.base.branded.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.base.branded.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.base.branded.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.base.branded.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.base.neutral.background`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.base.neutral.backgroundMuted`	`oklch(0.951111 0.001974 38.182)`	computed	`ramps.light.neutral.2`
`surfaces.light.base.neutral.backgroundStrong`	`oklch(0.962222 0.001695 38.364)`	computed	`ramps.light.neutral.3`
`surfaces.light.base.neutral.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.base.neutral.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.base.neutral.focus`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.base.neutral.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.base.neutral.interactive`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.base.neutral.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.base.neutral.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.base.neutral.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.base.neutral.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.base.neutral.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.base.neutral.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.base.tinted.background`	`oklch(0.940000 0.002294 42.738)`	computed	`ramps.light.tint.1`
`surfaces.light.base.tinted.backgroundMuted`	`oklch(0.951111 0.002277 43.426)`	computed	`ramps.light.tint.2`
`surfaces.light.base.tinted.backgroundStrong`	`oklch(0.962222 0.002093 44.382)`	computed	`ramps.light.tint.3`
`surfaces.light.base.tinted.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.base.tinted.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.base.tinted.focus`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.base.tinted.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.base.tinted.interactive`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.base.tinted.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.base.tinted.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.base.tinted.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.base.tinted.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.base.tinted.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.base.tinted.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.high.bold.background`	`oklch(0.978889 0.003160 56.909)`	computed	`ramps.light.brand.4`
`surfaces.light.high.bold.backgroundMuted`	`oklch(0.990000 0.001559 56.545)`	computed	`ramps.light.brand.5`
`surfaces.light.high.bold.backgroundStrong`	`oklch(0.990000 0.001559 56.545)`	computed	`ramps.light.brand.5`
`surfaces.light.high.bold.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.high.bold.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.high.bold.focus`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.high.bold.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.high.bold.interactive`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.high.bold.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.high.bold.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.high.bold.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.high.bold.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.high.bold.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.high.bold.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.high.branded.background`	`oklch(0.978889 0.003160 56.909)`	computed	`ramps.light.brand.4`
`surfaces.light.high.branded.backgroundMuted`	`oklch(0.990000 0.001559 56.545)`	computed	`ramps.light.brand.5`
`surfaces.light.high.branded.backgroundStrong`	`oklch(0.990000 0.001559 56.545)`	computed	`ramps.light.brand.5`
`surfaces.light.high.branded.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.high.branded.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.high.branded.focus`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.high.branded.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.high.branded.interactive`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.high.branded.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.high.branded.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.high.branded.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.high.branded.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.high.branded.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.high.branded.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.high.neutral.background`	`oklch(0.978889 0.000937 38.545)`	computed	`ramps.light.neutral.4`
`surfaces.light.high.neutral.backgroundMuted`	`oklch(0.990000 0.000445 38.727)`	computed	`ramps.light.neutral.5`
`surfaces.light.high.neutral.backgroundStrong`	`oklch(0.990000 0.000445 38.727)`	computed	`ramps.light.neutral.5`
`surfaces.light.high.neutral.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.high.neutral.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.high.neutral.focus`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.high.neutral.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.high.neutral.interactive`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.high.neutral.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.high.neutral.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.high.neutral.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.high.neutral.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.high.neutral.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.high.neutral.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.high.tinted.background`	`oklch(0.978889 0.001255 45.378)`	computed	`ramps.light.tint.4`
`surfaces.light.high.tinted.backgroundMuted`	`oklch(0.990000 0.000605 45.518)`	computed	`ramps.light.tint.5`
`surfaces.light.high.tinted.backgroundStrong`	`oklch(0.990000 0.000605 45.518)`	computed	`ramps.light.tint.5`
`surfaces.light.high.tinted.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.high.tinted.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.high.tinted.focus`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.high.tinted.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.high.tinted.interactive`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.high.tinted.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.high.tinted.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.high.tinted.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.high.tinted.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.high.tinted.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.high.tinted.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.highest.bold.background`	`oklch(0.990000 0.001559 56.545)`	computed	`ramps.light.brand.5`
`surfaces.light.highest.bold.backgroundMuted`	`oklch(0.990000 0.001559 56.545)`	computed	`ramps.light.brand.5`
`surfaces.light.highest.bold.backgroundStrong`	`oklch(0.990000 0.001559 56.545)`	computed	`ramps.light.brand.5`
`surfaces.light.highest.bold.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.highest.bold.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.highest.bold.focus`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.highest.bold.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.highest.bold.interactive`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.highest.bold.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.highest.bold.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.highest.bold.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.highest.bold.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.highest.bold.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.highest.bold.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.highest.branded.background`	`oklch(0.990000 0.001559 56.545)`	computed	`ramps.light.brand.5`
`surfaces.light.highest.branded.backgroundMuted`	`oklch(0.990000 0.001559 56.545)`	computed	`ramps.light.brand.5`
`surfaces.light.highest.branded.backgroundStrong`	`oklch(0.990000 0.001559 56.545)`	computed	`ramps.light.brand.5`
`surfaces.light.highest.branded.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.highest.branded.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.highest.branded.focus`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.highest.branded.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.highest.branded.interactive`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.highest.branded.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.highest.branded.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.highest.branded.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.highest.branded.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.highest.branded.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.highest.branded.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.highest.neutral.background`	`oklch(0.990000 0.000445 38.727)`	computed	`ramps.light.neutral.5`
`surfaces.light.highest.neutral.backgroundMuted`	`oklch(0.990000 0.000445 38.727)`	computed	`ramps.light.neutral.5`
`surfaces.light.highest.neutral.backgroundStrong`	`oklch(0.990000 0.000445 38.727)`	computed	`ramps.light.neutral.5`
`surfaces.light.highest.neutral.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.highest.neutral.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.highest.neutral.focus`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.highest.neutral.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.highest.neutral.interactive`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.highest.neutral.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.highest.neutral.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.highest.neutral.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.highest.neutral.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.highest.neutral.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.highest.neutral.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.highest.tinted.background`	`oklch(0.990000 0.000605 45.518)`	computed	`ramps.light.tint.5`
`surfaces.light.highest.tinted.backgroundMuted`	`oklch(0.990000 0.000605 45.518)`	computed	`ramps.light.tint.5`
`surfaces.light.highest.tinted.backgroundStrong`	`oklch(0.990000 0.000605 45.518)`	computed	`ramps.light.tint.5`
`surfaces.light.highest.tinted.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.highest.tinted.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.highest.tinted.focus`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.highest.tinted.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.highest.tinted.interactive`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.highest.tinted.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.highest.tinted.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.highest.tinted.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.highest.tinted.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.highest.tinted.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.highest.tinted.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.low.bold.background`	`oklch(0.951111 0.004165 57.636)`	computed	`ramps.light.brand.2`
`surfaces.light.low.bold.backgroundMuted`	`oklch(0.962222 0.004514 57.273)`	computed	`ramps.light.brand.3`
`surfaces.light.low.bold.backgroundStrong`	`oklch(0.978889 0.003160 56.909)`	computed	`ramps.light.brand.4`
`surfaces.light.low.bold.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.low.bold.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.low.bold.focus`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.low.bold.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.low.bold.interactive`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.low.bold.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.low.bold.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.low.bold.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.low.bold.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.low.bold.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.low.bold.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.low.branded.background`	`oklch(0.951111 0.004165 57.636)`	computed	`ramps.light.brand.2`
`surfaces.light.low.branded.backgroundMuted`	`oklch(0.962222 0.004514 57.273)`	computed	`ramps.light.brand.3`
`surfaces.light.low.branded.backgroundStrong`	`oklch(0.978889 0.003160 56.909)`	computed	`ramps.light.brand.4`
`surfaces.light.low.branded.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.low.branded.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.low.branded.focus`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.low.branded.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.low.branded.interactive`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.low.branded.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.low.branded.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.low.branded.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.low.branded.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.low.branded.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.low.branded.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.low.neutral.background`	`oklch(0.951111 0.001974 38.182)`	computed	`ramps.light.neutral.2`
`surfaces.light.low.neutral.backgroundMuted`	`oklch(0.962222 0.001695 38.364)`	computed	`ramps.light.neutral.3`
`surfaces.light.low.neutral.backgroundStrong`	`oklch(0.978889 0.000937 38.545)`	computed	`ramps.light.neutral.4`
`surfaces.light.low.neutral.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.low.neutral.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.low.neutral.focus`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.low.neutral.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.low.neutral.interactive`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.low.neutral.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.low.neutral.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.low.neutral.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.low.neutral.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.low.neutral.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.low.neutral.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.low.tinted.background`	`oklch(0.951111 0.002277 43.426)`	computed	`ramps.light.tint.2`
`surfaces.light.low.tinted.backgroundMuted`	`oklch(0.962222 0.002093 44.382)`	computed	`ramps.light.tint.3`
`surfaces.light.low.tinted.backgroundStrong`	`oklch(0.978889 0.001255 45.378)`	computed	`ramps.light.tint.4`
`surfaces.light.low.tinted.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.low.tinted.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.low.tinted.focus`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.low.tinted.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.low.tinted.interactive`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.low.tinted.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.low.tinted.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.low.tinted.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.low.tinted.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.low.tinted.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.low.tinted.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.mid.bold.background`	`oklch(0.962222 0.004514 57.273)`	computed	`ramps.light.brand.3`
`surfaces.light.mid.bold.backgroundMuted`	`oklch(0.978889 0.003160 56.909)`	computed	`ramps.light.brand.4`
`surfaces.light.mid.bold.backgroundStrong`	`oklch(0.990000 0.001559 56.545)`	computed	`ramps.light.brand.5`
`surfaces.light.mid.bold.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.mid.bold.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.mid.bold.focus`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.mid.bold.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.mid.bold.interactive`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.mid.bold.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.mid.bold.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.mid.bold.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.mid.bold.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.mid.bold.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.mid.bold.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.mid.branded.background`	`oklch(0.962222 0.004514 57.273)`	computed	`ramps.light.brand.3`
`surfaces.light.mid.branded.backgroundMuted`	`oklch(0.978889 0.003160 56.909)`	computed	`ramps.light.brand.4`
`surfaces.light.mid.branded.backgroundStrong`	`oklch(0.990000 0.001559 56.545)`	computed	`ramps.light.brand.5`
`surfaces.light.mid.branded.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.mid.branded.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.mid.branded.focus`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.mid.branded.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.mid.branded.interactive`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.mid.branded.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.mid.branded.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.mid.branded.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.mid.branded.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.mid.branded.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.mid.branded.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.mid.neutral.background`	`oklch(0.962222 0.001695 38.364)`	computed	`ramps.light.neutral.3`
`surfaces.light.mid.neutral.backgroundMuted`	`oklch(0.978889 0.000937 38.545)`	computed	`ramps.light.neutral.4`
`surfaces.light.mid.neutral.backgroundStrong`	`oklch(0.990000 0.000445 38.727)`	computed	`ramps.light.neutral.5`
`surfaces.light.mid.neutral.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.mid.neutral.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.mid.neutral.focus`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.mid.neutral.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.mid.neutral.interactive`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.mid.neutral.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.mid.neutral.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.mid.neutral.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.mid.neutral.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.mid.neutral.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.mid.neutral.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.mid.tinted.background`	`oklch(0.962222 0.002093 44.382)`	computed	`ramps.light.tint.3`
`surfaces.light.mid.tinted.backgroundMuted`	`oklch(0.978889 0.001255 45.378)`	computed	`ramps.light.tint.4`
`surfaces.light.mid.tinted.backgroundStrong`	`oklch(0.990000 0.000605 45.518)`	computed	`ramps.light.tint.5`
`surfaces.light.mid.tinted.border`	`oklch(0.740000 0.018134 39.273)`	computed	`ramps.light.neutral.8`
`surfaces.light.mid.tinted.borderStrong`	`oklch(0.550000 0.016299 39.636)`	computed	`ramps.light.neutral.10`
`surfaces.light.mid.tinted.focus`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.mid.tinted.heading`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.mid.tinted.interactive`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.mid.tinted.onBold`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.mid.tinted.placeholder`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`
`surfaces.light.mid.tinted.primaryContrast`	`oklch(0.940000 0.002077 38.000)`	computed	`ramps.light.neutral.1`
`surfaces.light.mid.tinted.selection`	`oklch(0.220000 0.013296 54.000)`	computed	`ramps.light.brand.12`
`surfaces.light.mid.tinted.text`	`oklch(0.220000 0.004709 40.000)`	computed	`ramps.light.neutral.12`
`surfaces.light.mid.tinted.textMuted`	`oklch(0.400000 0.010282 39.818)`	computed	`ramps.light.neutral.11`

Semantische Rollen

Typografie-, Abstands- und Ruckmeldungsrollen verbinden Bedeutung mit wiederverwendbaren Ausgaben.

Typografierollen

body
Pfad	Wert	Quelle
`typeRoles.body.family`	`secondary`	computed
`typeRoles.body.lineHeight`	`1.6`	computed
`typeRoles.body.step`	`base`	computed
`typeRoles.body.weight`	`400`	computed

display
Pfad	Wert	Quelle
`typeRoles.display.family`	`primary`	computed
`typeRoles.display.letterSpacing`	`-0.02em`	computed
`typeRoles.display.lineHeight`	`1.12`	computed
`typeRoles.display.step`	`h1`	computed
`typeRoles.display.weight`	`700`	computed

heading
Pfad	Wert	Quelle
`typeRoles.heading.family`	`primary`	computed
`typeRoles.heading.letterSpacing`	`-0.01em`	computed
`typeRoles.heading.lineHeight`	`1.2`	computed
`typeRoles.heading.step`	`h2`	computed
`typeRoles.heading.weight`	`700`	computed

label
Pfad	Wert	Quelle
`typeRoles.label.family`	`secondary`	computed
`typeRoles.label.lineHeight`	`1.25`	computed
`typeRoles.label.step`	`sm`	computed
`typeRoles.label.weight`	`500`	computed

mono
Pfad	Wert	Quelle
`typeRoles.mono.family`	`tertiary`	computed
`typeRoles.mono.lineHeight`	`1.6`	computed
`typeRoles.mono.step`	`sm`	computed
`typeRoles.mono.weight`	`400`	computed

Abstandsrollen

controlGap
Pfad	Wert	Quelle	Referenz
`spaceRoles.controlGap`	`0.8625rem`	computed	`scales.space.steps.sm`

controlPaddingBlock
Pfad	Wert	Quelle	Referenz
`spaceRoles.controlPaddingBlock`	`0.8625rem`	computed	`scales.space.steps.sm`

controlPaddingInline
Pfad	Wert	Quelle	Referenz
`spaceRoles.controlPaddingInline`	`1.15rem`	computed	`scales.space.steps.md`

denseSection
Pfad	Wert	Quelle	Referenz
`spaceRoles.denseSection`	`2.5875rem`	computed	`scales.space.steps.xl`

fine
Pfad	Wert	Quelle	Referenz
`spaceRoles.fine`	`0.2875rem`	computed	`scales.space.steps.2xs`

flowGap
Pfad	Wert	Quelle	Referenz
`spaceRoles.flowGap`	`1.15rem`	computed	`scales.space.steps.md`

focalSection
Pfad	Wert	Quelle	Referenz
`spaceRoles.focalSection`	`5.8219rem`	computed	`scales.space.steps.3xl`

headingAfter
Pfad	Wert	Quelle	Referenz
`spaceRoles.headingAfter`	`0.55em`	manual

iconGap
Pfad	Wert	Quelle	Referenz
`spaceRoles.iconGap`	`0.575rem`	computed	`scales.space.steps.xs`

inlineControl
Pfad	Wert	Quelle	Referenz
`spaceRoles.inlineControl`	`0.8625rem`	computed	`scales.space.steps.sm`

pageGutter
Pfad	Wert	Quelle	Referenz
`spaceRoles.pageGutter`	`1.725rem`	computed	`scales.space.steps.lg`

pageShellGap
Pfad	Wert	Quelle	Referenz
`spaceRoles.pageShellGap`	`2.5875rem`	computed	`scales.space.steps.xl`

relatedGroup
Pfad	Wert	Quelle	Referenz
`spaceRoles.relatedGroup`	`1.725rem`	computed	`scales.space.steps.lg`

repeatedContainer
Pfad	Wert	Quelle	Referenz
`spaceRoles.repeatedContainer`	`2.5875rem`	computed	`scales.space.steps.xl`

routineSection
Pfad	Wert	Quelle	Referenz
`spaceRoles.routineSection`	`clamp(2.5875rem, 2.0812rem + 2.2501cqi, 3.8813rem)`	accepted	`scales.space.steps.sectionBlock`

sectionBlock
Pfad	Wert	Quelle	Referenz
`spaceRoles.sectionBlock`	`clamp(2.5875rem, 2.0812rem + 2.2501cqi, 3.8813rem)`	accepted	`scales.space.steps.sectionBlock`

Ruckmeldungsrollen

Ruckmeldungsrollen
Pfad	Wert	Quelle
`feedback.dark.error.border`	`oklch(0.720000 0.147050 22.091)`	computed
`feedback.dark.error.surface`	`oklch(0.194444 0.009282 24.636)`	computed
`feedback.dark.error.text`	`oklch(0.940000 0.005916 21.000)`	computed
`feedback.dark.info.border`	`oklch(0.720000 0.130050 247.091)`	computed
`feedback.dark.info.surface`	`oklch(0.194444 0.006307 249.636)`	computed
`feedback.dark.info.text`	`oklch(0.940000 0.006120 246.000)`	computed
`feedback.dark.success.border`	`oklch(0.720000 0.205700 142.091)`	computed
`feedback.dark.success.surface`	`oklch(0.194444 0.007259 144.636)`	computed
`feedback.dark.success.text`	`oklch(0.940000 0.023256 141.000)`	computed
`feedback.dark.warning.border`	`oklch(0.720000 0.124949 82.091)`	computed
`feedback.dark.warning.surface`	`oklch(0.194444 0.004641 84.636)`	computed
`feedback.dark.warning.text`	`oklch(0.940000 0.011424 81.000)`	computed
`feedback.light.error.border`	`oklch(0.550000 0.198000 21.727)`	computed
`feedback.light.error.surface`	`oklch(0.951111 0.003220 24.636)`	computed
`feedback.light.error.text`	`oklch(0.220000 0.020880 21.000)`	computed
`feedback.light.info.border`	`oklch(0.550000 0.128699 246.727)`	computed
`feedback.light.info.surface`	`oklch(0.951111 0.003220 249.636)`	computed
`feedback.light.info.text`	`oklch(0.220000 0.013200 246.000)`	computed
`feedback.light.success.border`	`oklch(0.550000 0.164700 141.727)`	computed
`feedback.light.success.surface`	`oklch(0.951111 0.011900 144.636)`	computed
`feedback.light.success.text`	`oklch(0.220000 0.017279 141.000)`	computed
`feedback.light.warning.border`	`oklch(0.550000 0.101700 81.727)`	computed
`feedback.light.warning.surface`	`oklch(0.951111 0.007000 84.636)`	computed
`feedback.light.warning.text`	`oklch(0.220000 0.010559 81.000)`	computed

Komponentenvertrage

Komponentenwerte stammen aus dem endgultigen deklarierten Graphen und seinen aktiven Verbrauchern.

Aktive Autorendaten

blockquote
Pfad	Wert	Quelle	Referenz
`components.blockquote.borderWidth`	`0.25rem`	manual	`scales.border.widths.blockquote`

body
Pfad	Wert	Quelle	Referenz
`components.body.containerMax`	`80rem`	manual
`components.body.fontSize`	`clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem)`	computed	`scales.type.steps.base`
`components.body.measure`	`70ch`	manual

card
Pfad	Wert	Quelle	Referenz
`components.card.borderWidth`	`0.0625rem`	manual	`scales.border.widths.default`
`components.card.padding`	`1.725rem`	computed	`scales.space.steps.lg`
`components.card.radius`	`1.25rem`	computed	`scales.radius.steps.large`
`components.card.shadow`	`none`	manual

choiceControl
Pfad	Wert	Quelle	Referenz
`components.choiceControl.opticalOffset`	`0.2875rem`	computed	`scales.space.steps.2xs`
`components.choiceControl.size`	`1.15rem`	computed	`scales.space.steps.md`

control
Pfad	Wert	Quelle	Referenz
`components.control.disabledOpacity`	`0.6`	manual
`components.control.minBlockSize`	`2.75rem`	manual

form
Pfad	Wert	Quelle	Referenz
`components.form.fieldBackground.dark`	`oklch(0.150000 0.001765 38.000)`	computed	`ramps.dark.neutral.1`
`components.form.fieldBackground.light`	`oklch(0.962222 0.001695 38.364)`	computed	`surfaces.light.base.neutral.backgroundStrong`
`components.form.fieldBackgroundFocus.dark`	`oklch(0.194444 0.001678 38.182)`	computed	`ramps.dark.neutral.2`
`components.form.fieldBackgroundFocus.light`	`oklch(0.951111 0.001974 38.182)`	computed	`surfaces.light.base.neutral.backgroundMuted`
`components.form.inlineThreshold`	`48rem`	manual

grid
Pfad	Wert	Quelle	Referenz
`components.grid.fiveColumnThreshold`	`72rem`	manual
`components.grid.fourColumnThreshold`	`64rem`	manual
`components.grid.gap`	`1.725rem`	computed	`scales.space.steps.lg`
`components.grid.maxColumns`	`3`	manual
`components.grid.sixColumnThreshold`	`80rem`	manual
`components.grid.threeColumnThreshold`	`60rem`	manual
`components.grid.twoColumnThreshold`	`30rem`	manual

inlineCode
Pfad	Wert	Quelle	Referenz
`components.inlineCode.padding`	`0.15em 0.4em`	manual

link
Pfad	Wert	Quelle
`components.link.decorationColor`	`color-mix(in srgb, currentColor 38%, transparent)`	manual
`components.link.decorationThickness`	`0.08em`	manual
`components.link.underlineOffset`	`0.16em`	manual

list
Pfad	Wert	Quelle	Referenz
`components.list.indentation`	`1.725rem`	computed	`scales.space.steps.lg`

navigation
Pfad	Wert	Quelle	Referenz
`components.navigation.containerGap`	`1.725rem`	computed	`scales.space.steps.lg`
`components.navigation.expandedThreshold`	`768px`	manual
`components.navigation.itemFlow`	`0.575rem`	computed	`scales.space.steps.xs`
`components.navigation.languageExpandedThreshold`	`36rem`	manual
`components.navigation.menuDesktopGap`	`1.15rem`	computed	`scales.space.steps.md`
`components.navigation.menuGap`	`0.8625rem`	computed	`scales.space.steps.sm`
`components.navigation.menuWideGap`	`1.15rem`	computed	`scales.space.steps.md`
`components.navigation.panelDesktopGap`	`1.15rem`	computed	`scales.space.steps.md`
`components.navigation.panelGap`	`1.725rem`	computed	`scales.space.steps.lg`
`components.navigation.primaryGap`	`1.15rem`	computed	`scales.space.steps.md`
`components.navigation.spaciousThreshold`	`960px`	manual
`components.navigation.utilitiesFlow`	`1.15rem`	computed	`scales.space.steps.md`
`components.navigation.utilityGap`	`0.8625rem`	computed	`scales.space.steps.sm`
`components.navigation.utilityInlineThreshold`	`481px`	manual

submitControl
Pfad	Wert	Quelle	Referenz
`components.submitControl.minInlineSize`	`16rem`	manual

textarea
Pfad	Wert	Quelle	Referenz
`components.textarea.minBlockSize`	`10rem`	manual

Echte semantische Beispiele

Diese Beispiele verwenden normale semantische Elemente und das vollstandige geregelte Designvokabular.

light

light / neutral

Diese semantische Karte nutzt den gewahlten Modus und Hintergrund uber das geregelte Vokabular.

light / tinted

Diese semantische Karte nutzt den gewahlten Modus und Hintergrund uber das geregelte Vokabular.

light / branded

Diese semantische Karte nutzt den gewahlten Modus und Hintergrund uber das geregelte Vokabular.

light / bold

Diese semantische Karte nutzt den gewahlten Modus und Hintergrund uber das geregelte Vokabular.

dark

dark / neutral

Diese semantische Karte nutzt den gewahlten Modus und Hintergrund uber das geregelte Vokabular.

dark / tinted

Diese semantische Karte nutzt den gewahlten Modus und Hintergrund uber das geregelte Vokabular.

dark / branded

Diese semantische Karte nutzt den gewahlten Modus und Hintergrund uber das geregelte Vokabular.

dark / bold

Diese semantische Karte nutzt den gewahlten Modus und Hintergrund uber das geregelte Vokabular.

Kartenvertrag

Dieser Artikel nutzt das vollstandige Kartenpaket ohne Darstellungsklasse.

Beispiel fur primare Aktion Beispiel fur sekundare Aktion

Statusbeispiel mit der Erfolgsdarstellung des Frameworks.

Alarmbeispiel mit der Fehlerdarstellung des Frameworks.

Komponenten-Beziehungsmatrix

Echte semantische Steuerelemente prufen jeden veroffentlichten Oberflachenkontext und Interaktionszustand.

dark.base.bold

Primare Aktion Sekundare Aktion

Texteingabe E-Mail-Eingabe Sucheingabe Zahleneingabe Datumseingabe Auswahlfeld Textbereich Kontrollkastchen Optionsfeld Ungultige Eingabe Korrigieren Sie dieses Feld, bevor Sie fortfahren. Deaktivierte Eingabe Schreibgeschutzte Eingabe

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

dark.base.branded

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

dark.base.neutral

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

dark.base.tinted

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

dark.high.bold

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

dark.high.branded

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

dark.high.neutral

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

dark.high.tinted

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

dark.highest.bold

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

dark.highest.branded

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

dark.highest.neutral

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

dark.highest.tinted

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

dark.low.bold

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

dark.low.branded

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

dark.low.neutral

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

dark.low.tinted

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

dark.mid.bold

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

dark.mid.branded

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

dark.mid.neutral

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

dark.mid.tinted

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.base.bold

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.base.branded

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.base.neutral

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.base.tinted

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.high.bold

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.high.branded

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.high.neutral

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.high.tinted

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.highest.bold

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.highest.branded

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.highest.neutral

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.highest.tinted

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.low.bold

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.low.branded

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.low.neutral

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.low.tinted

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.mid.bold

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.mid.branded

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.mid.neutral

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

light.mid.tinted

Primare Aktion Sekundare Aktion

Zusammenfassung

Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.

Erfolgsmeldung

Warnmeldung

Fehlermeldung

Informationsmeldung

Oberflachenabhangige Tabelle
Beziehung
Gerendertes Ergebnis

Beziehungsmatrix fur Abschnittsraster

Diese Beispiele durchlaufen das normale Schema, die Dokumenterweiterung und den Layout-Compiler.

Abschnittsraster-Uberschrift

Teilnehmendes Element

Abschnittsraster-Uberschrift

Teilnehmendes Element

Abschnittsraster-Uberschrift

Teilnehmendes Element

Abschnittsraster-Uberschrift

Teilnehmendes Element

Abschnittsraster-Uberschrift

Teilnehmendes Element one

Teilnehmendes Element two

Teilnehmendes Element three

Teilnehmendes Element four

Teilnehmendes Element

Dieses absichtlich lange ubersetzte Beispiel bewahrt die Quellreihenfolge, bricht sicher im eigenen Container um und bleibt bei zweihundert Prozent Textvergroserung lesbar.

Teilnehmendes Element

Dieses absichtlich lange ubersetzte Beispiel bewahrt die Quellreihenfolge, bricht sicher im eigenen Container um und bleibt bei zweihundert Prozent Textvergroserung lesbar.

Teilnehmendes Element

Dieses absichtlich lange ubersetzte Beispiel bewahrt die Quellreihenfolge, bricht sicher im eigenen Container um und bleibt bei zweihundert Prozent Textvergroserung lesbar.

Teilnehmendes Element

one

two

three

four

Abschnittsraster-Uberschrift

Dieses absichtlich lange ubersetzte Beispiel bewahrt die Quellreihenfolge, bricht sicher im eigenen Container um und bleibt bei zweihundert Prozent Textvergroserung lesbar.

Erzeugte und geregelte Ausgaben

Eigenschaften, Build-Variablen und Klassen werden aus ihren zustandigen Manifesten und Schemas abgeleitet.

Erzeugte benutzerdefinierte Eigenschaften

Erzeugte benutzerdefinierte Eigenschaften
Name	Art	Quelle
`--base-blockquote-border-width`	semantic	`components.blockquote.borderWidth`
`--base-body-measure`	semantic	`components.body.measure`
`--base-border-width`	semantic	`scales.border.widths.default`
`--base-choice-control-optical-offset`	semantic	`components.choiceControl.opticalOffset`
`--base-choice-control-size`	semantic	`components.choiceControl.size`
`--base-color-border`	semantic	`surfaces.light.base.neutral.border`
`--base-color-border-strong`	semantic	`surfaces.light.base.neutral.borderStrong`
`--base-color-focus-ring`	semantic	`surfaces.light.base.neutral.focus`
`--base-color-heading`	semantic	`surfaces.light.base.neutral.heading`
`--base-color-interactive`	semantic	`surfaces.light.base.neutral.interactive`
`--base-color-primary`	semantic	`ramps.light.brand.9`
`--base-color-scheme`	semantic	`identity.stage.default`
`--base-color-selection`	semantic	`manifest-owned`
`--base-color-surface-muted`	semantic	`manifest-owned`
`--base-color-text`	semantic	`surfaces.light.base.neutral.text`
`--base-color-text-muted`	semantic	`surfaces.light.base.neutral.textMuted`
`--base-control-disabled-opacity`	semantic	`components.control.disabledOpacity`
`--base-control-min-block-size`	semantic	`components.control.minBlockSize`
`--base-disclosure-measure`	semantic	`components.body.measure`
`--base-elevation-shadow`	semantic	`scales.elevation.levels.1`
`--base-feedback-error-border`	semantic	`feedback.{light,dark}.error.border`
`--base-feedback-error-surface`	semantic	`feedback.{light,dark}.error.surface`
`--base-feedback-error-text`	semantic	`feedback.{light,dark}.error.text`
`--base-feedback-info-border`	semantic	`feedback.{light,dark}.info.border`
`--base-feedback-info-surface`	semantic	`feedback.{light,dark}.info.surface`
`--base-feedback-info-text`	semantic	`feedback.{light,dark}.info.text`
`--base-feedback-success-border`	semantic	`feedback.{light,dark}.success.border`
`--base-feedback-success-surface`	semantic	`feedback.{light,dark}.success.surface`
`--base-feedback-success-text`	semantic	`feedback.{light,dark}.success.text`
`--base-feedback-warning-border`	semantic	`feedback.{light,dark}.warning.border`
`--base-feedback-warning-surface`	semantic	`feedback.{light,dark}.warning.surface`
`--base-feedback-warning-text`	semantic	`feedback.{light,dark}.warning.text`
`--base-font-size-base`	semantic	`scales.type.steps.base`
`--base-font-size-h1`	semantic	`scales.type.steps.h1`
`--base-font-size-h2`	semantic	`scales.type.steps.h2`
`--base-font-size-h3`	semantic	`scales.type.steps.h3`
`--base-font-size-h4`	semantic	`scales.type.steps.h4`
`--base-font-size-lead`	semantic	`scales.type.steps.lead`
`--base-font-size-sm`	semantic	`scales.type.steps.sm`
`--base-form-measure`	semantic	`components.body.measure`
`--base-grid-gap`	semantic	`components.grid.gap`
`--base-inline-code-padding`	semantic	`components.inlineCode.padding`
`--base-layout-container-max`	semantic	`components.body.containerMax`
`--base-link-decoration-color`	semantic	`components.link.decorationColor`
`--base-link-decoration-thickness`	semantic	`components.link.decorationThickness`
`--base-link-underline-offset`	semantic	`components.link.underlineOffset`
`--base-list-indentation`	semantic	`components.list.indentation`
`--base-motion-duration-reduced`	semantic	`scales.motion.durations.reduced`
`--base-navigation-container-gap`	semantic	`components.navigation.containerGap`
`--base-navigation-item-flow`	semantic	`components.navigation.itemFlow`
`--base-navigation-menu-desktop-gap`	semantic	`components.navigation.menuDesktopGap`
`--base-navigation-menu-gap`	semantic	`components.navigation.menuGap`
`--base-navigation-menu-wide-gap`	semantic	`components.navigation.menuWideGap`
`--base-navigation-panel-desktop-gap`	semantic	`components.navigation.panelDesktopGap`
`--base-navigation-panel-gap`	semantic	`components.navigation.panelGap`
`--base-navigation-primary-gap`	semantic	`components.navigation.primaryGap`
`--base-navigation-utilities-flow`	semantic	`components.navigation.utilitiesFlow`
`--base-navigation-utility-gap`	semantic	`components.navigation.utilityGap`
`--base-outline-width`	semantic	`scales.border.widths.focus`
`--base-page-gutter`	semantic	`scales.space.steps.md`
`--base-radius-default`	semantic	`scales.radius.steps.default`
`--base-radius-large`	semantic	`scales.radius.steps.large`
`--base-radius-pill`	semantic	`scales.radius.steps.pill`
`--base-radius-small`	semantic	`scales.radius.steps.small`
`--base-section-grid-gap`	semantic	`components.grid.gap`
`--base-section-rhythm-closing`	semantic	`scales.space.steps.sectionBlock`
`--base-section-rhythm-dense`	semantic	`scales.space.steps.lg`
`--base-section-rhythm-focal`	semantic	`scales.space.steps.sectionBlock`
`--base-section-rhythm-opening`	semantic	`scales.space.steps.sectionBlock`
`--base-section-rhythm-routine`	semantic	`scales.space.steps.sectionBlock`
`--base-space-control-gap`	semantic	`spaceRoles.controlGap`
`--base-space-control-padding-block`	semantic	`spaceRoles.controlPaddingBlock`
`--base-space-control-padding-inline`	semantic	`spaceRoles.controlPaddingInline`
`--base-space-flow-gap`	semantic	`spaceRoles.flowGap`
`--base-space-heading-after`	semantic	`spaceRoles.headingAfter`
`--base-space-section-block`	semantic	`spaceRoles.sectionBlock`
`--base-spacing-2xs`	semantic	`scales.space.steps.2xs`
`--base-spacing-lg`	semantic	`scales.space.steps.lg`
`--base-spacing-md`	semantic	`scales.space.steps.md`
`--base-spacing-sm`	semantic	`scales.space.steps.sm`
`--base-spacing-xl`	semantic	`scales.space.steps.xl`
`--base-spacing-xs`	semantic	`scales.space.steps.xs`
`--base-submit-control-min-inline-size`	semantic	`components.submitControl.minInlineSize`
`--base-surface-background`	semantic	`surfaces.light.base.neutral.background`
`--base-textarea-min-block-size`	semantic	`components.textarea.minBlockSize`
`--base-transition-base`	semantic	`scales.motion.durations.base, scales.motion.easings.standard`
`--base-type-body-font-family`	semantic	`typeRoles.body.family`
`--base-type-body-font-weight`	semantic	`typeRoles.body.weight`
`--base-type-body-line-height`	semantic	`typeRoles.body.lineHeight`
`--base-type-display-font-family`	semantic	`typeRoles.display.family`
`--base-type-display-font-weight`	semantic	`typeRoles.display.weight`
`--base-type-display-line-height`	semantic	`typeRoles.display.lineHeight`
`--base-type-heading-font-family`	semantic	`typeRoles.heading.family`
`--base-type-heading-font-weight`	semantic	`typeRoles.heading.weight`
`--base-type-heading-line-height`	semantic	`typeRoles.heading.lineHeight`
`--base-type-label-font-family`	semantic	`typeRoles.label.family`
`--base-type-label-font-weight`	semantic	`typeRoles.label.weight`
`--base-type-label-line-height`	semantic	`typeRoles.label.lineHeight`
`--base-type-mono-font-family`	semantic	`typeRoles.mono.family`
`--base-type-mono-font-weight`	semantic	`typeRoles.mono.weight`
`--base-type-mono-line-height`	semantic	`typeRoles.mono.lineHeight`
`--base-wide-measure`	semantic	`components.body.containerMax`
`--component-card-border-width`	component	`components.card.borderWidth`
`--component-card-padding`	component	`components.card.padding`
`--component-card-radius`	component	`components.card.radius`
`--component-card-shadow`	component	`components.card.shadow`
`--skin-border-blockquote`	primitive	`scales.border.widths.blockquote`
`--skin-border-default`	primitive	`scales.border.widths.default`
`--skin-border-focus`	primitive	`scales.border.widths.focus`
`--skin-elevation-level-1`	primitive	`scales.elevation.levels.1`
`--skin-light-brand-9`	primitive	`ramps.light.brand.9`
`--skin-motion-duration-base`	primitive	`scales.motion.durations.base`
`--skin-motion-duration-reduced`	primitive	`scales.motion.durations.reduced`
`--skin-motion-easing-standard`	primitive	`scales.motion.easings.standard`
`--skin-radius-default`	primitive	`scales.radius.steps.default`
`--skin-radius-large`	primitive	`scales.radius.steps.large`
`--skin-radius-pill`	primitive	`scales.radius.steps.pill`
`--skin-radius-small`	primitive	`scales.radius.steps.small`
`--skin-space-2xs`	primitive	`scales.space.steps.2xs`
`--skin-space-lg`	primitive	`scales.space.steps.lg`
`--skin-space-md`	primitive	`scales.space.steps.md`
`--skin-space-section-block`	primitive	`scales.space.steps.sectionBlock`
`--skin-space-sm`	primitive	`scales.space.steps.sm`
`--skin-space-xl`	primitive	`scales.space.steps.xl`
`--skin-space-xs`	primitive	`scales.space.steps.xs`
`--skin-type-size-base`	primitive	`scales.type.steps.base`
`--skin-type-size-h1`	primitive	`scales.type.steps.h1`
`--skin-type-size-h2`	primitive	`scales.type.steps.h2`
`--skin-type-size-h3`	primitive	`scales.type.steps.h3`
`--skin-type-size-h4`	primitive	`scales.type.steps.h4`
`--skin-type-size-lead`	primitive	`scales.type.steps.lead`
`--skin-type-size-sm`	primitive	`scales.type.steps.sm`

Sass-Variablen

Sass-Variablen
Name	Quelle
`$base-form-inline-threshold`	`components.form.inlineThreshold`
`$base-grid-five-column-threshold`	`components.grid.fiveColumnThreshold`
`$base-grid-four-column-threshold`	`components.grid.fourColumnThreshold`
`$base-grid-six-column-threshold`	`components.grid.sixColumnThreshold`
`$base-grid-three-column-threshold`	`components.grid.threeColumnThreshold`
`$base-grid-two-column-threshold`	`components.grid.twoColumnThreshold`
`$base-navigation-expanded-threshold`	`components.navigation.expandedThreshold`
`$base-navigation-language-expanded-threshold`	`components.navigation.languageExpandedThreshold`
`$base-navigation-spacious-threshold`	`components.navigation.spaciousThreshold`
`$base-navigation-utility-inline-threshold`	`components.navigation.utilityInlineThreshold`
`$base-section-grid-three-column-threshold`	`components.grid.threeColumnThreshold`
`$base-section-grid-two-column-threshold`	`components.grid.twoColumnThreshold`

Geregelte Designklassen

Geregelte Designklassen
Name	Quelle
`has-action-primary`	`design.action=primary`
`has-action-secondary`	`design.action=secondary`
`has-background-bold`	`design.background=bold`
`has-background-branded`	`design.background=branded`
`has-background-neutral`	`design.background=neutral`
`has-background-tinted`	`design.background=tinted`
`has-depth-base`	`design.depth=base`
`has-depth-high`	`design.depth=high`
`has-depth-highest`	`design.depth=highest`
`has-depth-low`	`design.depth=low`
`has-depth-mid`	`design.depth=mid`
`has-theme-dark`	`design.theme=dark`
`has-theme-light`	`design.theme=light`

Geregelte Frameworkklassen

Geregelte Frameworkklassen
Name	Eigentumer	Zweck
`action-group`	`src/site/modules/elements/action-group`	Adjacent action layout
`address-locality`	`src/site/styles/site.scss`	Inline locality grouping for the demo address
`card-grid`	`src/site/modules/elements/card-grid`	Repeated card layout
`card-grid-capacity-1`	`src/site/styles/framework.scss`	One-column card-grid capacity
`card-grid-capacity-2`	`src/site/styles/framework.scss`	Two-column card-grid capacity
`card-grid-capacity-3`	`src/site/styles/framework.scss`	Three-column card-grid capacity
`card-grid-capacity-4`	`src/site/styles/framework.scss`	Four-column card-grid capacity
`card-grid-capacity-5`	`src/site/styles/framework.scss`	Five-column card-grid capacity
`card-grid-capacity-6`	`src/site/styles/framework.scss`	Six-column card-grid capacity
`card-grid-container`	`src/site/modules/elements/card-grid`	Card-grid container-query host
`htmx-indicator`	`src/site/assets/js/htmx.min.js`	HTMX request progress integration hook
`language-navigation`	`src/site/modules/elements/menu-languages`	Responsive language navigation wrapper
`language-toggle`	`src/site/modules/elements/menu-languages`	Language navigation icon control
`nav-panel`	`src/site/modules/elements/menu-navigation`	Responsive navigation disclosure panel
`nav-primary`	`src/site/modules/elements/menu-navigation-primary`	Primary navigation wrapper
`nav-primary-brand`	`src/site/modules/elements/menu-navigation-primary`	Primary navigation brand link
`nav-primary-menu`	`src/site/modules/elements/menu-navigation-primary`	Primary navigation menu group
`nav-primary-utilities-end`	`src/site/modules/elements/menu-navigation-primary`	Trailing primary navigation utilities
`nav-primary-utilities-start`	`src/site/modules/elements/menu-navigation-primary`	Leading primary navigation utilities
`nav-toggle`	`src/site/modules/elements/menu-navigation`	Responsive navigation disclosure control
`nav-toggle-icon`	`src/site/modules/elements/menu-navigation`	State-independent navigation toggle icon
`nav-toggle-state-closed`	`src/site/modules/elements/menu-navigation`	Collapsed navigation toggle decoration
`nav-toggle-state-open`	`src/site/modules/elements/menu-navigation`	Expanded navigation toggle decoration
`section-grid`	`src/site/pipeline/layout.js`	Schema-generated section grid host
`section-grid-align-center`	`src/site/styles/framework.scss`	Schema-generated center alignment
`section-grid-align-start`	`src/site/styles/framework.scss`	Schema-generated start alignment
`section-grid-align-stretch`	`src/site/styles/framework.scss`	Schema-generated stretch alignment
`section-grid-capacity-1`	`src/site/styles/framework.scss`	Schema-generated one-column section-grid capacity
`section-grid-capacity-2`	`src/site/styles/framework.scss`	Schema-generated two-column section-grid capacity
`section-grid-capacity-3`	`src/site/styles/framework.scss`	Schema-generated three-column section-grid capacity
`section-grid-header`	`src/site/pipeline/layout.js`	Schema-generated full-span first header
`section-grid-item`	`src/site/pipeline/layout.js`	Schema-generated participating first header
`site-topbar`	`src/site/common/topbar`	Site utility bar layout
`utility-navigation`	`src/site/common/topbar`	Compact company-interaction navigation

Skin-Lint-Status

Zahlen und Hinweise stammen aus derselben Auswertung wie das Build-Gate.

Blockierende Befunde: 0
Ausgenommene Befunde: 0
Ungenutzte Ausnahmen: 0
Geregelte Komponentenwerte (Tier 3): 22

Analysestatus und Hinweise

Die optionale APCA-Analyse ist nicht aktiviert. Die WCAG-2.2-Kontrastprufungen des Repositorys bleiben aktiv.