Porsche Design SystemSearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
IntroductionVanilla JSAngularReactVueNext JSRemix
Initialization Table of Contents The Porsche Design System is based on Web Components using Shadow DOM primarily for the following reasons: to encapsulate markup and styles to prevent overriding styles or attributes to use the same components with plain html and any JavaScript framework, without having to maintain multiple libraries and keeping them in sync Introduction While the NPM packages @porsche-design-system/components-{js|angular|react|vue} are primarily used for bootstrapping, typing support and framework typical developer experience, the web components themselves and all their assets are served from a CDN (cdn.ui.porsche.com and cdn.ui.porsche.cn). More information about this can be found under Performance. Architecture Porsche Design System Architecture To understand what is happening when a component's html tag is rendered in the browser and what can be done to improve the bootstrapping process, please read through the following pages carefully. No matter if or which framework you use, please continue with Vanilla Js since its behavior is the foundation for all others.
Global settingsThemeChanges the theme of the application and any Porsche Design System component. It's possible to choose between forced theme light and dark. It's also possible to use auto, which applies light or dark theme depending on the operating system settings automatically.LightDarkAuto (sync with operating system)DirectionChanges the direction of HTML elements, mostly used on<html> tag to support languages which are read from right to left like e.g. Arabic.LTR (left-to-right)RTL (right-to-left)AutoText ZoomChanges the text size and values with unit rem or em relatively. This setting can be defined in browser settings for any website or by an application itself on<html> tag. To achieve WCAG 2.2 AA compliance it's obligatory to support text zoom up to at least 200%.100%130%150%200%