Porsche Design System

# Porsche Design System — Design Style Reference

```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: restated-from-official-docs
confidence: high
verified_at: 2026-09-03
source_page: https://www.designsystems.one/design-systems/porsche-design
sources:
  - https://designsystem.porsche.com/
  - https://designsystem.porsche.com/latest/styles/theme
  - https://github.com/porsche-design-system/porsche-design-system
  - https://www.figma.com/@porsche
```

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Porsche. "Porsche Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Porsche Design System
**Owner:** Porsche
**Official documentation:** https://designsystem.porsche.com/
**Visual character:** Sports-car monochrome: Porsche Next precision, near-black on white, fluid type scaling, and color admitted only as signal.

---

## Summary

Porsche's branded system of web components with React, Angular, and Vue wrappers plus UX guidelines.

_Editorial confidence: high. Values are drawn from well-documented public token references. Field-level evidence: 0/72 claims source-linked, 0/72 dated. Confidence is not verification; validate canonical values before implementation._

[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=porsche-design)

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Black / Primary | `#010205` | `--pds-theme-light-primary` | Primary text, buttons, and brand |
| White / Canvas | `#ffffff` | `--pds-theme-light-background-base` | Page background |
| Surface | `#eeeff2` | `--pds-theme-light-background-surface` | Cards and panels |
| Contrast Medium | `#6b6d70` | `--pds-theme-light-contrast-medium` | Secondary text |
| Contrast Low | `#d8d8db` | `--pds-theme-light-contrast-low` | Borders |
| Error Red | `#cc1922` | `--pds-theme-light-notification-error` | Errors |
| Success Green | `#188a42` | `--pds-theme-light-notification-success` | Success |
| Warning | `#bb6f02` | `--pds-theme-light-notification-warning` | Warnings |

## Typography

- **Body:** Porsche Next — weights 400, 600, 700 — `'Porsche Next', 'Arial Narrow', Arial, 'Heiti SC', SimHei, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| display-large | `62px` | `72px` |
| heading-x-large | `36px` | `44px` |
| heading-medium | `24px` | `32px` |
| text-medium | `16px` | `24px` |
| text-small | `14px` | `20px` |

## Spacing

Base unit: `4px (fluid scale)`

Scale: `4px` · `8px` · `16px` · `24px` · `32px` · `48px` · `64px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `4px` |
| medium | `8px` |
| large | `12px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| low | `0 3px 8px rgba(0,0,0,0.15)` |

## Motion

| Name | Value |
| --- | --- |
| short | `250ms` |
| base-curve | `cubic-bezier(0.25, 0.1, 0.25, 1)` |

## Quick start (CSS)

```css
/* Porsche Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Native dp/sp values are omitted, never silently converted.
   Official reference: https://designsystem.porsche.com/
   Field evidence: https://www.designsystems.one/api/style-spec?system=porsche-design */

:root {
  /* Color */
  --pds-theme-light-primary: #010205; /* Primary text, buttons, and brand */
  --pds-theme-light-background-base: #ffffff; /* Page background */
  --pds-theme-light-background-surface: #eeeff2; /* Cards and panels */
  --pds-theme-light-contrast-medium: #6b6d70; /* Secondary text */
  --pds-theme-light-contrast-low: #d8d8db; /* Borders */
  --pds-theme-light-notification-error: #cc1922; /* Errors */
  --pds-theme-light-notification-success: #188a42; /* Success */
  --pds-theme-light-notification-warning: #bb6f02; /* Warnings */

  /* Typography */
  --font-body: 'Porsche Next', 'Arial Narrow', Arial, 'Heiti SC', SimHei, sans-serif;

  /* Type scale */
  --text-display-large: 62px; /* line-height 72px */
  --text-heading-x-large: 36px; /* line-height 44px */
  --text-heading-medium: 24px; /* line-height 32px */
  --text-text-medium: 16px; /* line-height 24px */
  --text-text-small: 14px; /* line-height 20px */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  /* Radius */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 12px;

  /* Elevation */
  --shadow-low: 0 3px 8px rgba(0,0,0,0.15);

  /* Motion */
  --motion-short: 250ms;
  --motion-base-curve: cubic-bezier(0.25, 0.1, 0.25, 1);
}
```

## Engineering profile

- **Ships for:** Web Components, React, Angular, Vue
- **Source model:** Open source
- **Figma:** Official Figma kit

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Porsche Design System by Porsche — Porsche's branded system of web components with React, Angular, and Vue wrappers plus UX guidelines. Character: Sports-car monochrome: Porsche Next precision, near-black on white, fluid type scaling, and color admitted only as signal. Use a primary colour near #010205, the typeface "Porsche Next" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 4px (fluid scale) base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Porsche Design System documentation](https://designsystem.porsche.com/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/porsche-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._