light / neutral
Esta tarjeta semántica usa la etapa y el fondo seleccionados mediante el vocabulario gobernado.
Referencia viva del skin
Esta página se compila con el mismo skin declarado, los contratos y los manifiestos que construyen el sitio.
Procedencia de la compilación
Estos valores identifican el estado declarado exacto representado por esta página.
- Versión del esquema
- 2
- Hash de marca
-
3d2cda447b6ac2aa2f26c3279cc49165d0563a5a707f62f7e333b3eec2611e7a - Integridad de la marca
- complete
- Carencias de marca
- 2
- Última revisión por
- agent
- Fecha de revisión
- 2026-07-30
Entradas de identidad
Las entradas de marca y comportamiento conservan su procedencia para mostrar las decisiones aceptadas y calculadas.
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
Rampas de color
A continuación se enumera cada paso declarado para ambas etapas y las cuatro familias de color.
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
Escalas de diseño
Los valores de tipografía, espacio, borde, radio, elevación y movimiento proceden directamente del skin.
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
Coordenadas de superficie
Cada etapa, profundidad, fondo y rol semántico de superficie tiene una fila autoritativa.
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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
|
Roles semánticos
Los roles tipográficos, espaciales y de estado conectan el significado con salidas reutilizables.
Roles tipográficos
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
typeRoles.body.family
|
secondary
|
computed |
|
typeRoles.body.lineHeight
|
1.6
|
computed |
|
typeRoles.body.step
|
base
|
computed |
|
typeRoles.body.weight
|
400
|
computed |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
typeRoles.label.family
|
secondary
|
computed |
|
typeRoles.label.lineHeight
|
1.25
|
computed |
|
typeRoles.label.step
|
sm
|
computed |
|
typeRoles.label.weight
|
500
|
computed |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
typeRoles.mono.family
|
tertiary
|
computed |
|
typeRoles.mono.lineHeight
|
1.6
|
computed |
|
typeRoles.mono.step
|
sm
|
computed |
|
typeRoles.mono.weight
|
400
|
computed |
|
Roles de espacio
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
spaceRoles.controlGap
|
0.75rem
|
computed |
scales.space.steps.sm
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
spaceRoles.controlPaddingBlock
|
0.75rem
|
computed |
scales.space.steps.sm
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
spaceRoles.controlPaddingInline
|
1rem
|
computed |
scales.space.steps.md
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
spaceRoles.denseSection
|
2.25rem
|
computed |
scales.space.steps.xl
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
spaceRoles.fine
|
0.25rem
|
computed |
scales.space.steps.2xs
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
spaceRoles.flowGap
|
1rem
|
computed |
scales.space.steps.md
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
spaceRoles.focalSection
|
3.375rem
|
computed |
scales.space.steps.2xl
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
spaceRoles.headingAfter
|
0.55em
|
manual |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
spaceRoles.iconGap
|
0.5rem
|
computed |
scales.space.steps.xs
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
spaceRoles.inlineControl
|
0.75rem
|
computed |
scales.space.steps.sm
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
spaceRoles.pageGutter
|
1.5rem
|
computed |
scales.space.steps.lg
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
spaceRoles.pageShellGap
|
2.25rem
|
computed |
scales.space.steps.xl
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
spaceRoles.relatedGroup
|
1.5rem
|
computed |
scales.space.steps.lg
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
spaceRoles.repeatedContainer
|
1.5rem
|
computed |
scales.space.steps.lg
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
spaceRoles.routineSection
|
clamp(2.25rem, 1.8098rem + 1.9565vw, 3.375rem)
|
computed |
scales.space.steps.sectionBlock
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
spaceRoles.sectionBlock
|
clamp(2.25rem, 1.8098rem + 1.9565vw, 3.375rem)
|
computed |
scales.space.steps.sectionBlock
|
Roles de estado
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
Contratos de componentes
Los valores de componentes proceden del grafo declarado final y de sus consumidores activos.
Datos activos de autoría
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
components.blockquote.borderWidth
|
0.25rem
|
manual |
scales.border.widths.blockquote
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
components.choiceControl.opticalOffset
|
0.25rem
|
computed |
scales.space.steps.2xs
|
components.choiceControl.size
|
1rem
|
computed |
scales.space.steps.md
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
components.control.disabledOpacity
|
0.6
|
manual |
|
components.control.minBlockSize
|
2.75rem
|
manual |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
components.inlineCode.padding
|
0.15em 0.4em
|
manual |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
components.link.decorationColor
|
color-mix(in srgb, currentColor 38%, transparent)
|
manual |
|
components.link.decorationThickness
|
0.08em
|
manual |
|
components.link.underlineOffset
|
0.16em
|
manual |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
components.list.indentation
|
1.5rem
|
computed |
scales.space.steps.lg
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
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 |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
components.submitControl.minInlineSize
|
16rem
|
manual |
|
| Ruta | Valor | Fuente | Referencia |
|---|---|---|---|
components.textarea.minBlockSize
|
10rem
|
manual |
|
Ejemplos semánticos reales
Estos ejemplos usan elementos semánticos normales y el vocabulario de diseño gobernado completo.
light
light / tinted
Esta tarjeta semántica usa la etapa y el fondo seleccionados mediante el vocabulario gobernado.
light / branded
Esta tarjeta semántica usa la etapa y el fondo seleccionados mediante el vocabulario gobernado.
light / bold
Esta tarjeta semántica usa la etapa y el fondo seleccionados mediante el vocabulario gobernado.
dark
dark / neutral
Esta tarjeta semántica usa la etapa y el fondo seleccionados mediante el vocabulario gobernado.
dark / tinted
Esta tarjeta semántica usa la etapa y el fondo seleccionados mediante el vocabulario gobernado.
dark / branded
Esta tarjeta semántica usa la etapa y el fondo seleccionados mediante el vocabulario gobernado.
dark / bold
Esta tarjeta semántica usa la etapa y el fondo seleccionados mediante el vocabulario gobernado.
Contrato de tarjeta
Contrato de tarjeta
Este artículo consume el paquete completo de tarjeta sin una clase de presentación.
Ejemplo de estado con el tratamiento de éxito del framework.
Ejemplo de alerta con el tratamiento de error del framework.
Matriz de relaciones de componentes
Controles semánticos reales prueban cada contexto de superficie y estado de interacción publicado.
dark.base.bold
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
dark.base.branded
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
dark.base.neutral
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
dark.base.tinted
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
dark.high.bold
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
dark.high.branded
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
dark.high.neutral
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
dark.high.tinted
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
dark.highest.bold
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
dark.highest.branded
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
dark.highest.neutral
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
dark.highest.tinted
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
dark.low.bold
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
dark.low.branded
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
dark.low.neutral
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
dark.low.tinted
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
dark.mid.bold
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
dark.mid.branded
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
dark.mid.neutral
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
dark.mid.tinted
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.base.bold
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.base.branded
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.base.neutral
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.base.tinted
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.high.bold
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.high.branded
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.high.neutral
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.high.tinted
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.highest.bold
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.highest.branded
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.highest.neutral
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.highest.tinted
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.low.bold
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.low.branded
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.low.neutral
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.low.tinted
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.mid.bold
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.mid.branded
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.mid.neutral
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
light.mid.tinted
Resumen desplegable
El contenido sigue visible, semántico y operable con teclado.
Mensaje de éxito
Mensaje de advertencia
Mensaje de error
Mensaje informativo
| Relación |
|---|
| Resultado pintado |
Matriz de relaciones de la cuadrícula de sección
Estos ejemplos pasan por el esquema, la expansión del documento y el compilador de diseño normales.
Cabecera de cuadrícula de sección
Cabecera de cuadrícula de sección
Cabecera de cuadrícula de sección
Cabecera de cuadrícula de sección
Cabecera de cuadrícula de sección
Cabecera de cuadrícula de sección
Cabecera de cuadrícula de sección
one
two
three
four
Cabecera de cuadrícula de sección
Salidas emitidas y gobernadas
Las propiedades, variables de compilación y clases proceden de sus manifiestos y esquemas propietarios.
Propiedades personalizadas generadas
| Nombre | Tipo | Fuente |
|---|---|---|
--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
|
Variables Sass
| Nombre | Fuente |
|---|---|
$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
|
Clases de diseño gobernadas
| Nombre | Fuente |
|---|---|
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
|
Clases de framework gobernadas
| Nombre | Propietario | Propósito |
|---|---|---|
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 |
Estado del lint del skin
Los recuentos y avisos proceden de la misma evaluación usada por la puerta de compilación.
- Hallazgos bloqueantes
- 0
- Hallazgos exentos
- 0
- Exenciones sin usar
- 0
- Valores de componente gobernados (nivel 3)
- 23
Estado de análisis y avisos
El análisis APCA opcional no está habilitado. Las comprobaciones de contraste WCAG 2.2 del repositorio siguen activas.