Porsche Design System

CSS Variables

Table of Contents

Setup

The Porsche Design System provides mandatory global CSS variables used by its components. Color variables (prefixed with --p-color-*) automatically adapt to the active color scheme using the light-dark() CSS color function. Additional variables for spacing, typography, and other design tokens are also available.

If you prefer not to use one of the styling solutions offered by the Porsche Design System — Tailwind CSS, SCSS, Emotion, or Vanilla Extract — you can also use the global CSS variables directly for a pure CSS approach, for example to align components in your page layout or to build custom components when needed.

Setup#

When you import the main package CSS file, the CSS variables are already included:

/* Replace {js|angular|react|vue} with your framework, e.g. components-react */
@import '@porsche-design-system/components-{js|angular|react|vue}';

If you only need the CSS variables without any other styles, you can import them separately:

@import '@porsche-design-system/components-{js|angular|react|vue}/variables.css';

Below is the content of the stylesheet file for reference only. Don't copy this into your project — use the import statement above instead:

/* @porsche-design-system/components-{js|angular|react|vue}/variables.css */

:root {
  color-scheme: light;

  --p-color-focus: light-dark(#1a44ea, #1a44ea);
  --p-color-canvas: light-dark(#fff, hsl(225 66.7% 1.2%));
  --p-color-surface: light-dark(hsl(240 10% 95%), hsl(240 2% 10%));
  --p-color-frosted: light-dark(
    hsl(240 5% 70% / 0.148),
    hsl(240 2% 43% / 0.228)
  );
  --p-color-frosted-soft: light-dark(
    hsl(234 9.8% 60% / 0.06),
    hsl(240 3.7% 26.5% / 0.154)
  );
  --p-color-frosted-strong: light-dark(
    hsl(236 6.5% 42% / 0.236),
    hsl(240 1.5% 61.8% / 0.302)
  );
  --p-color-backdrop: light-dark(
    hsl(240 5.3% 14.9% / 0.5),
    hsl(240 5.3% 14.9% / 0.5)
  );
  --p-color-contrast-lower: light-dark(
    hsl(234 6% 32.9% / 0.324),
    hsl(240 1.5% 61.8% / 0.302)
  );
  --p-color-contrast-low: light-dark(
    hsl(240 5.3% 14.9% / 0.5),
    hsl(240 12.5% 96.9% / 0.45)
  );
  --p-color-contrast-medium: light-dark(
    hsl(240 6.1% 7% / 0.6),
    hsl(240 12.5% 96.9% / 0.56)
  );
  --p-color-contrast-high: light-dark(
    hsl(240 7.1% 11% / 0.7),
    hsl(240 12.5% 96.9% / 0.67)
  );
  --p-color-contrast-higher: light-dark(
    hsl(240 8.7% 9% / 0.8),
    hsl(240 12.5% 96.9% / 0.78)
  );
  --p-color-primary: light-dark(hsl(225 66.7% 1.2%), hsl(225 100% 99%));
  --p-color-success: light-dark(hsl(115 77.5% 27.8%), hsl(157 84.9% 41.6%));
  --p-color-success-low: light-dark(
    hsl(115 77.5% 27.8% / 0.18),
    hsl(157 84.9% 41.6% / 0.18)
  );
  --p-color-success-medium: light-dark(
    hsl(115 77.5% 27.8% / 0.6),
    hsl(157 84.9% 41.6% / 0.6)
  );
  --p-color-success-frosted: light-dark(
    hsl(115 77.5% 27.8% / 0.18),
    hsl(157 84.9% 41.6% / 0.26)
  );
  --p-color-success-frosted-soft: light-dark(
    hsl(115 77.5% 27.8% / 0.1),
    hsl(157 84.9% 41.6% / 0.1)
  );
  --p-color-warning: light-dark(hsl(28 97.7% 34.1%), hsl(28 90.2% 56.1%));
  --p-color-warning-low: light-dark(
    hsl(28 97.7% 34.1% / 0.18),
    hsl(28 90.2% 56.1% / 0.18)
  );
  --p-color-warning-medium: light-dark(
    hsl(28 97.7% 34.1% / 0.6),
    hsl(28 90.2% 56.1% / 0.6)
  );
  --p-color-warning-frosted: light-dark(
    hsl(28 97.7% 34.1% / 0.18),
    hsl(28 90.2% 56.1% / 0.26)
  );
  --p-color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
  --p-color-error: light-dark(hsl(357 78% 41%), hsl(0 96.9% 62%));
  --p-color-error-low: light-dark(
    hsl(357 78% 41% / 0.18),
    hsl(0 96.9% 62% / 0.18)
  );
  --p-color-error-medium: light-dark(
    hsl(357 78% 41% / 0.6),
    hsl(0 96.9% 62% / 0.6)
  );
  --p-color-error-frosted: light-dark(
    hsl(357 78% 41% / 0.18),
    hsl(0 96.9% 62% / 0.26)
  );
  --p-color-error-frosted-soft: light-dark(
    hsl(357 78% 41% / 0.1),
    hsl(0 96.9% 62% / 0.1)
  );
  --p-color-info: light-dark(hsl(228 83.2% 51%), hsl(210 100% 54.5%));
  --p-color-info-low: light-dark(
    hsl(228 83.2% 51% / 0.18),
    hsl(210 100% 54.5% / 0.18)
  );
  --p-color-info-medium: light-dark(
    hsl(228 83.2% 51% / 0.6),
    hsl(210 100% 54.5% / 0.6)
  );
  --p-color-info-frosted: light-dark(
    hsl(228 83.2% 51% / 0.18),
    hsl(210 100% 54.5% / 0.26)
  );
  --p-color-info-frosted-soft: light-dark(
    hsl(228 83.2% 51% / 0.1),
    hsl(210 100% 54.5% / 0.1)
  );

  --p-font-porsche-next:
    "Porsche Next", "Arial Narrow", Arial, "Heiti SC", SimHei, sans-serif;

  --p-font-weight-normal: 400;
  --p-font-weight-semibold: 600;
  --p-font-weight-bold: 700;

  --p-leading-normal: calc(6px + 2.125ex);

  --p-typescale-2xs: 0.75rem;
  --p-typescale-xs: 0.875rem;
  --p-typescale-sm: 1rem;
  --p-typescale-md: clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem);
  --p-typescale-lg: clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem);
  --p-typescale-xl: clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem);
  --p-typescale-2xl: clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem);
  --p-typescale-3xl: clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem);
  --p-typescale-4xl: clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem);
  --p-typescale-5xl: clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem);

  --p-spacing-fluid-xs: clamp(4px, 0.25vw + 3px, 8px);
  --p-spacing-fluid-sm: clamp(8px, 0.5vw + 6px, 16px);
  --p-spacing-fluid-md: clamp(16px, 1.25vw + 12px, 36px);
  --p-spacing-fluid-lg: clamp(32px, 2.75vw + 23px, 76px);
  --p-spacing-fluid-xl: clamp(48px, 3vw + 38px, 96px);
  --p-spacing-fluid-2xl: clamp(80px, 7.5vw + 56px, 200px);

  --p-spacing-static-2xs: 1px;
  --p-spacing-static-xs: 4px;
  --p-spacing-static-sm: 8px;
  --p-spacing-static-md: 16px;
  --p-spacing-static-lg: 32px;
  --p-spacing-static-xl: 48px;
  --p-spacing-static-2xl: 80px;

  --p-radius-xs: 2px;
  --p-radius-sm: 4px;
  --p-radius-md: 6px;
  --p-radius-lg: 8px;
  --p-radius-xl: 12px;
  --p-radius-2xl: 16px;
  --p-radius-3xl: 24px;
  --p-radius-4xl: 32px;
  --p-radius-full: calc(infinity * 1px);

  --p-blur-frosted: blur(32px);

  --p-shadow-sm: 0px 3px 8px rgba(0, 0, 0, 0.16);
  --p-shadow-md: 0px 4px 16px rgba(0, 0, 0, 0.16);
  --p-shadow-lg: 0px 8px 40px rgba(0, 0, 0, 0.16);

  --p-ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --p-ease-in: cubic-bezier(0, 0, 0.2, 1);
  --p-ease-out: cubic-bezier(0.4, 0, 0.5, 1);

  --p-duration-sm: 0.25s;
  --p-duration-md: 0.4s;
  --p-duration-lg: 0.6s;
  --p-duration-xl: 1.2s;
}