Porsche Design System

Introduction

Table of Contents

Styles
Setup
Color Scheme

Styles#

Styles are the foundational layer of our design language. They define the basics, such as colors across themes, typography, and visual effects, and they also provide structural primitives such as the layout grid and spacing scale.

Use these styles only when you need to build a custom component or pattern that is not yet available in the component library, or when working with foundational layout objects such as typography, surfaces, and boxes.

Setup#

The Porsche Design System mandates a minimum version of Tailwind CSS v4. Please ensure your installation meets this requirement.

1. Install Tailwind CSS

Follow the official installation guide:

Install Tailwind CSS Documentation

2. Import the Porsche Design System Tailwind Theme

Add the following lines to your global CSS file, placing the Porsche Design System theme import immediately after the standard Tailwind import:

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

Color Scheme#

The color system leverages the CSS light-dark() function to deliver native, preference-based theming. By adopting this browser-native engine, we have eliminated the need for proprietary switching logic, resulting in a more performant and standardized architecture.

Core Implementation

All colors and styles are driven by the CSS color-scheme property. To ensure broad compatibility, we extended the existing Tailwind CSS .scheme-* utility classes with a polyfill for browsers that do not yet support light-dark() (see browser support).

Utility Classes

Apply these classes to the document or any container to control the theme context:

.scheme-light — Forces light mode.

.scheme-dark — Forces dark mode.

.scheme-light-dark — Dynamically follows system/OS settings.

Usage

The selected theme context cascades to all child elements.

<!-- Defined theme will be applied to all child elements -->
<html class="scheme-dark">
  <head></head>
  <body>
    <!-- Will be rendered in dark mode -->
    <div class="bg-frosted text-primary"></div>
  </body>
</html>