Entdecken Sie Porsche Design System v4 mit fließenden Abständen, CSS-Farbschemata, Porsche-Next-Typografie und einem Konfigurator mit zwei Auswahlmöglichkeiten. Die Referenz enthält echte Token-Ausdrücke und einen vollständigen Vite-Einstiegspunkt, der aktuelle Ereignisse des Segmented Controls verwendet.
Eigene Offline-Interpretation der v4-Tokenrollen und des Verhaltens segmentierter Auswahl mit HTML/CSS. Keine native PDS-Laufzeitumgebung, keine externen Schriftarten, keine offiziellen Modellbilder und keine echten Fahrzeugdaten. · Implementierungsreferenz
02
Porsche Designsystem-Designreferenz
Dokumentation zu Porsche Design System v4; auf den Token-Seiten wird v4.8.0 angezeigt. Dies ist eine Referenz mit versionsbezogenem Geltungsbereich und keine Aussage zur neuesten Veröffentlichung. Die selbst erstellten Farbmuster der Lackierungen sind Anwendungsdaten und keine offiziellen Porsche-Lackcodes.
Porsche Designsystem: Die v4-Grundlage als vollständiges Paket verwenden
Globale Variablen sind jetzt erforderlich
In Version 4 bauen Komponentenstile auf globalen CSS-Variablen auf. Der Import des globalen Stylesheets ist daher eine architektonische Voraussetzung und kein bloßes dekoratives Reset. Derselbe Import umfasst Normalisierung und Porsche-Next-Font-Face-Definitionen.
Diese Referenz fasst die Komponenten- und Token-Verträge von v4 zusammen. Ältere Beispiele mit Textfeld-Wrappern oder Theme-Props pro Komponente sollten nicht ohne den Migrationsleitfaden übernommen werden. Auch die Dokumentation ist versioniert; daher nennt diese Seite ihren Geltungsbereich, statt ein zeitloses API zu beanspruchen.
Das Farbschema von Porsche Designsystem legt vollständige Rollenpaare fest
Interface-Rollen von Lackmustern trennen
Die Tokens für Canvas, Oberfläche und primäre Vordergrundfarbe enthalten light-dark()-Paare. Die CSS-Eigenschaft color-scheme von CSS wählt den passenden Zweig aus. Legen Sie light, dark oder light dark fest, je nachdem, ob die Anwendung einen Modus vorgibt oder der Präferenz der Nutzer folgt.
Die Lackfarben in diesem Beispiel sind eigenständige, eigens erstellte Farbmuster. Beim Wechsel des Interfaces in den dunklen Modus ändern sich die umgebenden Oberflächen und Texte, nicht jedoch die ausgewählte Lackierung. Die kontrastärmeren Farbrollen sind für dekorative Zwecke vorgesehen; würden sie für die Beschriftung einer unverzichtbaren Option verwendet, würde dies die vorgesehenen Grenzen des Tokens verletzen.
Porsche Designsystem Flüssiges Spacing und feste Abstände zwischen Steuerelementen bestehen nebeneinander
Verwende clamp-Ausdrücke, wenn Abstände mitwachsen sollen
Porsche stellt sowohl statische als auch fluide Skalen bereit. Der native Einstieg verwendet für das Seiten-Padding den mittleren fluiden Ausdruck, während Abstände von 16px und 32px im Optionsbereich für stabile Beziehungen sorgen. Ein fluides Maximum verhindert, dass sich der Leerraum auf breiten Bildschirmen unbegrenzt vergrößert.
Unterhalb von 760px, einem der dokumentierten Breakpoint-Werte, wechselt das Beispiel von einer breiten Anordnung mit visuellen Elementen und Steuerelementen zu gestapelten Abschnitten. Die Entscheidung für die Stapelung ist eine Wahl bei der Komposition der Anwendung; der Breakpoint-Wert selbst ist eine Referenz des Systems.
Porsche Designsystem Die Typografie hängt von der bereitgestellten Schriftart ab
Der Zeilenhöhen-Ausdruck ist kein allgemeiner Faktor
Porsche Next verfügt über einen dokumentierten Fallback-Stack und eine Schriftskala mit festen kleinen und fluiden größeren Schriftgrößen. leadingNormal verwendet ex-Einheiten, die sich an der x-Höhe der Schrift orientieren, sowie einen festen Pixel-Zuschlag. Wird dies durch einen beliebigen Faktor von 1.5 ersetzt, verändert sich der beabsichtigte Rhythmus.
Die Offline-Interpretation verwendet einen lokalen Fallback und eine angenehm lesbare Zeilenhöhe, statt vorzugeben, die lizenzierte Schrift sei eingebunden. Im nativen Einstieg definiert das globale Stylesheet die tatsächliche Schriftart. Überschriften verwenden in der Designsprache v4 den normalen Schriftschnitt; größere Schriftgrößen benötigen keinen fetten Schriftschnitt, um eine Hierarchie zu schaffen.
Porsche Designsystem Steuerelemente und Container verwenden unterschiedliche Radien
Zwölf und vierundzwanzig Pixel bilden die grundlegende Hierarchie
Der Standardradius für interaktive Elemente beträgt 12px; für Karten und Dialoge wird ein Radius von 24px verwendet. Kompakte Steuerelemente erhalten einen Radius von 8px, Benachrichtigungen einen von 16px. Würde jedes Element den größten Radius verwenden, gingen diese Beziehungen verloren.
Die ursprüngliche Vorschau zeigt die Fahrzeugstudie auf einer großzügigen Fläche mit 24px Radius und verwendet Steuerelemente mit 12px Radius. Die Fahrzeugsilhouette ist eine eigens erstellte Grafik von CSS, weder eine Darstellung eines Porsche-Modells noch ein Produktfoto. Dieselbe Komposition kann für eine Materialauswahl verwendet werden, ohne den Eindruck zu erwecken, eine echte Konfiguration sei verfügbar.
Porsche Designsystem Ein segmentiertes Steuerelement dient der Auswahl, nicht als Tab-Leiste
Verwende stabile Werte und eine zentrale Zustandsverwaltung
Jedes p-segmented-control-item stellt einen Wert bereit. Ein Änderungsereignis liefert diesen Wert in event.detail, den das Beispiel vor der Aktualisierung der Zusammenfassung speichert. Die Gruppe zeigt eine sichtbare Beschriftung an, damit die Optionen für Oberflächen und Felgen unterscheidbar bleiben.
Die Version v4 von API unterstützt eine responsive Spaltenzahl und optional einen horizontalen Scrollbereich ohne Umbruch. Kurze Optionen können gemeinsam sichtbar bleiben; lange lokalisierte Beschriftungen sollten umbrochen oder in einem bewusst vorgesehenen Scrollbereich angezeigt werden, statt abgeschnitten zu werden. Deaktivierte Steuerelemente werden aus den Formulardaten ausgeschlossen. Das ist wichtig, wenn dieses Beispiel zu einem echten Formular erweitert wird.
Initialisiere die Werte für Oberflächen und Felgen einmalig im Anwendungszustand.
Lies detail.value aus dem Änderungsereignis der Gruppe aus.
Aktualisiere die sichtbare Darstellung und die Textauswahl gemeinsam.
Entferne nach einer Änderung eine zuvor gespeicherte Zusammenfassung.
Porsche Designsystem Eine lokale Auswahl ist keine abgeschlossene Transaktion
Verwende explizite Button-Typen
p-button ist standardmäßig vom Typ submit. Im Beispiel wird type="button" gesetzt, da das Beibehalten einer Kombination und das Ändern des Farbschemas lokale Interaktionen sind. Für die Navigation ist die Link-Komponente vorgesehen, nicht eine Schaltfläche mit einem erfundenen Ziel.
Die primäre Aktion gibt genau an, was geschehen ist: Eine Kombination wurde für die aktuelle Seitensitzung beibehalten. Sie behauptet weder, dass die Auswahl nach einem Neuladen erhalten bleibt oder im Benutzerkonto gespeichert wird, noch, dass eine Bestellung aufgegeben wurde. Dieses bewusst begrenzte Verhalten ist für ein Interface-Beispiel vollständig ausreichend.
Die primäre Aktion behält die aktuelle lokale Kombination bei.
Die sekundäre Aktion ändert das Farbschema der Benutzeroberfläche.
Für beide Aktionen bleiben sichtbare Beschriftungen vorhanden.
Es wird kein Ladeindikator angezeigt, wenn kein Vorgang aussteht.
Porsche Designsystem Komponenten laden und ihre erste Darstellung absichern
Loader, Stylesheet und Compiler arbeiten zusammen
Die Vite-Konfiguration fügt das offizielle Loader-Partial in den Dokument-Body ein. Der Haupteinstieg importiert das globale Stylesheet und rendert echte Custom Elements. Bereichsbezogene :not(:defined)-Regeln verhindern, dass die ausgewählten Komponententags vor ihrer Registrierung kurz aufblitzen.
Die dokumentierte Vite-Konfiguration schließt die LightDark-Transformation von Lightning CSS aus, da dieses Polyfill als fehlerhaft eingestuft wurde. Dieser Ausschluss ist wichtig: Wird die Token-Funktion beim Kompilieren fälschlicherweise entfernt, kann das Theme auch dann beschädigt werden, wenn das Komponenten-Markup korrekt ist. Empfohlene Preloads lassen sich später über die dokumentierten Font-, Icon- und Komponenten-Partials hinzufügen.
Porsche Designsystem Komponentenbeispiele für das Porsche Designsystem
Vollständige, eigenständige interaktive Demo
Speichere das vollständige Dokument als index.html und öffne es in einem Browser. Eigenständige Offline-Interpretation der Token-Rollen und des Verhaltens segmentierter Auswahlsteuerelemente in v4 von HTML/CSS. Keine native PDS-Laufzeitumgebung, extern geladenen Schriftarten, offiziellen Modellbilder oder echten Fahrzeugdaten.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Original finish study</title><style>:root{color-scheme:light;--canvas:#fff;--surface:hsl(240 10% 95%);--ink:hsl(225 66.7% 1.2%);--line:#c8c8cd;--paint:#b9b6ae}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font:16px/1.5 'Arial Narrow',Arial,sans-serif}body.dark{color-scheme:dark;--canvas:hsl(225 66.7% 1.2%);--surface:hsl(240 2% 10%);--ink:#fcfcff;--line:#515156}button{font:inherit;cursor:pointer}button:focus-visible,input:focus-visible+span{outline:3px solid #1a44ea;outline-offset:4px}header{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:24px 32px;border-bottom:1px solid var(--line)}header b{letter-spacing:3px;font-weight:400}header button{border:1px solid var(--line);color:var(--ink);background:var(--canvas);border-radius:12px;padding:8px 16px}main{max-width:1200px;padding:clamp(16px,1.25vw + 12px,36px);margin:auto}h1{font-size:clamp(1.6rem,1.56vw + 1.29rem,3.16rem);font-weight:400;line-height:1.2;margin:16px 0}.intro{color:var(--ink);opacity:.8;max-width:650px}.layout{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;margin-top:32px}.stage{background:var(--surface);border-radius:24px;display:flex;flex-direction:column;justify-content:center;min-height:360px;overflow:hidden;padding:32px;position:relative}.scene{height:210px;position:relative;width:100%;max-width:520px;margin:auto}.car{height:80px;width:94%;position:absolute;bottom:28px;left:3%;background:var(--paint);border-radius:60% 35% 18% 22% / 75% 65% 25% 35%;box-shadow:inset 0 5px 10px #ffffff70,inset 0 -10px 12px #0003}.roof{position:absolute;bottom:80px;left:25%;width:46%;height:70px;background:var(--paint);border-radius:65% 55% 0 0;transform:skewX(-9deg)}.window{position:absolute;inset:9px 13px 4px;background:linear-gradient(135deg,#202d37,#67737b);border-radius:70% 52% 0 0;border-right:7px solid var(--paint)}.window:after{content:'';position:absolute;left:46%;top:0;height:100%;width:6px;background:var(--paint)}.wheel{position:absolute;bottom:12px;width:69px;height:69px;background:repeating-conic-gradient(#d2d5d8 0deg 13deg,#42464b 13deg 60deg);border:11px solid #191a1d;border-radius:50%;box-shadow:0 0 0 4px #08090a}.wheel.a{left:16%}.wheel.b{right:12%}.aero .wheel{background:radial-gradient(circle,#505860 0 18%,#c6c9cc 20% 65%,#464a4d 68%)}.headlight{position:absolute;right:0;top:18px;width:34px;height:12px;background:#fff9d8;border:2px solid #ffffff80;border-radius:80%;transform:rotate(15deg)}.shadow{height:10px;background:#0002;position:absolute;bottom:7px;width:90%;left:5%;border-radius:50%;filter:blur(5px)}.stage small{font-size:12px;opacity:.7}.panel{padding:8px 0}fieldset{border:0;padding:0;margin:0 0 32px;min-width:0}legend{font-size:18px;margin-bottom:16px}.segments{display:flex;background:var(--surface);padding:4px;border-radius:16px;gap:4px}.segments label{flex:1;min-width:0;position:relative;text-align:center;cursor:pointer}.segments input{position:absolute;opacity:0;width:1px;height:1px}.segments span{display:block;padding:12px 8px;border:1px solid transparent;border-radius:12px}.segments input:checked+span{background:var(--canvas);border-color:var(--ink);box-shadow:0 1px 4px #0002}.swatch{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;border:1px solid #777}.summary{border-top:1px solid var(--line);padding-top:24px;margin:0 0 24px}.summary small{display:block;opacity:.65;margin-bottom:4px}.summary strong{font-weight:400;font-size:20px}.primary{border:0;border-radius:12px;min-height:52px;background:var(--ink);color:var(--canvas);padding:12px 24px;width:100%}.saved{border-left:3px solid var(--ink);padding-left:16px;margin-top:24px}.saved:empty{display:none}footer{font-size:12px;opacity:.7;padding-top:32px}@media(max-width:759px){header{padding:16px}header b{font-size:13px;letter-spacing:1px}.layout{grid-template-columns:1fr;gap:24px}.stage{min-height:270px;padding:16px}.scene{height:210px}.wheel{width:53px;height:53px;border-width:8px;bottom:21px}.car{bottom:38px}.roof{bottom:91px;height:60px}.segments span{padding:12px 5px;font-size:14px}fieldset{margin-bottom:24px}}
</style><header><b>DESIGN STUDY / 01</b><button id="theme" type="button">Dark interface</button></header><main><h1>A different point of view.</h1><p class="intro">Explore two small choices in an original vehicle study. See how a restrained interface keeps the object at the center.</p><div class="layout"><div class="stage"><div class="scene" id="scene" role="img" aria-label="Original vehicle illustration in Chalk with Classic wheels"><div class="shadow"></div><div class="roof"><div class="window"></div></div><div class="car"><div class="headlight"></div></div><div class="wheel a"></div><div class="wheel b"></div></div><small>Original illustration · Not a Porsche model render</small></div><section class="panel" aria-label="Study options"><fieldset><legend>Finish</legend><div class="segments"><label><input type="radio" name="paint" value="chalk" checked><span><i class="swatch" style="background:#b9b6ae"></i>Chalk</span></label><label><input type="radio" name="paint" value="blue"><span><i class="swatch" style="background:#456171"></i>Coastal blue</span></label><label><input type="radio" name="paint" value="red"><span><i class="swatch" style="background:#9f2937"></i>Garnet</span></label></div></fieldset><fieldset><legend>Wheel study</legend><div class="segments"><label><input type="radio" name="wheel" value="Classic" checked><span>Classic</span></label><label><input type="radio" name="wheel" value="Aero"><span>Aero</span></label></div></fieldset><p class="summary" aria-live="polite"><small>YOUR COMBINATION</small><strong id="summary">Chalk · Classic</strong></p><button class="primary" id="save" type="button">Keep this combination</button><p class="saved" id="saved" role="status"></p></section></div><footer>Independent PDS v4 interpretation. Original finish names and illustration; no pricing, vehicle specification, live configuration or order. Choices last only for this page session.</footer></main><script>const colors={chalk:'#b9b6ae',blue:'#456171',red:'#9f2937'},names={chalk:'Chalk',blue:'Coastal blue',red:'Garnet'};function values(){return[document.querySelector('[name=paint]:checked').value,document.querySelector('[name=wheel]:checked').value]}function update(){const[p,w]=values();document.documentElement.style.setProperty('--paint',colors[p]);document.querySelector('#scene').classList.toggle('aero',w==='Aero');document.querySelector('#scene').setAttribute('aria-label',`Original vehicle illustration in ${names[p]} with ${w} wheels`);document.querySelector('#summary').textContent=`${names[p]} · ${w}`;document.querySelector('#saved').textContent=''}document.querySelectorAll('input').forEach(x=>x.addEventListener('change',update));document.querySelector('#save').onclick=()=>{const[p,w]=values();document.querySelector('#saved').textContent=`Kept for this page session: ${names[p]}, ${w}. No order submitted.`};document.querySelector('#theme').onclick=e=>{const dark=document.body.classList.toggle('dark');e.currentTarget.textContent=dark?'Light interface':'Dark interface'};</script></html>
Die Auswahl von Oberflächen und Felgen aktualisiert eine eigens erstellte Konfigurator-Illustration. Dabei handelt es sich nicht um Porsche-Produktspezifikationen; native Ereignisse des segmentierten Steuerelements werden im separaten v4-Beispiel gezeigt.
Zwei gesteuerte Auswahlmöglichkeiten mit einer nur für die Sitzung angezeigten Zusammenfassung
Native p-segmented-control-Elemente lösen Änderungsereignisse mit detail.value aus; p-button verwendet click und einen expliziten Typ.
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<HTMLDivElement>('#app')!.innerHTML=`
<main><h1>Explore an original color study</h1>
<p>This specimen is not a real vehicle configurator or order.</p>
<div class="options">
<p-segmented-control id="paint" label="Finish" value="chalk">
<p-segmented-control-item value="chalk">Chalk</p-segmented-control-item>
<p-segmented-control-item value="blue">Coastal blue</p-segmented-control-item>
<p-segmented-control-item value="red">Garnet</p-segmented-control-item>
</p-segmented-control>
<p-segmented-control id="wheel" label="Wheel study" value="Classic">
<p-segmented-control-item value="Classic">Classic</p-segmented-control-item>
<p-segmented-control-item value="Aero">Aero</p-segmented-control-item>
</p-segmented-control>
</div><div class="preview"><div id="swatch" style="height:120px;border-radius:12px"></div>
<p id="summary" aria-live="polite"></p></div>
<div class="actions"><p-button id="save" type="button">Keep this combination</p-button>
<p-button id="scheme" type="button" variant="secondary">Switch color scheme</p-button></div>
<p id="saved" role="status"></p></main>`;
function render(){document.querySelector<HTMLElement>('#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();
Bei einer Änderung einer der beiden Auswahlmöglichkeiten wird die zuvor beibehaltene Kombination gelöscht.
Die Eigenschaft color-scheme steuert das System-Theme; die Farbfelder für Oberflächen sind anwendungsspezifische Originaldaten.
Das Beispiel erfasst keine Kontaktdaten, reserviert kein Fahrzeug und übermittelt keine Bestellung.
04
Porsche Designsystem Einrichtung des AI-Agenten
Ausgangspunkt für die Implementierung
Native Einrichtung für Web Components in Version 4 mit dem dokumentierten globalen Stylesheet und Loader-Partial. Die Offline-Vorschau verwendet weder extern geladene Schriftarten noch eine Paketlaufzeitumgebung; die Kompilierung mit nativen Paketen wurde hier nicht überprüft.
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('</body>',getLoaderScript()+'</body>');
}}],
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
Ein Prompt für dein Projekt
Agenten-Prompt
Erstelle eine Komposition für PDS Version 4 mit den erforderlichen globalen Styles, dem Loader-Partial, color-scheme, tatsächlichem fluidem Spacing sowie Radien von 12px für Steuerelemente und 24px für Container. Verwende für zwei eigens erstellte Beispieloptionen detail.value aus dem Änderungsereignis des segmentierten Steuerelements und setze für lokale Aktionen explizit type=button. Vermische keine veralteten Wrapper-APIs und stelle das Beispiel nicht als echte Fahrzeugkonfiguration dar.
05
Quellen und Umfang von Porsche Designsystem
Unabhängige OpenDesign-Referenz für PDS v4. Die Namen der Originalgrafiken und Oberflächen sind keine Porsche-Fahrzeugspezifikationen, Lackcodes oder verfügbaren Optionen. Es wird keine Transaktion durchgeführt.
