light / neutral
Diese semantische Karte nutzt den gewählten Modus und Hintergrund über das geregelte Vokabular.
Lebende Skin-Referenz
Diese Seite wird aus demselben deklarierten Skin sowie denselben Verträgen und Manifesten wie die Website erstellt.
Build-Provenienz
Diese Werte kennzeichnen den genauen deklarierten Zustand, den diese Seite darstellt.
- Schemaversion
- 2
- Marken-Hash
-
3d2cda447b6ac2aa2f26c3279cc49165d0563a5a707f62f7e333b3eec2611e7a - Markenvollständigkeit
- complete
- Markenlücken
- 2
- Zuletzt geprüft von
- agent
- Prüfdatum
- 2026-07-30
Identitätseingaben
Marken- und Verhaltenseingaben behalten ihre Herkunft, damit akzeptierte und berechnete Entscheidungen sichtbar bleiben.
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
identity.color.accentHue
|
272
|
declared |
|
identity.color.contrast
|
normal
|
declared |
|
identity.color.hue
|
242
|
declared |
|
identity.color.neutralTint
|
0.05
|
declared |
|
identity.elevation.style
|
flat
|
declared |
|
identity.motion.energy
|
calm
|
declared |
|
identity.shape.roundness
|
0.42
|
declared |
|
identity.space.density
|
comfortable
|
declared |
|
identity.stage.default
|
light
|
declared |
|
identity.type.baseSize.max
|
1.125rem
|
declared |
|
identity.type.baseSize.min
|
1rem
|
declared |
|
identity.type.primaryFamily.fallbackStack
|
neo-grotesque
|
declared |
|
identity.type.primaryFamily.family
|
system-ui
|
declared |
|
identity.type.primaryFamily.variable
|
false
|
declared |
|
identity.type.primaryFamily.weights
|
[400,500,700]
|
declared |
|
identity.type.ratio.max
|
1.333
|
declared |
|
identity.type.ratio.min
|
1.2
|
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 für beide Farbmodi und alle vier Rampenfamilien ist unten aufgeführt.
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
ramps.dark.accent.1
|
oklch(0.150000 0.001891 272.000)
|
computed |
|
ramps.dark.accent.2
|
oklch(0.194444 0.002080 272.364)
|
computed |
|
ramps.dark.accent.3
|
oklch(0.238889 0.002297 272.727)
|
computed |
|
ramps.dark.accent.4
|
oklch(0.305556 0.001702 273.091)
|
computed |
|
ramps.dark.accent.5
|
oklch(0.350000 0.000770 273.455)
|
computed |
|
ramps.dark.accent.6
|
oklch(0.450000 0.015875 273.818)
|
computed |
|
ramps.dark.accent.7
|
oklch(0.550000 0.038478 274.182)
|
computed |
|
ramps.dark.accent.8
|
oklch(0.650000 0.071877 274.545)
|
computed |
|
ramps.dark.accent.9
|
oklch(0.720000 0.126325 274.909)
|
computed |
|
ramps.dark.accent.10
|
oklch(0.780000 0.111000 275.273)
|
computed |
|
ramps.dark.accent.11
|
oklch(0.870000 0.063000 275.636)
|
computed |
|
ramps.dark.accent.12
|
oklch(0.940000 0.022049 276.000)
|
computed |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
ramps.dark.brand.1
|
oklch(0.150000 0.002463 242.000)
|
computed |
|
ramps.dark.brand.2
|
oklch(0.194444 0.002781 241.636)
|
computed |
|
ramps.dark.brand.3
|
oklch(0.238889 0.003020 241.273)
|
computed |
|
ramps.dark.brand.4
|
oklch(0.305556 0.002225 240.909)
|
computed |
|
ramps.dark.brand.5
|
oklch(0.350000 0.001208 240.545)
|
computed |
|
ramps.dark.brand.6
|
oklch(0.450000 0.021060 240.182)
|
computed |
|
ramps.dark.brand.7
|
oklch(0.550000 0.050864 239.818)
|
computed |
|
ramps.dark.brand.8
|
oklch(0.650000 0.095370 239.455)
|
computed |
|
ramps.dark.brand.9
|
oklch(0.720000 0.116033 239.091)
|
computed |
|
ramps.dark.brand.10
|
oklch(0.780000 0.087978 238.727)
|
computed |
|
ramps.dark.brand.11
|
oklch(0.870000 0.037766 238.364)
|
computed |
|
ramps.dark.brand.12
|
oklch(0.940000 0.008964 238.000)
|
computed |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
ramps.dark.neutral.1
|
oklch(0.150000 0.000834 257.000)
|
computed |
|
ramps.dark.neutral.2
|
oklch(0.194444 0.000813 257.182)
|
computed |
|
ramps.dark.neutral.3
|
oklch(0.238889 0.000688 257.364)
|
computed |
|
ramps.dark.neutral.4
|
oklch(0.305556 0.000403 257.545)
|
computed |
|
ramps.dark.neutral.5
|
oklch(0.350000 0.000143 257.727)
|
computed |
|
ramps.dark.neutral.6
|
oklch(0.450000 0.002325 257.909)
|
computed |
|
ramps.dark.neutral.7
|
oklch(0.550000 0.004402 258.091)
|
computed |
|
ramps.dark.neutral.8
|
oklch(0.650000 0.006415 258.273)
|
computed |
|
ramps.dark.neutral.9
|
oklch(0.720000 0.008381 258.455)
|
computed |
|
ramps.dark.neutral.10
|
oklch(0.780000 0.008433 258.636)
|
computed |
|
ramps.dark.neutral.11
|
oklch(0.870000 0.005416 258.818)
|
computed |
|
ramps.dark.neutral.12
|
oklch(0.940000 0.002503 259.000)
|
computed |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
ramps.dark.tint.1
|
oklch(0.150000 0.001070 251.872)
|
computed |
|
ramps.dark.tint.2
|
oklch(0.194444 0.001099 251.343)
|
computed |
|
ramps.dark.tint.3
|
oklch(0.238889 0.001028 250.350)
|
computed |
|
ramps.dark.tint.4
|
oklch(0.305556 0.000669 249.334)
|
computed |
|
ramps.dark.tint.5
|
oklch(0.350000 0.000299 247.426)
|
computed |
|
ramps.dark.tint.6
|
oklch(0.450000 0.005077 246.988)
|
computed |
|
ramps.dark.tint.7
|
oklch(0.550000 0.011244 245.807)
|
computed |
|
ramps.dark.tint.8
|
oklch(0.650000 0.019546 244.618)
|
computed |
|
ramps.dark.tint.9
|
oklch(0.720000 0.024241 244.683)
|
computed |
|
ramps.dark.tint.10
|
oklch(0.780000 0.020085 245.707)
|
computed |
|
ramps.dark.tint.11
|
oklch(0.870000 0.010107 247.523)
|
computed |
|
ramps.dark.tint.12
|
oklch(0.940000 0.003417 250.894)
|
computed |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
ramps.light.accent.1
|
oklch(0.940000 0.002225 272.000)
|
computed |
|
ramps.light.accent.2
|
oklch(0.951111 0.002447 272.364)
|
computed |
|
ramps.light.accent.3
|
oklch(0.962222 0.002702 272.727)
|
computed |
|
ramps.light.accent.4
|
oklch(0.978889 0.002002 273.091)
|
computed |
|
ramps.light.accent.5
|
oklch(0.990000 0.000906 273.455)
|
computed |
|
ramps.light.accent.6
|
oklch(0.900000 0.018676 273.818)
|
computed |
|
ramps.light.accent.7
|
oklch(0.820000 0.045268 274.182)
|
computed |
|
ramps.light.accent.8
|
oklch(0.740000 0.084561 274.545)
|
computed |
|
ramps.light.accent.9
|
oklch(0.650000 0.148618 274.909)
|
computed |
|
ramps.light.accent.10
|
oklch(0.550000 0.178818 275.273)
|
computed |
|
ramps.light.accent.11
|
oklch(0.400000 0.107291 275.636)
|
computed |
|
ramps.light.accent.12
|
oklch(0.220000 0.025940 276.000)
|
computed |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
ramps.light.brand.1
|
oklch(0.940000 0.002898 242.000)
|
computed |
|
ramps.light.brand.2
|
oklch(0.951111 0.003272 241.636)
|
computed |
|
ramps.light.brand.3
|
oklch(0.962222 0.003553 241.273)
|
computed |
|
ramps.light.brand.4
|
oklch(0.978889 0.002618 240.909)
|
computed |
|
ramps.light.brand.5
|
oklch(0.990000 0.001421 240.545)
|
computed |
|
ramps.light.brand.6
|
oklch(0.900000 0.024777 240.182)
|
computed |
|
ramps.light.brand.7
|
oklch(0.820000 0.059840 239.818)
|
computed |
|
ramps.light.brand.8
|
oklch(0.740000 0.112200 239.455)
|
computed |
|
ramps.light.brand.9
|
oklch(0.650000 0.136510 239.091)
|
computed |
|
ramps.light.brand.10
|
oklch(0.550000 0.103504 238.727)
|
computed |
|
ramps.light.brand.11
|
oklch(0.400000 0.044431 238.364)
|
computed |
|
ramps.light.brand.12
|
oklch(0.220000 0.010546 238.000)
|
computed |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
ramps.light.neutral.1
|
oklch(0.940000 0.000981 257.000)
|
computed |
|
ramps.light.neutral.2
|
oklch(0.951111 0.000957 257.182)
|
computed |
|
ramps.light.neutral.3
|
oklch(0.962222 0.000810 257.364)
|
computed |
|
ramps.light.neutral.4
|
oklch(0.978889 0.000474 257.545)
|
computed |
|
ramps.light.neutral.5
|
oklch(0.990000 0.000168 257.727)
|
computed |
|
ramps.light.neutral.6
|
oklch(0.900000 0.002735 257.909)
|
computed |
|
ramps.light.neutral.7
|
oklch(0.820000 0.005179 258.091)
|
computed |
|
ramps.light.neutral.8
|
oklch(0.740000 0.007547 258.273)
|
computed |
|
ramps.light.neutral.9
|
oklch(0.650000 0.009860 258.455)
|
computed |
|
ramps.light.neutral.10
|
oklch(0.550000 0.009921 258.636)
|
computed |
|
ramps.light.neutral.11
|
oklch(0.400000 0.006372 258.818)
|
computed |
|
ramps.light.neutral.12
|
oklch(0.220000 0.002945 259.000)
|
computed |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
ramps.light.tint.1
|
oklch(0.940000 0.001259 251.872)
|
computed |
|
ramps.light.tint.2
|
oklch(0.951111 0.001293 251.343)
|
computed |
|
ramps.light.tint.3
|
oklch(0.962222 0.001210 250.350)
|
computed |
|
ramps.light.tint.4
|
oklch(0.978889 0.000787 249.334)
|
computed |
|
ramps.light.tint.5
|
oklch(0.990000 0.000352 247.426)
|
computed |
|
ramps.light.tint.6
|
oklch(0.900000 0.005973 246.988)
|
computed |
|
ramps.light.tint.7
|
oklch(0.820000 0.013228 245.807)
|
computed |
|
ramps.light.tint.8
|
oklch(0.740000 0.022995 244.618)
|
computed |
|
ramps.light.tint.9
|
oklch(0.650000 0.028519 244.683)
|
computed |
|
ramps.light.tint.10
|
oklch(0.550000 0.023630 245.707)
|
computed |
|
ramps.light.tint.11
|
oklch(0.400000 0.011891 247.523)
|
computed |
|
ramps.light.tint.12
|
oklch(0.220000 0.004020 250.894)
|
computed |
|
Designskalen
Typografie, Abstand, Rahmen, Radius, Tiefe und Bewegung werden direkt aus dem Skin projiziert.
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
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 |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
scales.elevation.levels.1
|
none
|
computed |
|
scales.elevation.levels.2
|
none
|
computed |
|
scales.elevation.levels.3
|
none
|
computed |
|
scales.elevation.shadowColor
|
oklch(0.2 0.04 242)
|
computed |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
scales.motion.durations.base
|
216ms
|
computed |
|
scales.motion.durations.fast
|
144ms
|
computed |
|
scales.motion.durations.reduced
|
0ms
|
computed |
|
scales.motion.durations.slow
|
336ms
|
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 |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
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 |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
scales.space.density
|
1
|
computed |
|
scales.space.steps.2xl
|
3.375rem
|
computed |
|
scales.space.steps.2xs
|
0.25rem
|
computed |
|
scales.space.steps.3xl
|
5.0625rem
|
computed |
|
scales.space.steps.lg
|
1.5rem
|
computed |
|
scales.space.steps.md
|
1rem
|
computed |
|
scales.space.steps.sectionBlock
|
clamp(2.25rem, 1.8098rem + 1.9565vw, 3.375rem)
|
computed |
|
scales.space.steps.sm
|
0.75rem
|
computed |
|
scales.space.steps.xl
|
2.25rem
|
computed |
|
scales.space.steps.xs
|
0.5rem
|
computed |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
scales.type.baseSize.max
|
1.125rem
|
computed |
|
scales.type.baseSize.min
|
1rem
|
computed |
|
scales.type.ratio.max
|
1.333
|
computed |
|
scales.type.ratio.min
|
1.2
|
computed |
|
scales.type.steps.base
|
clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem)
|
computed |
|
scales.type.steps.h1
|
clamp(2.0736rem, 1.4951rem + 2.5711vw, 3.552rem)
|
computed |
|
scales.type.steps.h2
|
clamp(1.5774rem, 1.2915rem + 1.2706vw, 2.308rem)
|
computed |
|
scales.type.steps.h3
|
clamp(1.3145rem, 1.1514rem + 0.725vw, 1.7314rem)
|
computed |
|
scales.type.steps.h4
|
clamp(1.2rem, 1.0828rem + 0.521vw, 1.4996rem)
|
computed |
|
scales.type.steps.lead
|
clamp(1.2rem, 1.0828rem + 0.521vw, 1.4996rem)
|
computed |
|
scales.type.steps.sm
|
clamp(0.9554rem, 0.9196rem + 0.1593vw, 1.047rem)
|
computed |
|
Oberflächenkoordinaten
Jede Kombination aus Modus, Tiefe, Hintergrund und semantischer Rolle besitzt eine verbindliche Zeile.
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
surfaces.dark.base.bold.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.base.bold.background
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.base.bold.backgroundMuted
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.base.bold.backgroundStrong
|
oklch(0.350000 0.001208 240.545)
|
computed |
ramps.dark.brand.5
|
surfaces.dark.base.bold.border
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
surfaces.dark.base.bold.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.base.bold.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.bold.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.bold.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.base.bold.interactive
|
oklch(0.720000 0.008381 258.455)
|
computed |
ramps.dark.neutral.9
|
surfaces.dark.base.bold.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.bold.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.bold.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.bold.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.base.bold.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.bold.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.bold.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.base.bold.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.base.branded.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.base.branded.background
|
oklch(0.194444 0.002781 241.636)
|
computed |
ramps.dark.brand.2
|
surfaces.dark.base.branded.backgroundMuted
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.base.branded.backgroundStrong
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.base.branded.border
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.branded.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.base.branded.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.branded.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.branded.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.base.branded.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.branded.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.branded.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.branded.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.branded.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.base.branded.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.branded.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.branded.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.base.branded.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.base.neutral.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.base.neutral.background
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.neutral.backgroundMuted
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
surfaces.dark.base.neutral.backgroundStrong
|
oklch(0.238889 0.000688 257.364)
|
computed |
ramps.dark.neutral.3
|
surfaces.dark.base.neutral.border
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
surfaces.dark.base.neutral.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.base.neutral.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.neutral.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.neutral.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.base.neutral.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.neutral.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.neutral.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.neutral.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.neutral.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.base.neutral.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.neutral.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.neutral.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.base.neutral.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.base.tinted.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.base.tinted.background
|
oklch(0.150000 0.001070 251.872)
|
computed |
ramps.dark.tint.1
|
surfaces.dark.base.tinted.backgroundMuted
|
oklch(0.194444 0.001099 251.343)
|
computed |
ramps.dark.tint.2
|
surfaces.dark.base.tinted.backgroundStrong
|
oklch(0.238889 0.001028 250.350)
|
computed |
ramps.dark.tint.3
|
surfaces.dark.base.tinted.border
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
surfaces.dark.base.tinted.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.base.tinted.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.tinted.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.tinted.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.base.tinted.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.tinted.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.tinted.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.tinted.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.tinted.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.base.tinted.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.base.tinted.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.base.tinted.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.base.tinted.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.high.bold.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.high.bold.background
|
oklch(0.350000 0.001208 240.545)
|
computed |
ramps.dark.brand.5
|
surfaces.dark.high.bold.backgroundMuted
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.high.bold.backgroundStrong
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.high.bold.border
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.high.bold.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.high.bold.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.bold.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.bold.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.high.bold.interactive
|
oklch(0.720000 0.008381 258.455)
|
computed |
ramps.dark.neutral.9
|
surfaces.dark.high.bold.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.bold.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.bold.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.bold.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.high.bold.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.bold.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.bold.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.high.bold.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.high.branded.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.high.branded.background
|
oklch(0.350000 0.001208 240.545)
|
computed |
ramps.dark.brand.5
|
surfaces.dark.high.branded.backgroundMuted
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.high.branded.backgroundStrong
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.high.branded.border
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.high.branded.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.high.branded.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.branded.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.branded.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.high.branded.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.branded.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.branded.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.branded.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.branded.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.high.branded.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.branded.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.branded.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.high.branded.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.high.neutral.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.high.neutral.background
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.high.neutral.backgroundMuted
|
oklch(0.238889 0.000688 257.364)
|
computed |
ramps.dark.neutral.3
|
surfaces.dark.high.neutral.backgroundStrong
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
surfaces.dark.high.neutral.border
|
oklch(0.238889 0.000688 257.364)
|
computed |
ramps.dark.neutral.3
|
surfaces.dark.high.neutral.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.high.neutral.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.neutral.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.neutral.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.high.neutral.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.neutral.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.neutral.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.neutral.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.neutral.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.high.neutral.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.neutral.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.neutral.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.high.neutral.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.high.tinted.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.high.tinted.background
|
oklch(0.305556 0.000669 249.334)
|
computed |
ramps.dark.tint.4
|
surfaces.dark.high.tinted.backgroundMuted
|
oklch(0.238889 0.001028 250.350)
|
computed |
ramps.dark.tint.3
|
surfaces.dark.high.tinted.backgroundStrong
|
oklch(0.194444 0.001099 251.343)
|
computed |
ramps.dark.tint.2
|
surfaces.dark.high.tinted.border
|
oklch(0.238889 0.000688 257.364)
|
computed |
ramps.dark.neutral.3
|
surfaces.dark.high.tinted.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.high.tinted.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.tinted.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.tinted.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.high.tinted.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.tinted.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.tinted.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.tinted.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.tinted.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.high.tinted.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.high.tinted.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.high.tinted.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.high.tinted.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.highest.bold.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.highest.bold.background
|
oklch(0.350000 0.001208 240.545)
|
computed |
ramps.dark.brand.5
|
surfaces.dark.highest.bold.backgroundMuted
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.highest.bold.backgroundStrong
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.highest.bold.border
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.highest.bold.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.highest.bold.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.bold.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.bold.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.highest.bold.interactive
|
oklch(0.720000 0.008381 258.455)
|
computed |
ramps.dark.neutral.9
|
surfaces.dark.highest.bold.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.bold.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.bold.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.bold.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.highest.bold.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.bold.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.bold.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.highest.bold.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.highest.branded.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.highest.branded.background
|
oklch(0.350000 0.001208 240.545)
|
computed |
ramps.dark.brand.5
|
surfaces.dark.highest.branded.backgroundMuted
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.highest.branded.backgroundStrong
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.highest.branded.border
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.highest.branded.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.highest.branded.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.branded.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.branded.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.highest.branded.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.branded.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.branded.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.branded.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.branded.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.highest.branded.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.branded.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.branded.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.highest.branded.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.highest.neutral.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.highest.neutral.background
|
oklch(0.350000 0.000143 257.727)
|
computed |
ramps.dark.neutral.5
|
surfaces.dark.highest.neutral.backgroundMuted
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.highest.neutral.backgroundStrong
|
oklch(0.238889 0.000688 257.364)
|
computed |
ramps.dark.neutral.3
|
surfaces.dark.highest.neutral.border
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.highest.neutral.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.highest.neutral.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.neutral.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.neutral.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.highest.neutral.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.neutral.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.neutral.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.neutral.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.neutral.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.highest.neutral.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.neutral.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.neutral.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.highest.neutral.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.highest.tinted.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.highest.tinted.background
|
oklch(0.350000 0.000299 247.426)
|
computed |
ramps.dark.tint.5
|
surfaces.dark.highest.tinted.backgroundMuted
|
oklch(0.305556 0.000669 249.334)
|
computed |
ramps.dark.tint.4
|
surfaces.dark.highest.tinted.backgroundStrong
|
oklch(0.238889 0.001028 250.350)
|
computed |
ramps.dark.tint.3
|
surfaces.dark.highest.tinted.border
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.highest.tinted.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.highest.tinted.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.tinted.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.tinted.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.highest.tinted.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.tinted.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.tinted.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.tinted.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.tinted.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.highest.tinted.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.highest.tinted.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.highest.tinted.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.highest.tinted.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.low.bold.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.low.bold.background
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.low.bold.backgroundMuted
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.low.bold.backgroundStrong
|
oklch(0.194444 0.002781 241.636)
|
computed |
ramps.dark.brand.2
|
surfaces.dark.low.bold.border
|
oklch(0.238889 0.000688 257.364)
|
computed |
ramps.dark.neutral.3
|
surfaces.dark.low.bold.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.low.bold.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.bold.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.bold.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.low.bold.interactive
|
oklch(0.720000 0.008381 258.455)
|
computed |
ramps.dark.neutral.9
|
surfaces.dark.low.bold.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.bold.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.bold.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.bold.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.low.bold.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.bold.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.bold.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.low.bold.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.low.branded.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.low.branded.background
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.low.branded.backgroundMuted
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.low.branded.backgroundStrong
|
oklch(0.350000 0.001208 240.545)
|
computed |
ramps.dark.brand.5
|
surfaces.dark.low.branded.border
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
surfaces.dark.low.branded.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.low.branded.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.branded.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.branded.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.low.branded.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.branded.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.branded.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.branded.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.branded.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.low.branded.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.branded.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.branded.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.low.branded.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.low.neutral.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.low.neutral.background
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
surfaces.dark.low.neutral.backgroundMuted
|
oklch(0.238889 0.000688 257.364)
|
computed |
ramps.dark.neutral.3
|
surfaces.dark.low.neutral.backgroundStrong
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.low.neutral.border
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.neutral.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.low.neutral.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.neutral.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.neutral.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.low.neutral.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.neutral.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.neutral.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.neutral.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.neutral.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.low.neutral.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.neutral.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.neutral.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.low.neutral.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.low.tinted.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.low.tinted.background
|
oklch(0.194444 0.001099 251.343)
|
computed |
ramps.dark.tint.2
|
surfaces.dark.low.tinted.backgroundMuted
|
oklch(0.238889 0.001028 250.350)
|
computed |
ramps.dark.tint.3
|
surfaces.dark.low.tinted.backgroundStrong
|
oklch(0.305556 0.000669 249.334)
|
computed |
ramps.dark.tint.4
|
surfaces.dark.low.tinted.border
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.tinted.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.low.tinted.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.tinted.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.tinted.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.low.tinted.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.tinted.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.tinted.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.tinted.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.tinted.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.low.tinted.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.low.tinted.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.low.tinted.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.low.tinted.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.mid.bold.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.mid.bold.background
|
oklch(0.350000 0.001208 240.545)
|
computed |
ramps.dark.brand.5
|
surfaces.dark.mid.bold.backgroundMuted
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.mid.bold.backgroundStrong
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.mid.bold.border
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.mid.bold.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.mid.bold.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.bold.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.bold.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.mid.bold.interactive
|
oklch(0.720000 0.008381 258.455)
|
computed |
ramps.dark.neutral.9
|
surfaces.dark.mid.bold.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.bold.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.bold.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.bold.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.mid.bold.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.bold.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.bold.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.mid.bold.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.mid.branded.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.mid.branded.background
|
oklch(0.305556 0.002225 240.909)
|
computed |
ramps.dark.brand.4
|
surfaces.dark.mid.branded.backgroundMuted
|
oklch(0.238889 0.003020 241.273)
|
computed |
ramps.dark.brand.3
|
surfaces.dark.mid.branded.backgroundStrong
|
oklch(0.194444 0.002781 241.636)
|
computed |
ramps.dark.brand.2
|
surfaces.dark.mid.branded.border
|
oklch(0.238889 0.000688 257.364)
|
computed |
ramps.dark.neutral.3
|
surfaces.dark.mid.branded.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.mid.branded.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.branded.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.branded.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.mid.branded.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.branded.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.branded.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.branded.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.branded.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.mid.branded.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.branded.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.branded.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.mid.branded.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.mid.neutral.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.mid.neutral.background
|
oklch(0.238889 0.000688 257.364)
|
computed |
ramps.dark.neutral.3
|
surfaces.dark.mid.neutral.backgroundMuted
|
oklch(0.305556 0.000403 257.545)
|
computed |
ramps.dark.neutral.4
|
surfaces.dark.mid.neutral.backgroundStrong
|
oklch(0.350000 0.000143 257.727)
|
computed |
ramps.dark.neutral.5
|
surfaces.dark.mid.neutral.border
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
surfaces.dark.mid.neutral.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.mid.neutral.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.neutral.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.neutral.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.mid.neutral.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.neutral.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.neutral.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.neutral.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.neutral.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.mid.neutral.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.neutral.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.neutral.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.mid.neutral.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.mid.tinted.accent
|
oklch(0.720000 0.126325 274.909)
|
computed |
ramps.dark.accent.9
|
surfaces.dark.mid.tinted.background
|
oklch(0.238889 0.001028 250.350)
|
computed |
ramps.dark.tint.3
|
surfaces.dark.mid.tinted.backgroundMuted
|
oklch(0.305556 0.000669 249.334)
|
computed |
ramps.dark.tint.4
|
surfaces.dark.mid.tinted.backgroundStrong
|
oklch(0.350000 0.000299 247.426)
|
computed |
ramps.dark.tint.5
|
surfaces.dark.mid.tinted.border
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
surfaces.dark.mid.tinted.borderStrong
|
oklch(0.650000 0.006415 258.273)
|
computed |
ramps.dark.neutral.8
|
surfaces.dark.mid.tinted.brand
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.tinted.focus
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.tinted.heading
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.mid.tinted.interactive
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.tinted.onAccent
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.tinted.onBold
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.tinted.onBrand
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.tinted.placeholder
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.dark.mid.tinted.primaryContrast
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
surfaces.dark.mid.tinted.selection
|
oklch(0.720000 0.116033 239.091)
|
computed |
ramps.dark.brand.9
|
surfaces.dark.mid.tinted.text
|
oklch(0.940000 0.002503 259.000)
|
computed |
ramps.dark.neutral.12
|
surfaces.dark.mid.tinted.textMuted
|
oklch(0.870000 0.005416 258.818)
|
computed |
ramps.dark.neutral.11
|
surfaces.light.base.bold.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.base.bold.background
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.base.bold.backgroundMuted
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.base.bold.backgroundStrong
|
oklch(0.990000 0.001421 240.545)
|
computed |
ramps.light.brand.5
|
surfaces.light.base.bold.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.base.bold.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.base.bold.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.base.bold.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.base.bold.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.base.bold.interactive
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.base.bold.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.bold.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.bold.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.bold.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.base.bold.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.bold.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.base.bold.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.base.bold.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.base.branded.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.base.branded.background
|
oklch(0.951111 0.003272 241.636)
|
computed |
ramps.light.brand.2
|
surfaces.light.base.branded.backgroundMuted
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.base.branded.backgroundStrong
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.base.branded.border
|
oklch(0.962222 0.000810 257.364)
|
computed |
ramps.light.neutral.3
|
surfaces.light.base.branded.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.base.branded.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.base.branded.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.base.branded.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.base.branded.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.base.branded.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.branded.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.branded.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.branded.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.base.branded.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.branded.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.base.branded.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.base.branded.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.base.neutral.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.base.neutral.background
|
oklch(0.940000 0.000981 257.000)
|
computed |
ramps.light.neutral.1
|
surfaces.light.base.neutral.backgroundMuted
|
oklch(0.951111 0.000957 257.182)
|
computed |
ramps.light.neutral.2
|
surfaces.light.base.neutral.backgroundStrong
|
oklch(0.962222 0.000810 257.364)
|
computed |
ramps.light.neutral.3
|
surfaces.light.base.neutral.border
|
oklch(0.951111 0.000957 257.182)
|
computed |
ramps.light.neutral.2
|
surfaces.light.base.neutral.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.base.neutral.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.base.neutral.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.base.neutral.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.base.neutral.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.base.neutral.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.neutral.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.neutral.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.neutral.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.base.neutral.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.neutral.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.base.neutral.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.base.neutral.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.base.tinted.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.base.tinted.background
|
oklch(0.940000 0.001259 251.872)
|
computed |
ramps.light.tint.1
|
surfaces.light.base.tinted.backgroundMuted
|
oklch(0.951111 0.001293 251.343)
|
computed |
ramps.light.tint.2
|
surfaces.light.base.tinted.backgroundStrong
|
oklch(0.962222 0.001210 250.350)
|
computed |
ramps.light.tint.3
|
surfaces.light.base.tinted.border
|
oklch(0.951111 0.000957 257.182)
|
computed |
ramps.light.neutral.2
|
surfaces.light.base.tinted.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.base.tinted.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.base.tinted.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.base.tinted.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.base.tinted.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.base.tinted.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.tinted.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.tinted.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.tinted.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.base.tinted.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.base.tinted.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.base.tinted.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.base.tinted.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.high.bold.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.high.bold.background
|
oklch(0.990000 0.001421 240.545)
|
computed |
ramps.light.brand.5
|
surfaces.light.high.bold.backgroundMuted
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.high.bold.backgroundStrong
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.high.bold.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.high.bold.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.high.bold.brand
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.high.bold.focus
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.high.bold.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.bold.interactive
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.high.bold.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.bold.onBold
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.bold.onBrand
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.bold.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.high.bold.primaryContrast
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.bold.selection
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.high.bold.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.bold.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.high.branded.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.high.branded.background
|
oklch(0.990000 0.001421 240.545)
|
computed |
ramps.light.brand.5
|
surfaces.light.high.branded.backgroundMuted
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.high.branded.backgroundStrong
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.high.branded.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.high.branded.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.high.branded.brand
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.high.branded.focus
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.high.branded.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.branded.interactive
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.high.branded.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.branded.onBold
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.branded.onBrand
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.branded.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.high.branded.primaryContrast
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.branded.selection
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.high.branded.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.branded.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.high.neutral.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.high.neutral.background
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.high.neutral.backgroundMuted
|
oklch(0.962222 0.000810 257.364)
|
computed |
ramps.light.neutral.3
|
surfaces.light.high.neutral.backgroundStrong
|
oklch(0.951111 0.000957 257.182)
|
computed |
ramps.light.neutral.2
|
surfaces.light.high.neutral.border
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.neutral.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.high.neutral.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.high.neutral.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.high.neutral.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.neutral.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.high.neutral.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.neutral.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.neutral.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.neutral.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.high.neutral.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.neutral.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.high.neutral.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.neutral.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.high.tinted.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.high.tinted.background
|
oklch(0.978889 0.000787 249.334)
|
computed |
ramps.light.tint.4
|
surfaces.light.high.tinted.backgroundMuted
|
oklch(0.962222 0.001210 250.350)
|
computed |
ramps.light.tint.3
|
surfaces.light.high.tinted.backgroundStrong
|
oklch(0.951111 0.001293 251.343)
|
computed |
ramps.light.tint.2
|
surfaces.light.high.tinted.border
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.tinted.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.high.tinted.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.high.tinted.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.high.tinted.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.tinted.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.high.tinted.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.tinted.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.tinted.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.tinted.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.high.tinted.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.high.tinted.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.high.tinted.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.high.tinted.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.highest.bold.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.highest.bold.background
|
oklch(0.990000 0.001421 240.545)
|
computed |
ramps.light.brand.5
|
surfaces.light.highest.bold.backgroundMuted
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.highest.bold.backgroundStrong
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.highest.bold.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.highest.bold.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.highest.bold.brand
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.highest.bold.focus
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.highest.bold.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.bold.interactive
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.highest.bold.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.highest.bold.onBold
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.bold.onBrand
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.bold.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.highest.bold.primaryContrast
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.bold.selection
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.highest.bold.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.bold.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.highest.branded.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.highest.branded.background
|
oklch(0.990000 0.001421 240.545)
|
computed |
ramps.light.brand.5
|
surfaces.light.highest.branded.backgroundMuted
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.highest.branded.backgroundStrong
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.highest.branded.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.highest.branded.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.highest.branded.brand
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.highest.branded.focus
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.highest.branded.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.branded.interactive
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.highest.branded.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.highest.branded.onBold
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.branded.onBrand
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.branded.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.highest.branded.primaryContrast
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.branded.selection
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.highest.branded.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.branded.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.highest.neutral.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.highest.neutral.background
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.highest.neutral.backgroundMuted
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.highest.neutral.backgroundStrong
|
oklch(0.962222 0.000810 257.364)
|
computed |
ramps.light.neutral.3
|
surfaces.light.highest.neutral.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.highest.neutral.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.highest.neutral.brand
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.highest.neutral.focus
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.highest.neutral.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.neutral.interactive
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.highest.neutral.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.highest.neutral.onBold
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.neutral.onBrand
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.neutral.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.highest.neutral.primaryContrast
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.neutral.selection
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.highest.neutral.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.neutral.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.highest.tinted.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.highest.tinted.background
|
oklch(0.990000 0.000352 247.426)
|
computed |
ramps.light.tint.5
|
surfaces.light.highest.tinted.backgroundMuted
|
oklch(0.978889 0.000787 249.334)
|
computed |
ramps.light.tint.4
|
surfaces.light.highest.tinted.backgroundStrong
|
oklch(0.962222 0.001210 250.350)
|
computed |
ramps.light.tint.3
|
surfaces.light.highest.tinted.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.highest.tinted.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.highest.tinted.brand
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.highest.tinted.focus
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.highest.tinted.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.tinted.interactive
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.highest.tinted.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.highest.tinted.onBold
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.tinted.onBrand
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.tinted.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.highest.tinted.primaryContrast
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.tinted.selection
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.highest.tinted.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.highest.tinted.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.low.bold.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.low.bold.background
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.low.bold.backgroundMuted
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.low.bold.backgroundStrong
|
oklch(0.951111 0.003272 241.636)
|
computed |
ramps.light.brand.2
|
surfaces.light.low.bold.border
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.bold.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.low.bold.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.low.bold.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.low.bold.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.low.bold.interactive
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.low.bold.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.bold.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.bold.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.bold.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.low.bold.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.bold.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.low.bold.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.low.bold.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.low.branded.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.low.branded.background
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.low.branded.backgroundMuted
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.low.branded.backgroundStrong
|
oklch(0.990000 0.001421 240.545)
|
computed |
ramps.light.brand.5
|
surfaces.light.low.branded.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.low.branded.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.low.branded.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.low.branded.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.low.branded.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.low.branded.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.low.branded.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.branded.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.branded.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.branded.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.low.branded.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.branded.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.low.branded.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.low.branded.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.low.neutral.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.low.neutral.background
|
oklch(0.951111 0.000957 257.182)
|
computed |
ramps.light.neutral.2
|
surfaces.light.low.neutral.backgroundMuted
|
oklch(0.962222 0.000810 257.364)
|
computed |
ramps.light.neutral.3
|
surfaces.light.low.neutral.backgroundStrong
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.low.neutral.border
|
oklch(0.962222 0.000810 257.364)
|
computed |
ramps.light.neutral.3
|
surfaces.light.low.neutral.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.low.neutral.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.low.neutral.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.low.neutral.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.low.neutral.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.low.neutral.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.neutral.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.neutral.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.neutral.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.low.neutral.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.neutral.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.low.neutral.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.low.neutral.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.low.tinted.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.low.tinted.background
|
oklch(0.951111 0.001293 251.343)
|
computed |
ramps.light.tint.2
|
surfaces.light.low.tinted.backgroundMuted
|
oklch(0.962222 0.001210 250.350)
|
computed |
ramps.light.tint.3
|
surfaces.light.low.tinted.backgroundStrong
|
oklch(0.978889 0.000787 249.334)
|
computed |
ramps.light.tint.4
|
surfaces.light.low.tinted.border
|
oklch(0.962222 0.000810 257.364)
|
computed |
ramps.light.neutral.3
|
surfaces.light.low.tinted.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.low.tinted.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.low.tinted.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.low.tinted.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.low.tinted.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.low.tinted.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.tinted.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.tinted.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.tinted.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.low.tinted.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.low.tinted.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.low.tinted.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.low.tinted.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.mid.bold.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.mid.bold.background
|
oklch(0.990000 0.001421 240.545)
|
computed |
ramps.light.brand.5
|
surfaces.light.mid.bold.backgroundMuted
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.mid.bold.backgroundStrong
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.mid.bold.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.mid.bold.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.mid.bold.brand
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.mid.bold.focus
|
oklch(0.650000 0.136510 239.091)
|
computed |
ramps.light.brand.9
|
surfaces.light.mid.bold.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.bold.interactive
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.mid.bold.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.bold.onBold
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.bold.onBrand
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.bold.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.mid.bold.primaryContrast
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.bold.selection
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.mid.bold.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.bold.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.mid.branded.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.mid.branded.background
|
oklch(0.978889 0.002618 240.909)
|
computed |
ramps.light.brand.4
|
surfaces.light.mid.branded.backgroundMuted
|
oklch(0.962222 0.003553 241.273)
|
computed |
ramps.light.brand.3
|
surfaces.light.mid.branded.backgroundStrong
|
oklch(0.951111 0.003272 241.636)
|
computed |
ramps.light.brand.2
|
surfaces.light.mid.branded.border
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.branded.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.mid.branded.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.mid.branded.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.mid.branded.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.branded.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.mid.branded.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.branded.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.branded.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.branded.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.mid.branded.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.branded.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.mid.branded.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.branded.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.mid.neutral.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.mid.neutral.background
|
oklch(0.962222 0.000810 257.364)
|
computed |
ramps.light.neutral.3
|
surfaces.light.mid.neutral.backgroundMuted
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.mid.neutral.backgroundStrong
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.neutral.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.mid.neutral.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.mid.neutral.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.mid.neutral.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.mid.neutral.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.neutral.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.mid.neutral.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.neutral.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.neutral.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.neutral.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.mid.neutral.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.neutral.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.mid.neutral.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.neutral.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.mid.tinted.accent
|
oklch(0.550000 0.178818 275.273)
|
computed |
ramps.light.accent.10
|
surfaces.light.mid.tinted.background
|
oklch(0.962222 0.001210 250.350)
|
computed |
ramps.light.tint.3
|
surfaces.light.mid.tinted.backgroundMuted
|
oklch(0.978889 0.000787 249.334)
|
computed |
ramps.light.tint.4
|
surfaces.light.mid.tinted.backgroundStrong
|
oklch(0.990000 0.000352 247.426)
|
computed |
ramps.light.tint.5
|
surfaces.light.mid.tinted.border
|
oklch(0.978889 0.000474 257.545)
|
computed |
ramps.light.neutral.4
|
surfaces.light.mid.tinted.borderStrong
|
oklch(0.550000 0.009921 258.636)
|
computed |
ramps.light.neutral.10
|
surfaces.light.mid.tinted.brand
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.mid.tinted.focus
|
oklch(0.550000 0.103504 238.727)
|
computed |
ramps.light.brand.10
|
surfaces.light.mid.tinted.heading
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.tinted.interactive
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.mid.tinted.onAccent
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.tinted.onBold
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.tinted.onBrand
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.tinted.placeholder
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
surfaces.light.mid.tinted.primaryContrast
|
oklch(0.990000 0.000168 257.727)
|
computed |
ramps.light.neutral.5
|
surfaces.light.mid.tinted.selection
|
oklch(0.400000 0.044431 238.364)
|
computed |
ramps.light.brand.11
|
surfaces.light.mid.tinted.text
|
oklch(0.220000 0.002945 259.000)
|
computed |
ramps.light.neutral.12
|
surfaces.light.mid.tinted.textMuted
|
oklch(0.400000 0.006372 258.818)
|
computed |
ramps.light.neutral.11
|
Semantische Rollen
Typografie-, Abstands- und Rückmeldungsrollen verbinden Bedeutung mit wiederverwendbaren Ausgaben.
Typografierollen
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
typeRoles.body.family
|
secondary
|
computed |
|
typeRoles.body.lineHeight
|
1.6
|
computed |
|
typeRoles.body.step
|
base
|
computed |
|
typeRoles.body.weight
|
400
|
computed |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
typeRoles.display.family
|
primary
|
computed |
|
typeRoles.display.letterSpacing
|
-0.015em
|
computed |
|
typeRoles.display.lineHeight
|
1.12
|
computed |
|
typeRoles.display.step
|
h1
|
computed |
|
typeRoles.display.weight
|
700
|
computed |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
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
|
650
|
computed |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
typeRoles.label.family
|
secondary
|
computed |
|
typeRoles.label.lineHeight
|
1.25
|
computed |
|
typeRoles.label.step
|
sm
|
computed |
|
typeRoles.label.weight
|
500
|
computed |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
typeRoles.mono.family
|
tertiary
|
computed |
|
typeRoles.mono.lineHeight
|
1.6
|
computed |
|
typeRoles.mono.step
|
sm
|
computed |
|
typeRoles.mono.weight
|
400
|
computed |
|
Abstandsrollen
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
spaceRoles.controlGap
|
0.75rem
|
computed |
scales.space.steps.sm
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
spaceRoles.controlPaddingBlock
|
0.75rem
|
computed |
scales.space.steps.sm
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
spaceRoles.controlPaddingInline
|
1rem
|
computed |
scales.space.steps.md
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
spaceRoles.denseSection
|
2.25rem
|
computed |
scales.space.steps.xl
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
spaceRoles.fine
|
0.25rem
|
computed |
scales.space.steps.2xs
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
spaceRoles.flowGap
|
1rem
|
computed |
scales.space.steps.md
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
spaceRoles.focalSection
|
3.375rem
|
computed |
scales.space.steps.2xl
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
spaceRoles.headingAfter
|
0.55em
|
manual |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
spaceRoles.iconGap
|
0.5rem
|
computed |
scales.space.steps.xs
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
spaceRoles.inlineControl
|
0.75rem
|
computed |
scales.space.steps.sm
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
spaceRoles.pageGutter
|
1.5rem
|
computed |
scales.space.steps.lg
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
spaceRoles.pageShellGap
|
2.25rem
|
computed |
scales.space.steps.xl
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
spaceRoles.relatedGroup
|
1.5rem
|
computed |
scales.space.steps.lg
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
spaceRoles.repeatedContainer
|
1.5rem
|
computed |
scales.space.steps.lg
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
spaceRoles.routineSection
|
clamp(2.25rem, 1.8098rem + 1.9565vw, 3.375rem)
|
computed |
scales.space.steps.sectionBlock
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
spaceRoles.sectionBlock
|
clamp(2.25rem, 1.8098rem + 1.9565vw, 3.375rem)
|
computed |
scales.space.steps.sectionBlock
|
Rückmeldungsrollen
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
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 |
|
Komponentenverträge
Komponentenwerte stammen aus dem endgültigen deklarierten Graphen und seinen aktiven Verbrauchern.
Aktive Autorendaten
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
components.blockquote.borderWidth
|
0.25rem
|
manual |
scales.border.widths.blockquote
|
| 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 |
|
components.body.queryInlineSize
|
100cqi
|
manual |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
components.card.borderWidth
|
0.0625rem
|
manual |
scales.border.widths.default
|
components.card.padding
|
1.5rem
|
computed |
scales.space.steps.lg
|
components.card.radius
|
1.25rem
|
computed |
scales.radius.steps.large
|
components.card.shadow
|
none
|
manual |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
components.choiceControl.opticalOffset
|
0.25rem
|
computed |
scales.space.steps.2xs
|
components.choiceControl.size
|
1rem
|
computed |
scales.space.steps.md
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
components.control.disabledOpacity
|
0.6
|
manual |
|
components.control.minBlockSize
|
2.75rem
|
manual |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
components.form.fieldBackground.dark
|
oklch(0.150000 0.000834 257.000)
|
computed |
ramps.dark.neutral.1
|
components.form.fieldBackground.light
|
oklch(0.962222 0.000810 257.364)
|
computed |
surfaces.light.base.neutral.backgroundStrong
|
components.form.fieldBackgroundFocus.dark
|
oklch(0.194444 0.000813 257.182)
|
computed |
ramps.dark.neutral.2
|
components.form.fieldBackgroundFocus.light
|
oklch(0.951111 0.000957 257.182)
|
computed |
surfaces.light.base.neutral.backgroundMuted
|
components.form.inlineThreshold
|
48rem
|
manual |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
components.grid.fiveColumnThreshold
|
72rem
|
manual |
|
components.grid.fourColumnThreshold
|
64rem
|
manual |
|
components.grid.gap
|
1.5rem
|
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 |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
components.inlineCode.padding
|
0.15em 0.4em
|
manual |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
components.link.decorationColor
|
color-mix(in srgb, currentColor 38%, transparent)
|
manual |
|
components.link.decorationThickness
|
0.08em
|
manual |
|
components.link.underlineOffset
|
0.16em
|
manual |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
components.list.indentation
|
1.5rem
|
computed |
scales.space.steps.lg
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
components.navigation.containerGap
|
1.5rem
|
computed |
scales.space.steps.lg
|
components.navigation.expandedThreshold
|
768px
|
manual |
|
components.navigation.itemFlow
|
0.5rem
|
computed |
scales.space.steps.xs
|
components.navigation.languageExpandedThreshold
|
36rem
|
manual |
|
components.navigation.menuDesktopGap
|
1rem
|
computed |
scales.space.steps.md
|
components.navigation.menuGap
|
0.75rem
|
computed |
scales.space.steps.sm
|
components.navigation.menuWideGap
|
1rem
|
computed |
scales.space.steps.md
|
components.navigation.panelDesktopGap
|
1rem
|
computed |
scales.space.steps.md
|
components.navigation.panelGap
|
1.5rem
|
computed |
scales.space.steps.lg
|
components.navigation.primaryGap
|
1rem
|
computed |
scales.space.steps.md
|
components.navigation.spaciousThreshold
|
960px
|
manual |
|
components.navigation.utilitiesFlow
|
1rem
|
computed |
scales.space.steps.md
|
components.navigation.utilityGap
|
0.75rem
|
computed |
scales.space.steps.sm
|
components.navigation.utilityInlineThreshold
|
481px
|
manual |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
components.submitControl.minInlineSize
|
16rem
|
manual |
|
| Pfad | Wert | Quelle | Referenz |
|---|---|---|---|
components.textarea.minBlockSize
|
10rem
|
manual |
|
Echte semantische Beispiele
Diese Beispiele verwenden normale semantische Elemente und das vollständige geregelte Designvokabular.
light
light / tinted
Diese semantische Karte nutzt den gewählten Modus und Hintergrund über das geregelte Vokabular.
light / branded
Diese semantische Karte nutzt den gewählten Modus und Hintergrund über das geregelte Vokabular.
light / bold
Diese semantische Karte nutzt den gewählten Modus und Hintergrund über das geregelte Vokabular.
dark
dark / neutral
Diese semantische Karte nutzt den gewählten Modus und Hintergrund über das geregelte Vokabular.
dark / tinted
Diese semantische Karte nutzt den gewählten Modus und Hintergrund über das geregelte Vokabular.
dark / branded
Diese semantische Karte nutzt den gewählten Modus und Hintergrund über das geregelte Vokabular.
dark / bold
Diese semantische Karte nutzt den gewählten Modus und Hintergrund über das geregelte Vokabular.
Kartenvertrag
Kartenvertrag
Dieser Artikel nutzt das vollständige Kartenpaket ohne Darstellungsklasse.
Statusbeispiel mit der Erfolgsdarstellung des Frameworks.
Alarmbeispiel mit der Fehlerdarstellung des Frameworks.
Komponenten-Beziehungsmatrix
Echte semantische Steuerelemente prüfen jeden veröffentlichten Oberflächenkontext und Interaktionszustand.
dark.base.bold
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
dark.base.branded
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
dark.base.neutral
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
dark.base.tinted
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
dark.high.bold
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
dark.high.branded
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
dark.high.neutral
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
dark.high.tinted
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
dark.highest.bold
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
dark.highest.branded
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
dark.highest.neutral
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
dark.highest.tinted
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
dark.low.bold
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
dark.low.branded
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
dark.low.neutral
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
dark.low.tinted
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
dark.mid.bold
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
dark.mid.branded
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
dark.mid.neutral
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
dark.mid.tinted
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.base.bold
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.base.branded
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.base.neutral
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.base.tinted
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.high.bold
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.high.branded
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.high.neutral
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.high.tinted
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.highest.bold
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.highest.branded
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.highest.neutral
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.highest.tinted
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.low.bold
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.low.branded
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.low.neutral
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.low.tinted
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.mid.bold
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.mid.branded
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.mid.neutral
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
light.mid.tinted
Zusammenfassung
Der Inhalt bleibt sichtbar, semantisch und per Tastatur bedienbar.
Erfolgsmeldung
Warnmeldung
Fehlermeldung
Informationsmeldung
| Beziehung |
|---|
| Gerendertes Ergebnis |
Beziehungsmatrix für Abschnittsraster
Diese Beispiele durchlaufen das normale Schema, die Dokumenterweiterung und den Layout-Compiler.
Abschnittsraster-Überschrift
Abschnittsraster-Überschrift
Abschnittsraster-Überschrift
Abschnittsraster-Überschrift
Abschnittsraster-Überschrift
Abschnittsraster-Überschrift
Abschnittsraster-Überschrift
one
two
three
four
Abschnittsraster-Überschrift
Erzeugte und geregelte Ausgaben
Eigenschaften, Build-Variablen und Klassen werden aus ihren zuständigen Manifesten und Schemas abgeleitet.
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-transition-slow
|
semantic |
scales.motion.durations.slow, 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-duration-slow
|
primitive |
scales.motion.durations.slow
|
--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
| Name | Quelle |
|---|---|
$base-document-query-inline-size
|
components.body.queryInlineSize
|
$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
| 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
| Name | Eigentümer | Zweck |
|---|---|---|
action-group
|
src/site/modules/elements/action-group
|
Adjacent action layout |
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 |
media-arrangement-featured
|
src/site/pipeline/media.js
|
Full-span featured card slots |
media-arrangement-overlay
|
src/site/pipeline/media.js
|
Overlaid media and content slots |
media-arrangement-split
|
src/site/pipeline/media.js
|
Container-responsive split slots |
media-arrangement-stacked
|
src/site/pipeline/media.js
|
Stacked media and content slots |
media-aspect-auto
|
src/site/styles/generated.scss
|
Accepted automatic media aspect |
media-aspect-behavior-adaptive
|
src/site/pipeline/media.js
|
Container-responsive intrinsic-to-fixed media aspect behavior |
media-aspect-behavior-fixed
|
src/site/pipeline/media.js
|
Fixed media aspect behavior |
media-aspect-classic
|
src/site/styles/generated.scss
|
Accepted classic media aspect |
media-aspect-landscape
|
src/site/styles/generated.scss
|
Accepted landscape media aspect |
media-aspect-portrait
|
src/site/styles/generated.scss
|
Accepted portrait media aspect |
media-aspect-square
|
src/site/styles/generated.scss
|
Accepted square media aspect |
media-aspect-tall
|
src/site/styles/generated.scss
|
Accepted tall media aspect |
media-aspect-vertical
|
src/site/styles/generated.scss
|
Accepted vertical media aspect |
media-aspect-widescreen
|
src/site/styles/generated.scss
|
Accepted widescreen media aspect |
media-attachment-fixed
|
src/site/pipeline/media.js
|
Capability-gated fixed image backdrop reveal |
media-attachment-fixed-wide
|
src/site/pipeline/media.js
|
Wide-container fixed image backdrop reveal |
media-attachment-scroll
|
src/site/pipeline/media.js
|
Normal section backdrop attachment |
media-caption-center
|
src/site/pipeline/media.js
|
Design-owned centered caption alignment |
media-caption-credit-corner
|
src/site/modules/elements/media-frame.njk
|
Credit-only figcaption overlay bound to the media viewport |
media-caption-start
|
src/site/pipeline/media.js
|
Design-owned start caption alignment |
media-content
|
src/site/modules/elements/container/container.njk
|
Shared non-media content slot for media hosts |
media-credit
|
src/site/modules/elements/media-frame.njk
|
Catalog-derived media provenance |
media-credit-corner
|
src/site/modules/elements/media-frame.njk
|
Shared corner credit treatment |
media-credit-corner-end
|
src/site/modules/elements/media-frame.njk
|
Logical-end image credit placement |
media-credit-corner-start
|
src/site/modules/elements/media-frame.njk
|
Logical-start image credit placement |
media-download
|
src/site/modules/elements/media-frame.njk
|
Explicit separately named raw-master download action |
media-fit-contain
|
src/site/pipeline/media.js
|
Contain media fit |
media-fit-cover
|
src/site/pipeline/media.js
|
Cover media fit |
media-frame
|
src/site/pipeline/media.js
|
Shared semantic image frame |
media-frame-none
|
src/site/pipeline/media.js
|
Unframed media treatment |
media-frame-raised
|
src/site/pipeline/media.js
|
Raised media frame treatment |
media-frame-subtle
|
src/site/pipeline/media.js
|
Subtle media frame treatment |
media-gallery
|
src/site/modules/elements/media-gallery
|
Static-first gallery container |
media-gallery-capacity-1
|
src/site/modules/elements/media-gallery
|
Scroll-snap gallery with a one-item maximum capacity |
media-gallery-capacity-2
|
src/site/modules/elements/media-gallery
|
Scroll-snap gallery with a two-item maximum capacity |
media-gallery-capacity-3
|
src/site/modules/elements/media-gallery
|
Scroll-snap gallery with a three-item maximum capacity |
media-gallery-capacity-4
|
src/site/modules/elements/media-gallery
|
Scroll-snap gallery with a four-item maximum capacity |
media-gallery-capacity-5
|
src/site/modules/elements/media-gallery
|
Scroll-snap gallery with a five-item maximum capacity |
media-gallery-capacity-6
|
src/site/modules/elements/media-gallery
|
Scroll-snap gallery with a six-item maximum capacity |
media-gallery-presentation-grid
|
src/site/styles/framework.scss
|
Static responsive gallery grid |
media-gallery-presentation-mosaic
|
src/site/styles/framework.scss
|
Named mixed-prominence gallery composition |
media-gallery-presentation-scroll-snap
|
src/site/styles/framework.scss
|
Capacity-controlled horizontal scroll-snap gallery |
media-gallery-track
|
src/site/modules/elements/media-gallery
|
Grid and scroll-snap gallery layout host |
media-image
|
src/site/pipeline/media.js
|
Canonical responsive image projection |
media-image-focal-adaptive
|
src/site/pipeline/media.js
|
Catalog focal-point projection for adaptive multi-column crops |
media-laboratory
|
src/site/common/media-laboratory/media-laboratory.render.yaml
|
Technical media appendix spacing boundary |
media-layout-card-bleed
|
src/site/pipeline/media.js
|
Edge-to-edge card media layout recipe |
media-layout-card-contained
|
src/site/pipeline/media.js
|
Padded card media layout recipe |
media-layout-edge-to-edge
|
src/site/pipeline/media.js
|
Edge media beside contained content recipe |
media-layout-editorial-offset
|
src/site/pipeline/media.js
|
Offset editorial media recipe |
media-layout-editorial-split
|
src/site/pipeline/media.js
|
Responsive editorial split recipe |
media-layout-full-bleed
|
src/site/pipeline/media.js
|
Full-width media with contained content recipe |
media-layout-gallery-grid
|
src/site/pipeline/media.js
|
Uniform gallery layout recipe |
media-layout-gallery-mosaic
|
src/site/pipeline/media.js
|
Mixed-prominence gallery layout recipe |
media-layout-inline
|
src/site/pipeline/media.js
|
Inline media layout recipe |
media-layout-overlap
|
src/site/pipeline/media.js
|
Bounded media and content overlap recipe |
media-layout-section-backdrop
|
src/site/pipeline/media.js
|
Discoverable section backdrop recipe |
media-layout-video
|
src/site/pipeline/media.js
|
Poster-first video layout recipe |
media-lightbox
|
src/site/modules/elements/media-gallery
|
Native dialog lightbox |
media-lightbox-actions
|
src/site/modules/elements/media-gallery
|
Native previous and next lightbox actions |
media-lightbox-close
|
src/site/modules/elements/media-gallery
|
Native dialog close action |
media-lightbox-figure
|
src/site/modules/elements/media-gallery
|
Expanded image and caption composition |
media-lightbox-link
|
src/site/modules/elements/media-frame.njk
|
Styled direct-image link enhanced by the optional lightbox |
media-lightbox-media
|
src/site/modules/elements/media-frame.njk
|
Inert responsive lightbox media template |
media-lightbox-stage
|
src/site/modules/elements/media-gallery
|
Responsive expanded rendition stage |
media-lightbox-status
|
src/site/modules/elements/media-gallery
|
Current gallery position announcement |
media-lightbox-unavailable
|
src/site/modules/elements/media-gallery
|
Component-local expanded-image failure and recovery state |
media-mosaic-enhanced
|
src/site/assets/js/media-mosaic.js
|
Measured mosaic row-span capability |
media-motion-hover-zoom
|
src/site/pipeline/media.js
|
Hover-capable clipped media enlargement |
media-motion-none
|
src/site/pipeline/media.js
|
Static media treatment |
media-motion-parallax-medium
|
src/site/pipeline/media.js
|
Progressive medium-distance view-timeline parallax treatment |
media-motion-parallax-strong
|
src/site/pipeline/media.js
|
Progressive strong-distance view-timeline parallax treatment |
media-motion-parallax-subtle
|
src/site/pipeline/media.js
|
Progressive low-distance view-timeline parallax treatment |
media-motion-reveal
|
src/site/pipeline/media.js
|
Progressive view-timeline reveal treatment |
media-overlay-none
|
src/site/pipeline/media.js
|
Resolved media without a readability overlay |
media-overlay-readable
|
src/site/pipeline/media.js
|
Media requiring a framework-owned readability scrim |
media-position-after
|
src/site/pipeline/media.js
|
Logical after media position |
media-position-before
|
src/site/pipeline/media.js
|
Logical before media position |
media-position-inline
|
src/site/pipeline/media.js
|
Inline media position |
media-position-overlay
|
src/site/pipeline/media.js
|
Overlay media position |
media-prominence-featured
|
src/site/pipeline/media.js
|
Featured media item prominence |
media-prominence-standard
|
src/site/pipeline/media.js
|
Standard media item prominence |
media-relationship-card-media
|
src/site/pipeline/media.js
|
Card media relationship |
media-relationship-figure
|
src/site/pipeline/media.js
|
Figure media relationship |
media-relationship-gallery-item
|
src/site/pipeline/media.js
|
Gallery item media relationship |
media-relationship-inline
|
src/site/pipeline/media.js
|
Inline media relationship |
media-relationship-section-backdrop
|
src/site/pipeline/media.js
|
Section backdrop media relationship |
media-relationship-section-media
|
src/site/pipeline/media.js
|
Editorial section media relationship |
media-relationship-video
|
src/site/pipeline/media.js
|
Video media relationship |
media-tone-branded
|
src/site/pipeline/media.js
|
Branded media tone |
media-tone-muted
|
src/site/pipeline/media.js
|
Muted media tone |
media-tone-natural
|
src/site/pipeline/media.js
|
Natural media tone |
media-transcript-link
|
src/site/modules/elements/media-frame.njk
|
Localized informative-video transcript reference |
media-video
|
src/site/pipeline/media.js
|
Canonical poster-first video projection |
media-video-toggle
|
src/site/modules/elements/container/container.njk
|
Accessible decorative-video pause and resume action |
media-video-unavailable
|
src/site/modules/elements/media-frame.njk
|
Component-local video request failure and retry state |
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 |
skip-link
|
src/site/common/skip-link
|
Keyboard-visible native link to the shared main-content target |
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)
- 23
Analysestatus und Hinweise
Die optionale APCA-Analyse ist nicht aktiviert. Die WCAG-2.2-Kontrastprüfungen des Repositorys bleiben aktiv.