# Porsche Design System — OpenDesign Application Guide Explore Porsche Design System v4 through fluid spacing, CSS color schemes, Porsche Next typography and a two-choice configurator. The reference includes real token expressions and a complete Vite entry using current segmented-control events. Independent OpenDesign reference scoped to PDS v4. Original artwork and finish names are not Porsche vehicle specifications, paint codes or available options. No transaction is performed. ## Source Reference - **Reference generation:** Porsche Design System v4 ([source](https://designsystem.porsche.com/v4/news/migration-guide/porsche-design-system/)) - **Native package:** @porsche-design-system/components-js ([source](https://designsystem.porsche.com/v4/developing/vanilla-js/getting-started/)) - **Type family:** Porsche Next ([source](https://designsystem.porsche.com/v4/tokens/font/)) - **Control radius:** 12px ([source](https://designsystem.porsche.com/v4/tokens/border/)) - **Container radius:** 24px ([source](https://designsystem.porsche.com/v4/tokens/border/)) - **Theme selector:** CSS color-scheme ([source](https://designsystem.porsche.com/v4/tokens/color/)) ## Design Reference Porsche Design System v4 documentation, with token pages displaying v4.8.0. This is a version-scoped reference, not a latest-release claim. Original finish swatches are application data, not official Porsche paint codes. ### Static spacing [Official reference](https://designsystem.porsche.com/v4/tokens/spacing/) | Name / Rule | Value / Configuration | Use | | --- | --- | --- | | spacingStatic2Xs | 1px | Fixed spacing token. | | spacingStaticXs | 4px | Fixed spacing token. | | spacingStaticSm | 8px | Fixed spacing token. | | spacingStaticMd | 16px | Fixed spacing token. | | spacingStaticLg | 32px | Fixed spacing token. | | spacingStaticXl | 48px | Fixed spacing token. | | spacingStatic2Xl | 80px | Fixed spacing token. | ### Fluid spacing [Official reference](https://designsystem.porsche.com/v4/tokens/spacing/) | Name / Rule | Value / Configuration | Use | | --- | --- | --- | | spacingFluidXs | clamp(4px, 0.25vw + 3px, 8px) | Small adaptive separation. | | spacingFluidSm | clamp(8px, 0.5vw + 6px, 16px) | Compact adaptive gap. | | spacingFluidMd | clamp(16px, 1.25vw + 12px, 36px) | Example page padding. | | spacingFluidLg | clamp(32px, 2.75vw + 23px, 76px) | Section spacing. | | spacingFluidXl | clamp(48px, 3vw + 38px, 96px) | Large spacing. | | spacingFluid2Xl | clamp(80px, 7.5vw + 56px, 200px) | Major composition spacing. | ### Color roles [Official reference](https://designsystem.porsche.com/v4/tokens/color/) | Name / Rule | Value / Configuration | Use | | --- | --- | --- | | colorCanvas | light-dark(#fff,hsl(225 66.7% 1.2%)) | Page canvas. | | colorSurface | light-dark(hsl(240 10% 95%),hsl(240 2% 10%)) | Secondary surface. | | colorPrimary | light-dark(hsl(225 66.7% 1.2%),hsl(225 100% 99%)) | Primary text. | | colorFocus | light-dark(#1A44EA,#1A44EA) | Keyboard focus. | | colorContrastLow / colorContrastLower | Decorative only | Not accessibility-compliant text roles. | ### Type expressions [Official reference](https://designsystem.porsche.com/v4/tokens/font/) | Name / Rule | Value / Configuration | Use | | --- | --- | --- | | fontPorscheNext | 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif | Official family and fallbacks. | | typescale2Xs | .75rem | Smallest listed type size. | | typescaleXs | .875rem | Small metadata. | | typescaleSm | 1rem | Body baseline. | | typescaleMd | clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem) | Fluid type. | | typescale2Xl | clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem) | Fluid large title. | | leadingNormal | calc(6px + 2.125ex) | Typeface-sensitive line height. | | fontWeightNormal / Semibold / Bold | 400 / 600 / 700 | Available weights. | ### Shape [Official reference](https://designsystem.porsche.com/v4/tokens/border/) | Name / Rule | Value / Configuration | Use | | --- | --- | --- | | radiusXs / Sm / Md | 2px / 4px / 6px | Small shapes. | | radiusLg | 8px | Compact interactive controls. | | radiusXl | 12px | Standard interactive controls. | | radius2Xl | 16px | Notifications. | | radius3Xl | 24px | Tiles and dialog-like containers. | | radius4Xl | 32px | Largest fixed radius. | | radiusFull | calc(infinity * 1px) | Standalone pill indicators. | ### Breakpoints [Official reference](https://designsystem.porsche.com/v4/tokens/breakpoint/) | Name / Rule | Value / Configuration | Use | | --- | --- | --- | | breakpointXs | 480 | Numeric token used with px. | | breakpointSm | 760 | Numeric token used with px. | | breakpointMd | 1000 | Numeric token used with px. | | breakpointLg | 1300 | Numeric token used with px. | | breakpointXl | 1760 | Numeric token used with px. | | breakpoint2Xl | 1920 | Numeric token used with px. | ### Segmented choice contract [Official reference](https://designsystem.porsche.com/v4/components/segmented-control/api/) | Name / Rule | Value / Configuration | Use | | --- | --- | --- | | value | string \| number | Selected item value. | | change event | detail: { value: string \| number } | Update application state. | | columns | auto or 1–25; responsive values supported | Control the item grid. | | noWrap | false by default | True creates a scrollable single row. | | state | none / error / success | Validation styling. | | disabled | Excludes value from form submission | Different from an ordinary unselected item. | ## Porsche Design System Use the v4 foundation as a complete set ### Global variables are now required Version 4 builds component styles on global CSS variables. Importing the global stylesheet is therefore an architectural requirement, not a decorative reset. The same import includes normalization and Porsche Next font-face definitions. This reference keeps the v4 component and token contracts together. Older examples using text-field wrappers or per-component theme props should not be transplanted without the migration guide. The documentation itself is versioned, so the page names its scope rather than claiming a timeless API. [Supporting specification](https://designsystem.porsche.com/v4/news/migration-guide/porsche-design-system/) ## Porsche Design System Color scheme selects complete role pairs ### Separate interface roles from finish samples The canvas, surface and primary foreground tokens contain light-dark() pairs. The CSS color-scheme property chooses the branch. Set light, dark or light dark depending on whether the application fixes a mode or follows the user’s preference. The finish colors in this example are independent original swatches. Switching the interface to dark mode changes surrounding surfaces and text, not the selected finish. The lower contrast color roles are for decoration; using them for an essential option label would violate the token’s intended boundary. [Supporting specification](https://designsystem.porsche.com/v4/tokens/color/) ## Porsche Design System Fluid rhythm and fixed control gaps coexist ### Use clamp expressions where space should grow Porsche provides both static and fluid scales. The native entry uses the medium fluid expression for page padding, while 16px and 32px gaps provide stable relationships inside the option area. A fluid maximum avoids endlessly expanding whitespace on a wide display. The specimen switches from a wide visual-and-controls arrangement to stacked sections below 760px, one of the documented breakpoint values. The decision to stack is an application composition choice; the breakpoint value itself is the system reference. [Supporting specification](https://designsystem.porsche.com/v4/tokens/spacing/) ## Porsche Design System Typography depends on the supplied face ### The line-height expression is not a generic ratio Porsche Next has a documented fallback stack and a type scale with fixed small sizes and fluid larger sizes. leadingNormal uses ex units, which respond to the font’s x-height, plus a fixed pixel addition. Replacing that with an arbitrary 1.5 ratio changes the intended rhythm. The offline interpretation uses a local fallback and a comfortably readable line height rather than pretending the licensed face has been bundled. In the native entry the global stylesheet defines the actual font face. Headings use regular weight in the v4 design language; larger type does not require a heavy weight to establish hierarchy. [Supporting specification](https://designsystem.porsche.com/v4/tokens/font/) ## Porsche Design System Controls and containers use different radii ### Twelve and twenty-four pixels define the main hierarchy The standard interactive radius is 12px; the card and dialog family uses 24px. Compact controls move to 8px, while notifications use 16px. Applying the largest rounding to every element would erase these relationships. The original preview places its vehicle study on a broad 24px surface and uses 12px controls. Its vehicle silhouette is original CSS artwork, not a Porsche model render or product photograph. The same composition can be used for a material selector without implying real configuration availability. [Supporting specification](https://designsystem.porsche.com/v4/tokens/border/) ## Porsche Design System A segmented control is a choice, not a tab bar ### Use stable values and one state owner Each p-segmented-control-item supplies a value. A change event returns that value in event.detail, which the example stores before redrawing the summary. The group exposes a visible label so the finish options and wheel options remain distinguishable. The v4 API supports a responsive column count and an optional non-wrapping scroller. Short options can remain visible together; long localized labels should wrap or use an intentional scroller instead of being clipped. Disabled controls are excluded from form data, which matters when extending this sample into a real form. 1. Initialize finish and wheel values once in application state. 2. Read detail.value from the group’s change event. 3. Update the visible study and textual selection together. 4. Clear any previously kept summary after an edit. [Supporting specification](https://designsystem.porsche.com/v4/components/segmented-control/api/) ## Porsche Design System A local selection is not a completed transaction ### Use explicit button types p-button defaults to submit. The example sets type="button" because keeping a combination and changing color scheme are local interactions. Navigation belongs to the Link component rather than a button with an invented destination. The primary action reports exactly what happened: a combination was kept for the current page session. It does not claim persistence after reload, account storage or a placed order. This limited behavior is deliberate and complete for an interface specimen. - Primary keeps the current local combination. - Secondary changes the interface color scheme. - Visible labels remain present for both actions. - No loading spinner is shown when there is no pending operation. [Supporting specification](https://designsystem.porsche.com/v4/components/button/api/) ## Porsche Design System Load components and protect their first render ### Loader, stylesheet and compiler work together The Vite configuration injects the official loader partial into the document body. The main entry imports the global stylesheet and renders real custom elements. Scoped :not(:defined) rules prevent the selected component tags from flashing before registration. The documented Vite setup excludes Lightning CSS’s LightDark transform because that polyfill is identified as broken. Keeping this exclusion matters: compiling away the token function incorrectly can break the theme even when the component markup is correct. Recommended preloads can be added later through the documented font, icon and component partials. [Supporting specification](https://designsystem.porsche.com/v4/developing/vanilla-js/getting-started/) ## Component Examples ### Complete standalone interactive specimen Save the complete document as index.html and open it in a browser. Original offline HTML/CSS interpretation of v4 token roles and segmented-choice behavior. No native PDS runtime, remote fonts, official model imagery or real vehicle data. ```html Original finish study
DESIGN STUDY / 01

