Porsche Design System

Color

Table of Contents

Text Color
Background Color
Border Color

The Porsche Design System Tailwind theme customizes Tailwind variables such as --color-*, which affect multiple Tailwind classes including bg-*, text-*, border-* and others.

By default, color tokens use the light theme. To enable the dark theme or automatic theme switching based on system settings, add the .dark or .auto CSS class to the <html> element or any HTML element. This applies the selected theme to all child elements.

Instead of dynamic colors like .text-primary or .bg-surface, you can also use fixed theme variants such as .text-primary-light, .bg-surface-light, .text-primary-dark, or .bg-surface-dark, which remain constant regardless of theme.

Text Color#

.text-primary
.text-contrast-medium
.text-contrast-high
.text-success
.text-error

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<ul class="grid gap-fluid-sm prose-text-sm">
  <li class="text-primary">
    .text-primary
  </li>
  <li class="text-contrast-medium">
    .text-contrast-medium
  </li>
  <li class="text-contrast-high">
    .text-contrast-high
  </li>
  <li class="text-success">
    .text-success
  </li>
  <li class="text-error">
    .text-error
  </li>
</ul>
<script>

</script>
</body>
</html>

Background Color#

.bg-base
.bg-surface
.bg-shading
.bg-frosted
.bg-success-soft
.bg-warning-soft
.bg-error-soft
.bg-info-soft

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<ul class="grid gap-fluid-sm prose-text-sm">
  <li class="flex items-center gap-static-md">
    <div class="bg-base w-10 h-10 rounded-md border border-contrast-low"></div>
    .bg-base
  </li>
  <li class="flex items-center gap-static-md">
    <div class="bg-surface w-10 h-10 rounded-md border border-contrast-low"></div>
    .bg-surface
  </li>
  <li class="flex items-center gap-static-md">
    <div class="bg-shading w-10 h-10 rounded-md border border-contrast-low"></div>
    .bg-shading
  </li>
  <li class="flex items-center gap-static-md">
    <div class="bg-frosted w-10 h-10 rounded-md border border-contrast-low"></div>
    .bg-frosted
  </li>
  <li class="flex items-center gap-static-md">
    <div class="bg-success-soft w-10 h-10 rounded-md border border-contrast-low"></div>
    .bg-success-soft
  </li>
  <li class="flex items-center gap-static-md">
    <div class="bg-warning-soft w-10 h-10 rounded-md border border-contrast-low"></div>
    .bg-warning-soft
  </li>
  <li class="flex items-center gap-static-md">
    <div class="bg-error-soft w-10 h-10 rounded-md border border-contrast-low"></div>
    .bg-error-soft
  </li>
  <li class="flex items-center gap-static-md">
    <div class="bg-info-soft w-10 h-10 rounded-md border border-contrast-low"></div>
    .bg-info-soft
  </li>
</ul>
<script>

</script>
</body>
</html>

Border Color#

.border-contrast-low
.border-contrast-medium
.border-contrast-high

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<ul class="grid gap-fluid-sm prose-text-sm">
  <li class="flex items-center gap-static-md">
    <div class="border-contrast-low w-10 h-10 rounded-md border"></div>
    .border-contrast-low
  </li>
  <li class="flex items-center gap-static-md">
    <div class="border-contrast-medium w-10 h-10 rounded-md border"></div>
    .border-contrast-medium
  </li>
  <li class="flex items-center gap-static-md">
    <div class="border-contrast-high w-10 h-10 rounded-md border"></div>
    .border-contrast-high
  </li>
</ul>
<script>

</script>
</body>
</html>