Porsche Design System

Color

Table of Contents

JS#

Background

Color

Description

Value

colorCanvas

Holds the light-dark() canvas color, typically used for surfaces.

var(--_color-canvas, light-dark(#fff,hsl(225 66.7% 1.2%)))

colorSurface

Holds the light-dark() surface color, typically used for surfaces.

var(--_color-surface, light-dark(hsl(240 10% 95%),hsl(240 2% 10%)))

colorFrosted

Holds the light-dark() frosted color, typically used as a background in combination with blur().

var(--_color-frosted, light-dark(hsl(240 5% 70% / 0.148),hsl(240 2% 43% / 0.228)))

colorFrostedSoft

Holds the light-dark() frosted-soft color, typically used as a background :hover.

var(--_color-frosted-soft, light-dark(hsl(234 9.8% 60% / 0.06),hsl(240 3.7% 26.5% / 0.154)))

colorFrostedStrong

Holds the light-dark() frosted color, typically used as a background in combination with blur().

var(--_color-frosted-strong, light-dark(hsl(236 6.5% 42% / 0.236),hsl(240 1.5% 61.8% / 0.302)))

colorBackdrop

Holds the light-dark() backdrop color, typically used for backdrops.

var(--_color-backdrop, light-dark(hsl(240 5.3% 14.9% / 0.5),hsl(240 5.3% 14.9% / 0.5)))

Foreground

Color

Description

Value

colorPrimary

Holds the light-dark() primary color, typically used for text.

var(--_color-primary, light-dark(hsl(225 66.7% 1.2%),hsl(225 100% 99%)))

colorContrastHigher

Holds the light-dark() contrast-higher color, typically used for text.

var(--_color-contrast-higher, light-dark(hsl(240 8.7% 9% / 0.8),hsl(240 12.5% 96.9% / 0.78)))

colorContrastHigh

Holds the light-dark() contrast-high color, typically used for text.

var(--_color-contrast-high, light-dark(hsl(240 7.1% 11% / 0.7),hsl(240 12.5% 96.9% / 0.67)))

colorContrastMedium

Holds the light-dark() contrast-medium color, typically used for text.

var(--_color-contrast-medium, light-dark(hsl(240 6.1% 7% / 0.6),hsl(240 12.5% 96.9% / 0.56)))

colorContrastLow

Holds the light-dark() contrast-low color, intended only for decorative elements.

var(--_color-contrast-low, light-dark(hsl(240 5.3% 14.9% / 0.5),hsl(240 12.5% 96.9% / 0.45)))

colorContrastLower

Holds the light-dark() contrast-lower color, intended only for decorative elements.

var(--_color-contrast-lower, light-dark(hsl(234 6% 32.9% / 0.324),hsl(240 1.5% 61.8% / 0.302)))

Semantic

Color

Description

Value

colorInfo

Holds the light-dark() info color, typically used for text.

var(--_color-info, light-dark(hsl(228 83.2% 51%),hsl(210 100% 54.5%)))

colorInfoMedium

Holds the light-dark() info-medium color, typically used for text or border.

var(--_color-info-medium, light-dark(hsl(228 83.2% 51% / 0.6),hsl(210 100% 54.5% / 0.6)))

colorInfoLow

Holds the light-dark() info-low color, typically used for text or border.

var(--_color-info-low, light-dark(hsl(228 83.2% 51% / 0.18),hsl(210 100% 54.5% / 0.18)))

colorInfoFrosted

Holds the light-dark() info-frosted color, typically used as background with .backdrop-blur-frosted.

var(--_color-info-frosted, light-dark(hsl(228 83.2% 51% / 0.18),hsl(210 100% 54.5% / 0.26)))

colorInfoFrostedSoft

Holds the light-dark() info-frosted-soft color, typically used as background :hover.

var(--_color-info-frosted-soft, light-dark(hsl(228 83.2% 51% / 0.1),hsl(210 100% 54.5% / 0.1)))

colorSuccess

Holds the light-dark() success color, typically used for text.

var(--_color-success, light-dark(hsl(115 77.5% 27.8%),hsl(157 84.9% 41.6%)))

colorSuccessMedium

Holds the light-dark() success-medium color, typically used for text or border.

var(--_color-success-medium, light-dark(hsl(115 77.5% 27.8% / 0.6),hsl(157 84.9% 41.6% / 0.6)))

colorSuccessLow

Holds the light-dark() success-low color, typically used for text or border.

var(--_color-success-low, light-dark(hsl(115 77.5% 27.8% / 0.18),hsl(157 84.9% 41.6% / 0.18)))

colorSuccessFrosted

Holds the light-dark() success-frosted color, typically used as background with .backdrop-blur-frosted.

var(--_color-success-frosted, light-dark(hsl(115 77.5% 27.8% / 0.18),hsl(157 84.9% 41.6% / 0.26)))

colorSuccessFrostedSoft

Holds the light-dark() success-frosted-soft color, typically used as background :hover.

var(--_color-success-frosted-soft, light-dark(hsl(115 77.5% 27.8% / 0.1),hsl(157 84.9% 41.6% / 0.1)))

colorWarning

Holds the light-dark() warning color, typically used for text.

var(--_color-warning, light-dark(hsl(28 97.7% 34.1%),hsl(28 90.2% 56.1%)))

colorWarningMedium

Holds the light-dark() warning-medium color, typically used for text or border.

var(--_color-warning-medium, light-dark(hsl(28 97.7% 34.1% / 0.6),hsl(28 90.2% 56.1% / 0.6)))

colorWarningLow

Holds the light-dark() warning-low color, typically used for text or border.

var(--_color-warning-low, light-dark(hsl(28 97.7% 34.1% / 0.18),hsl(28 90.2% 56.1% / 0.18)))

colorWarningFrosted

Holds the light-dark() warning-frosted color, typically used as background with .backdrop-blur-frosted.

var(--_color-warning-frosted, light-dark(hsl(28 97.7% 34.1% / 0.18),hsl(28 90.2% 56.1% / 0.26)))

colorWarningFrostedSoft

Holds the light-dark() warning-frosted-soft color, typically used as background :hover.

var(--_color-warning-frosted-soft, light-dark(hsl(28 97.7% 34.1% / 0.1),hsl(28 90.2% 56.1% / 0.1)))

colorError

Holds the light-dark() error color, typically used for text.

var(--_color-error, light-dark(hsl(357 78% 41%),hsl(0 96.9% 62%)))

colorErrorMedium

Holds the light-dark() error-medium color, typically used for text or border.

var(--_color-error-medium, light-dark(hsl(357 78% 41% / 0.6),hsl(0 96.9% 62% / 0.6)))

colorErrorLow

Holds the light-dark() error-low color, typically used for text or border.

var(--_color-error-low, light-dark(hsl(357 78% 41% / 0.18),hsl(0 96.9% 62% / 0.18)))

colorErrorFrosted

Holds the light-dark() error-frosted color, typically used as background with .backdrop-blur-frosted.

var(--_color-error-frosted, light-dark(hsl(357 78% 41% / 0.18),hsl(0 96.9% 62% / 0.26)))

colorErrorFrostedSoft

Holds the light-dark() error-frosted-soft color, typically used as background :hover.

var(--_color-error-frosted-soft, light-dark(hsl(357 78% 41% / 0.1),hsl(0 96.9% 62% / 0.1)))

A11y

Color

Description

Value

colorFocus

Holds the light-dark() focus color, typically used as the outline for :focus-visible states.

var(--_color-focus, light-dark(#1A44EA,#1A44EA))