A different point of view.

Explore two small choices in an original vehicle study. See how a restrained interface keeps the object at the center.

Original illustration · Not a Porsche model render
Finish
Wheel study

YOUR COMBINATIONChalk · Classic

``` [Code reference](https://designsystem.porsche.com/v4/components/segmented-control/api/) - Finish and wheel choices update an original configurator illustration. They are not Porsche product specifications; native segmented-control events appear in the separate v4 example. ### Two controlled choices with a session-only summary Native p-segmented-control elements emit change events with detail.value; p-button uses click and an explicit type. ```typescript import './style.css'; const paints={chalk:'#b9b6ae',blue:'#456171',red:'#9f2937'}; const names={chalk:'Chalk',blue:'Coastal blue',red:'Garnet'}; type Paint=keyof typeof paints; let paint:Paint='chalk',wheel='Classic'; document.querySelector('#app')!.innerHTML=`

Explore an original color study

This specimen is not a real vehicle configurator or order.

Chalk Coastal blue Garnet Classic Aero

Keep this combination Switch color scheme

`; function render(){document.querySelector('#swatch')!.style.background=paints[paint];document.querySelector('#summary')!.textContent=`${names[paint]} · ${wheel} wheel study`;document.querySelector('#saved')!.textContent='';} document.querySelector('#paint')!.addEventListener('change',e=>{const v=(e as CustomEvent<{value:string}>).detail.value;if(v in paints){paint=v as Paint;render();}}); document.querySelector('#wheel')!.addEventListener('change',e=>{wheel=String((e as CustomEvent<{value:string}>).detail.value);render();}); document.querySelector('#save')!.addEventListener('click',()=>{document.querySelector('#saved')!.textContent=`Kept for this page session: ${names[paint]}, ${wheel}. No order submitted.`;}); document.querySelector('#scheme')!.addEventListener('click',()=>{const root=document.documentElement;root.style.colorScheme=root.style.colorScheme==='dark'?'light':'dark';}); render(); ``` [Code reference](https://designsystem.porsche.com/v4/components/segmented-control/api/) - Changing either choice clears the previous kept combination. - The color-scheme property controls the system theme; finish swatches remain original application data. - The example does not collect contact information, reserve a vehicle or submit an order. ## Implementation Starting Point Version 4 native Web Component setup with the documented global stylesheet and loader partial. The offline preview has no remote fonts or package runtime; native package compilation was not verified here. ```text # In a new Vite vanilla-ts project: npm create vite@latest pds-specimen -- --template vanilla-ts cd pds-specimen npm install npm install @porsche-design-system/components-js@4 npm install --save-dev lightningcss // vite.config.ts import {defineConfig} from 'vite'; import {Features} from 'lightningcss'; import {getLoaderScript} from '@porsche-design-system/components-js/partials'; export default defineConfig({ plugins:[{name:'pds-loader',transformIndexHtml(html){ return html.replace('',getLoaderScript()+''); }}], css:{transformer:'lightningcss',lightningcss:{exclude:Features.LightDark}} }); /* src/style.css */ @import '@porsche-design-system/components-js'; html { color-scheme: light; } :is(p-button,p-segmented-control,p-segmented-control-item):not(:defined){visibility:hidden} main{max-width:60rem;margin:auto;padding:clamp(16px,1.25vw + 12px,36px)} .options{display:grid;gap:32px} .preview{padding:32px;border-radius:24px;margin-block:32px;border:1px solid currentColor} .actions{display:flex;gap:16px;flex-wrap:wrap} # Replace src/main.ts with the example below, then: npm run dev ``` ## Agent Prompt Build a version 4 PDS composition with mandatory global styles, the loader partial, color-scheme, actual fluid spacing and 12px control/24px container radii. Use segmented-control change detail.value for two original sample choices and explicit type=button for local actions. Do not mix legacy wrapper APIs or represent the sample as a real vehicle configuration. ## Sources - [Version 4 migration](https://designsystem.porsche.com/v4/news/migration-guide/porsche-design-system/) — Global styles and color-scheme changes. - [Vanilla JS setup](https://designsystem.porsche.com/v4/developing/vanilla-js/getting-started/) — Loader, stylesheet and Vite configuration. - [Spacing tokens](https://designsystem.porsche.com/v4/tokens/spacing/) — Static and fluid expressions. - [Color tokens](https://designsystem.porsche.com/v4/tokens/color/) — Paired roles and decorative limits. - [Font tokens](https://designsystem.porsche.com/v4/tokens/font/) — Porsche Next, type sizes and line height. - [Border tokens](https://designsystem.porsche.com/v4/tokens/border/) — Control and container radii. - [Breakpoint tokens](https://designsystem.porsche.com/v4/tokens/breakpoint/) — Actual responsive thresholds. - [Segmented control API](https://designsystem.porsche.com/v4/components/segmented-control/api/) — Values, change events and form behavior. - [Button API](https://designsystem.porsche.com/v4/components/button/api/) — Types, variants and pending state.