What it does
Porsche Design System connects Figma resources with web components, design tokens and framework guides. It includes component configurators, forms, navigation patterns and page templates. Its source code uses Apache 2.0, while Porsche fonts, icons and other brand assets have a separate restrictive licence.
Porsche’s component code is the reference for implementation, and its Figma libraries can have small differences. Configurators and global settings let you inspect components with different colour schemes, text sizes and left-to-right or right-to-left layouts. Use public properties, slots and CSS variables for customization; overriding component internals can break when the system changes.
For the v4 React route, open Developing → React → Getting Started. Install @porsche-design-system/components-react, wrap the app with PorscheDesignSystemProvider and import the global stylesheet. The guide then adds a component and runs the development server. It also explains loading placeholders and optional preloads for fonts, icons and component files. Separate guides cover Angular, Vue, Vanilla JS and other frameworks.
The code is free under Apache 2.0. Porsche-specific fonts, icons, the marque and other design assets use a separate agreement with purpose and redistribution restrictions. Reading the documentation and installing the public package require no Porsche account, but the code licence does not grant general use of Porsche branding.
Strengths
- Component configurators include colour, direction and text-size settings
- Framework guides connect installation to rendered examples
- Tokens and supported properties provide documented customization routes
Watch out for
- Porsche-specific assets have separate restrictive terms
- Internal component overrides can break after updates
Best for
- Teams creating Porsche-aligned web interfaces
Sources
- Porsche Design System (Oct 27, 2026)
- Porsche React v4 getting started (Oct 27, 2026)
- Porsche Design System licence (Oct 27, 2026)