Porsche Design System

Color

Variables#

Background

Color

Tailwind CSS variable

Tailwind CSS class

Description

Value

--color-canvas

.bg-canvas

Applies the canvas color, typically used for surfaces.

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

--color-surface

.bg-surface

Applies the surface color, typically used for surfaces.

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

--color-frosted

.bg-frosted

Applies the frosted color, typically used as a background in combination with a blur effect .backdrop-blur-frosted.

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

--color-frosted-soft

.bg-frosted-soft

Applies the frosted color, typically used as a background :hover.

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

--color-frosted-strong

.bg-frosted-strong

Applies the frosted color, typically used as a background in combination with a blur effect .backdrop-blur-frosted.

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

--color-backdrop

.bg-backdrop

Applies the backdrop color, typically used for backdrops.

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

Foreground

Color

Tailwind CSS variable

Tailwind CSS class

Description

Value

--color-contrast-lower

.border-contrast-lower

Applies the contrast-lower color, intended only for decorative elements, as it is not accessibility-compliant.

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

--color-contrast-low

.border-contrast-low

Applies the contrast-low color, intended only for decorative elements, as it is not accessibility-compliant.

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

--color-contrast-medium

.text-contrast-medium

Applies the contrast-medium color, typically used for text.

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

--color-contrast-high

.text-contrast-high

Applies the contrast-high color, typically used for text.

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

--color-contrast-higher

.text-contrast-higher

Applies the contrast-higher color, typically used for text.

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

--color-primary

.text-primary

Applies the primary color, typically used for text.

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

Semantic

Color

Tailwind CSS variable

Tailwind CSS class

Description

Value

--color-success

.text-success

Applies the success color, typically used for text.

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

--color-success-low

.text-success .border-success

Applies the success color, typically used for text or border.

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

--color-success-medium

.text-success .border-success

Applies the success color, typically used for text or border.

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

--color-success-frosted

.bg-success-frosted

Applies the success-frosted color, typically used as background in combination with a blur effect .backdrop-blur-frosted.

var(--_color-success-frosted-dynamic, light-dark(hsl(109 100% 90% / 0.55),hsl(157 79% 20% / 0.66)))

--color-success-frosted-soft

.bg-success-frosted-soft

Applies the success-frosted-soft color, typically used as background :hover.

var(--_color-success-frosted-soft-dynamic, light-dark(hsl(109 80% 95% / 0.55),hsl(157 59% 15% / 0.66)))

--color-warning

.text-warning

Applies the warning color, typically used for text.

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

--color-warning-low

.text-warning .border-warning

Applies the warning color, typically used for text or border.

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

--color-warning-medium

.text-warning .border-warning

Applies the warning color, typically used for text or border.

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

--color-warning-frosted

.bg-warning-frosted

Applies the warning-frosted color, typically used as background in combination with a blur effect .backdrop-blur-frosted.

var(--_color-warning-frosted-dynamic, light-dark(hsl(40 100% 90% / 0.55),hsl(52 79% 20% / 0.66)))

--color-warning-frosted-soft

.bg-warning-frosted-soft

Applies the warning-frosted-soft color, typically used as background :hover.

var(--_color-warning-frosted-soft-dynamic, light-dark(hsl(40 80% 95% / 0.55),hsl(52 59% 15% / 0.66)))

--color-error

.text-error

Applies the error color, typically used for text.

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

--color-error-low

.text-error .border-error

Applies the error color, typically used for text or border.

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

--color-error-medium

.text-error .border-error

Applies the error color, typically used for text or border.

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

--color-error-frosted

.bg-error-frosted

Applies the error-frosted color, typically used as background in combination with a blur effect .backdrop-blur-frosted.

var(--_color-error-frosted-dynamic, light-dark(hsl(0 100% 90% / 0.55),hsl(0 79% 20% / 0.66)))

--color-error-frosted-soft

.bg-error-frosted-soft

Applies the error-frosted-soft color, typically used as background :hover.

var(--_color-error-frosted-soft-dynamic, light-dark(hsl(0 80% 95% / 0.55),hsl(0 59% 15% / 0.66)))

--color-info

.text-info

Applies the info color, typically used for text.

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

--color-info-low

.text-info .border-info

Applies the info color, typically used for text or border.

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

--color-info-medium

.text-info .border-info

Applies the info color, typically used for text or border.

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

--color-info-frosted

.bg-info-frosted

Applies the info-frosted color, typically used as background in combination with a blur effect .backdrop-blur-frosted.

var(--_color-info-frosted-dynamic, light-dark(hsl(211 100% 90% / 0.55),hsl(210 79% 20% / 0.66)))

--color-info-frosted-soft

.bg-info-frosted-soft

Applies the info-frosted-soft color, typically used as background :hover.

var(--_color-info-frosted-soft-dynamic, light-dark(hsl(211 80% 95% / 0.55),hsl(210 59% 15% / 0.66)))

A11y

Color

Tailwind CSS variable

Tailwind CSS class

Description

Value

--color-focus

.outline-focus

Applies the focus color, typically used as the outline for :focus-visible states.

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