Porsche Design System

Color

Table of Contents

Text Color
Background Color
Border Color

The Porsche Design System provides multiple SCSS Variables for color styles.

The colors use the light-dark() CSS color function. To change the theme, use the utility classes .scheme-light, .scheme-dark or .scheme-light-dark. Learn more in the Color Scheme section.

Styles import: @use '@porsche-design-system/components-{js|angular|react|vue}/scss' as *;

Text Color#

color: $color-primary;
color: $color-contrast-higher;
color: $color-contrast-high;
color: $color-contrast-medium;
color: $color-success;
color: $color-warning;
color: $color-error;
color: $color-info;

Background Color#

background-color: $color-canvas;
background-color: $color-surface;
background-color: $color-frosted;
background-color: $color-frosted-soft;
background-color: $color-frosted-strong;
background-color: $color-backdrop;
background-color: $color-success-frosted;
background-color: $color-success-frosted-soft;
background-color: $color-warning-frosted;
background-color: $color-warning-frosted-soft;
background-color: $color-error-frosted;
background-color: $color-error-frosted-soft;
background-color: $color-info-frosted;
background-color: $color-info-frosted-soft;

Border Color#

border-color: $color-primary;
border-color: $color-contrast-higher;
border-color: $color-contrast-high;
border-color: $color-contrast-medium;
border-color: $color-contrast-low;
border-color: $color-contrast-lower;
border-color: $color-info-medium;
border-color: $color-info-low;
border-color: $color-success-medium;
border-color: $color-success-low;
border-color: $color-warning-medium;
border-color: $color-warning-low;
border-color: $color-error-medium;
border-color: $color-error-low;