Color Tokens# Background ColorTokenDescriptionValue

colorCanvasHolds the canvas color, typically used for surfaces.light-dark(#fff,hsl(225 66.7% 1.2%))

colorSurfaceHolds the surface color, typically used for surfaces.light-dark(hsl(240 10% 95%),hsl(240 2% 10%))

colorFrostedHolds the frosted color, typically used as a background in combination with a blur effect.light-dark(hsl(240 5% 70% / 0.148),hsl(240 2% 43% / 0.228))

colorFrostedSoftHolds the frosted color, typically used as a background :hover.light-dark(hsl(234 9.8% 60% / 0.06),hsl(240 3.7% 26.5% / 0.154))

colorBackdropHolds the backdrop color, typically used for backdrops.light-dark(hsl(240 5.3% 14.9% / 0.5),hsl(240 5.3% 14.9% / 0.5)) Foreground ColorTokenDescriptionValue

colorPrimaryHolds the primary color, typically used for text.light-dark(hsl(225 66.7% 1.2%),hsl(225 100% 99%))

colorContrastHigherHolds the contrast-higher color, typically used for text.light-dark(hsl(240 8.7% 9% / 0.8),hsl(240 12.5% 96.9% / 0.78))

colorContrastHighHolds the contrast-high color, typically used for text.light-dark(hsl(240 7.1% 11% / 0.7),hsl(240 12.5% 96.9% / 0.67))

colorContrastMediumHolds the contrast-medium color, typically used for text.light-dark(hsl(240 6.1% 7% / 0.6),hsl(240 12.5% 96.9% / 0.56))

colorContrastLowHolds the contrast-low color, intended only for decorative elements, as it is not accessibility-compliant.light-dark(hsl(240 5.3% 14.9% / 0.5),hsl(240 12.5% 96.9% / 0.45))

colorContrastLowerHolds the contrast-lower color, intended only for decorative elements, as it is not accessibility-compliant.light-dark(hsl(234 6% 32.9% / 0.324),hsl(240 1.5% 61.8% / 0.302)) Semantic ColorTokenDescriptionValue

colorInfoHolds the info color, typically used for text.light-dark(hsl(228 83.2% 51%),hsl(210 100% 54.5%))

colorInfoMediumHolds the info color, typically used for text or border.light-dark(hsl(228 83.2% 51% / 0.6),hsl(210 100% 54.5% / 0.6))

colorInfoLowHolds the info color, typically used for text or border.light-dark(hsl(228 83.2% 51% / 0.18),hsl(210 100% 54.5% / 0.18))

colorInfoFrostedHolds the info-frosted color, typically used as background in combination with a blur effect.light-dark(hsl(211 100% 90% / 0.55),hsl(210 79% 20% / 0.66))

colorInfoFrostedSoftHolds the info-frosted-soft color, typically used as background :hover.light-dark(hsl(211 80% 95% / 0.55),hsl(210 59% 15% / 0.66))

colorSuccessHolds the success color, typically used for text.light-dark(hsl(115 77.5% 27.8%),hsl(157 84.9% 41.6%))

colorSuccessMediumHolds the success color, typically used for text or border.light-dark(hsl(115 77.5% 27.8% / 0.6),hsl(157 84.9% 41.6% / 0.6))

colorSuccessLowHolds the success color, typically used for text or border.light-dark(hsl(115 77.5% 27.8% / 0.18),hsl(157 84.9% 41.6% / 0.18))

colorSuccessFrostedHolds the success-frosted color, typically used as background in combination with a blur effect.light-dark(hsl(109 100% 90% / 0.55),hsl(157 79% 20% / 0.66))

colorSuccessFrostedSoftHolds the success-frosted-soft color, typically used as background :hover.light-dark(hsl(109 80% 95% / 0.55),hsl(157 59% 15% / 0.66))

colorWarningHolds the warning color, typically used for text.light-dark(hsl(28 97.7% 34.1%),hsl(28 90.2% 56.1%))

colorWarningMediumHolds the warning color, typically used for text or border.light-dark(hsl(28 97.7% 34.1% / 0.6),hsl(28 90.2% 56.1% / 0.6))

colorWarningLowHolds the warning color, typically used for text or border.light-dark(hsl(28 97.7% 34.1% / 0.18),hsl(28 90.2% 56.1% / 0.18))

colorWarningFrostedHolds the warning-frosted color, typically used as background in combination with a blur effect.light-dark(hsl(40 100% 90% / 0.55),hsl(52 79% 20% / 0.66))

colorWarningFrostedSoftHolds the warning-frosted-soft color, typically used as background :hover.light-dark(hsl(40 80% 95% / 0.55),hsl(52 59% 15% / 0.66))

colorErrorHolds the error color, typically used for text.light-dark(hsl(357 78% 41%),hsl(0 96.9% 62%))

colorErrorMediumHolds the error color, typically used for text or border.light-dark(hsl(357 78% 41% / 0.6),hsl(0 96.9% 62% / 0.6))

colorErrorLowHolds the error color, typically used for text or border.light-dark(hsl(357 78% 41% / 0.18),hsl(0 96.9% 62% / 0.18))

colorErrorFrostedHolds the error-frosted color, typically used as background in combination with a blur effect .light-dark(hsl(0 100% 90% / 0.55),hsl(0 79% 20% / 0.66))

colorErrorFrostedSoftHolds the error-frosted-soft color, typically used as background :hover.light-dark(hsl(0 80% 95% / 0.55),hsl(0 59% 15% / 0.66)) A11y ColorTokenDescriptionValue

colorFocusHolds the focus color, typically used as the outline for :focus-visible states.light-dark(#1A44EA,#1A44EA)