light / neutral
This semantic card uses the selected stage and background through the governed design vocabulary.
Living skin reference
This page is compiled from the same declared skin, contracts, and manifests that build the site.
Build provenance
These values identify the exact declared state represented by this page.
- Schema version
- 2
- Brand hash
-
3d2cda447b6ac2aa2f26c3279cc49165d0563a5a707f62f7e333b3eec2611e7a - Brand completeness
- complete
- Brand gap count
- 2
- Last reviewed by
- agent
- Last reviewed date
- 2026-07-30
Identity inputs
Brand and behavior inputs are stored with their provenance so accepted and computed decisions stay visible.
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
Color ramps
Every declared stop across both color stages and all four ramp families is listed below.
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
Design scales
Type, spacing, border, radius, elevation, and motion values are projected directly from the skin.
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
Surface coordinates
Each stage, depth, background, and semantic surface role has one authoritative row.
| Path | Value | Source | Reference |
|---|---|---|---|
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
|
Semantic roles
Type, spacing, and feedback roles connect authored meaning to reusable output values.
Type roles
| Path | Value | Source | Reference |
|---|---|---|---|
typeRoles.body.family
|
secondary
|
computed |
|
typeRoles.body.lineHeight
|
1.6
|
computed |
|
typeRoles.body.step
|
base
|
computed |
|
typeRoles.body.weight
|
400
|
computed |
|
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
| Path | Value | Source | Reference |
|---|---|---|---|
typeRoles.label.family
|
secondary
|
computed |
|
typeRoles.label.lineHeight
|
1.25
|
computed |
|
typeRoles.label.step
|
sm
|
computed |
|
typeRoles.label.weight
|
500
|
computed |
|
| Path | Value | Source | Reference |
|---|---|---|---|
typeRoles.mono.family
|
tertiary
|
computed |
|
typeRoles.mono.lineHeight
|
1.6
|
computed |
|
typeRoles.mono.step
|
sm
|
computed |
|
typeRoles.mono.weight
|
400
|
computed |
|
Spacing roles
| Path | Value | Source | Reference |
|---|---|---|---|
spaceRoles.controlGap
|
0.75rem
|
computed |
scales.space.steps.sm
|
| Path | Value | Source | Reference |
|---|---|---|---|
spaceRoles.controlPaddingBlock
|
0.75rem
|
computed |
scales.space.steps.sm
|
| Path | Value | Source | Reference |
|---|---|---|---|
spaceRoles.controlPaddingInline
|
1rem
|
computed |
scales.space.steps.md
|
| Path | Value | Source | Reference |
|---|---|---|---|
spaceRoles.denseSection
|
2.25rem
|
computed |
scales.space.steps.xl
|
| Path | Value | Source | Reference |
|---|---|---|---|
spaceRoles.fine
|
0.25rem
|
computed |
scales.space.steps.2xs
|
| Path | Value | Source | Reference |
|---|---|---|---|
spaceRoles.flowGap
|
1rem
|
computed |
scales.space.steps.md
|
| Path | Value | Source | Reference |
|---|---|---|---|
spaceRoles.focalSection
|
3.375rem
|
computed |
scales.space.steps.2xl
|
| Path | Value | Source | Reference |
|---|---|---|---|
spaceRoles.headingAfter
|
0.55em
|
manual |
|
| Path | Value | Source | Reference |
|---|---|---|---|
spaceRoles.iconGap
|
0.5rem
|
computed |
scales.space.steps.xs
|
| Path | Value | Source | Reference |
|---|---|---|---|
spaceRoles.inlineControl
|
0.75rem
|
computed |
scales.space.steps.sm
|
| Path | Value | Source | Reference |
|---|---|---|---|
spaceRoles.pageGutter
|
1.5rem
|
computed |
scales.space.steps.lg
|
| Path | Value | Source | Reference |
|---|---|---|---|
spaceRoles.pageShellGap
|
2.25rem
|
computed |
scales.space.steps.xl
|
| Path | Value | Source | Reference |
|---|---|---|---|
spaceRoles.relatedGroup
|
1.5rem
|
computed |
scales.space.steps.lg
|
| Path | Value | Source | Reference |
|---|---|---|---|
spaceRoles.repeatedContainer
|
1.5rem
|
computed |
scales.space.steps.lg
|
| Path | Value | Source | Reference |
|---|---|---|---|
spaceRoles.routineSection
|
clamp(2.25rem, 1.8098rem + 1.9565vw, 3.375rem)
|
computed |
scales.space.steps.sectionBlock
|
| Path | Value | Source | Reference |
|---|---|---|---|
spaceRoles.sectionBlock
|
clamp(2.25rem, 1.8098rem + 1.9565vw, 3.375rem)
|
computed |
scales.space.steps.sectionBlock
|
Feedback roles
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
Component contracts
Component values are projected from the final declared graph and its live consumers.
Active authoring data
| Path | Value | Source | Reference |
|---|---|---|---|
components.blockquote.borderWidth
|
0.25rem
|
manual |
scales.border.widths.blockquote
|
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
| Path | Value | Source | Reference |
|---|---|---|---|
components.choiceControl.opticalOffset
|
0.25rem
|
computed |
scales.space.steps.2xs
|
components.choiceControl.size
|
1rem
|
computed |
scales.space.steps.md
|
| Path | Value | Source | Reference |
|---|---|---|---|
components.control.disabledOpacity
|
0.6
|
manual |
|
components.control.minBlockSize
|
2.75rem
|
manual |
|
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
| Path | Value | Source | Reference |
|---|---|---|---|
components.inlineCode.padding
|
0.15em 0.4em
|
manual |
|
| Path | Value | Source | Reference |
|---|---|---|---|
components.link.decorationColor
|
color-mix(in srgb, currentColor 38%, transparent)
|
manual |
|
components.link.decorationThickness
|
0.08em
|
manual |
|
components.link.underlineOffset
|
0.16em
|
manual |
|
| Path | Value | Source | Reference |
|---|---|---|---|
components.list.indentation
|
1.5rem
|
computed |
scales.space.steps.lg
|
| Path | Value | Source | Reference |
|---|---|---|---|
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 |
|
| Path | Value | Source | Reference |
|---|---|---|---|
components.submitControl.minInlineSize
|
16rem
|
manual |
|
| Path | Value | Source | Reference |
|---|---|---|---|
components.textarea.minBlockSize
|
10rem
|
manual |
|
Live semantic examples
These examples use the normal semantic elements and the complete governed design vocabulary.
light
light / tinted
This semantic card uses the selected stage and background through the governed design vocabulary.
light / branded
This semantic card uses the selected stage and background through the governed design vocabulary.
light / bold
This semantic card uses the selected stage and background through the governed design vocabulary.
dark
dark / neutral
This semantic card uses the selected stage and background through the governed design vocabulary.
dark / tinted
This semantic card uses the selected stage and background through the governed design vocabulary.
dark / branded
This semantic card uses the selected stage and background through the governed design vocabulary.
dark / bold
This semantic card uses the selected stage and background through the governed design vocabulary.
Card contract
Card contract
This article consumes the complete card component bundle without a presentation class.
Status example using the framework success treatment.
Alert example using the framework error treatment.
Component relationship matrix
Real semantic controls exercise every published surface context and interaction state.
dark.base.bold
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
dark.base.branded
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
dark.base.neutral
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
dark.base.tinted
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
dark.high.bold
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
dark.high.branded
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
dark.high.neutral
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
dark.high.tinted
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
dark.highest.bold
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
dark.highest.branded
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
dark.highest.neutral
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
dark.highest.tinted
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
dark.low.bold
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
dark.low.branded
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
dark.low.neutral
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
dark.low.tinted
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
dark.mid.bold
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
dark.mid.branded
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
dark.mid.neutral
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
dark.mid.tinted
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.base.bold
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.base.branded
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.base.neutral
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.base.tinted
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.high.bold
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.high.branded
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.high.neutral
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.high.tinted
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.highest.bold
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.highest.branded
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.highest.neutral
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.highest.tinted
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.low.bold
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.low.branded
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.low.neutral
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.low.tinted
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.mid.bold
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.mid.branded
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.mid.neutral
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
light.mid.tinted
Disclosure summary
Disclosure content remains visible, semantic, and keyboard operable.
Success feedback
Warning feedback
Error feedback
Information feedback
| Relationship |
|---|
| Painted result |
Section-grid relationship matrix
These examples pass through the normal schema, document expansion, and layout compiler.
Section-grid header
Section-grid header
Section-grid header
Section-grid header
Section-grid header
Section-grid header
Section-grid header
one
two
three
four
Section-grid header
Emitted and governed outputs
Properties, compile-time variables, and class surfaces are derived from their owning manifests and schemas.
Generated custom properties
| Name | Kind | Source |
|---|---|---|
--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 variables
| Name | Source |
|---|---|
$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
|
Governed design classes
| Name | Source |
|---|---|
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
|
Governed framework classes
| Name | Owner | Purpose |
|---|---|---|
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 state
Counts and advisories come from the same lint evaluation used by the build gate.
- Blocking findings
- 0
- Waived findings
- 0
- Unused waivers
- 0
- Governed component-level values (Tier 3)
- 23
Analysis status and advisories
Optional APCA analysis is not enabled. The repository's WCAG 2.2 contrast checks remain active.