Design de produits d’entreprise · Nouvelle ressource
Système de design Porsche.
Découvrez Porsche Design System v4 à travers ses espacements fluides, ses jeux de couleurs CSS, la typographie Porsche Next et un configurateur à deux choix. La référence comprend les expressions réelles des tokens et un point d’entrée Vite complet utilisant les événements actuels du contrôle segmenté.
Guide OpenDesign8 chapitres45 entrées de référenceGuide de l’application d’origine
01
Système de design Porsche Aperçu de l’interface
Choisissez une finition et un style de jantes, conservez un récapitulatif de la configuration et basculez entre les modes clair et sombre de l’interface.
Interprétation originale hors ligne de HTML/CSS des rôles des jetons de la v4 et du comportement des choix segmentés. Aucun environnement d’exécution PDS natif, aucune police distante, aucune image officielle de modèle ni aucune donnée réelle de véhicule. · Référence de mise en œuvre
02
Système de design Porsche Référence de conception
Documentation Porsche Design System v4, dont les pages consacrées aux jetons affichent la version 4.8.0. Cette référence porte sur une version précise et ne prétend pas documenter la dernière version. Les échantillons de couleurs de finition sont des données propres à l’application, et non des codes de peinture Porsche officiels.
Système de design Porsche Utiliser les fondations de la v4 comme un ensemble cohérent
Les variables globales sont désormais obligatoires
La version 4 s’appuie sur les variables globales CSS pour définir les styles des composants. L’importation de la feuille de style globale est donc une exigence architecturale, et non une simple réinitialisation décorative. Cette importation comprend également la normalisation et les définitions de polices Porsche Next avec @font-face.
Cette référence rassemble les contrats des composants et des jetons de la v4. Les anciens exemples qui utilisent des conteneurs de champs de texte ou des propriétés de thème par composant ne doivent pas être repris sans consulter le guide de migration. La documentation est versionnée : cette page précise donc sa portée au lieu de prétendre présenter une référence API intemporelle.
Système de design Porsche Le schéma de couleurs sélectionne des paires complètes de rôles
Distinguer les rôles de l’interface des échantillons de finition
Les jetons de canevas, de surface et de couleur de premier plan principale contiennent des paires light-dark(). La propriété CSS color-scheme choisit la variante à appliquer. Définissez light, dark ou light dark selon que l’application impose un mode ou suit les préférences de l’utilisateur.
Les couleurs de finition de cet exemple sont des échantillons originaux indépendants. Le passage de l’interface au mode sombre modifie les surfaces environnantes et le texte, mais pas la finition sélectionnée. Les rôles de couleur à faible contraste sont destinés à la décoration ; les utiliser pour le libellé d’une option essentielle dépasserait l’usage prévu du jeton.
Système de design Porsche Un rythme fluide et des espacements fixes entre les commandes coexistent
Utiliser des expressions clamp lorsque l’espace doit augmenter
Porsche propose des échelles statiques et fluides. L’entrée native utilise l’expression fluide moyenne pour la marge intérieure de la page, tandis que des espacements de 16px et 32px assurent des relations stables au sein de la zone d’options. Une valeur maximale fluide évite que les espaces blancs ne s’étendent sans fin sur un écran large.
Sous 760px, l’exemple passe d’une disposition large associant visuel et commandes à des sections empilées. 760px est l’une des valeurs de point d’arrêt documentées. Le choix de les empiler relève de la composition de l’application ; la valeur du point d’arrêt, elle, est une référence du système.
Système de design Porsche La typographie dépend de la police fournie
L’expression de hauteur de ligne n’est pas un ratio générique
Porsche Next dispose d’une pile de polices de remplacement documentée et d’une échelle typographique qui associe de petites tailles fixes à des tailles plus grandes fluides. leadingNormal utilise des unités ex, qui s’adaptent à la hauteur d’x de la police, auxquelles s’ajoute une valeur fixe en pixels. Remplacer cette expression par un ratio arbitraire de 1.5 modifie le rythme prévu.
L’interprétation hors ligne utilise une police locale de remplacement et une hauteur de ligne confortable, plutôt que de laisser croire que la police sous licence est incluse. Dans l’entrée native, la feuille de style globale définit la véritable police. Dans le langage de conception de la v4, les titres utilisent une graisse normale ; une taille plus grande n’exige pas une graisse épaisse pour établir la hiérarchie.
Système de design Porsche Les commandes et les conteneurs utilisent des rayons différents
Douze et vingt-quatre pixels définissent la hiérarchie principale
Le rayon standard des éléments interactifs est de 12px ; celui des cartes et boîtes de dialogue est de 24px. Les commandes compactes utilisent un rayon de 8px, tandis que les notifications utilisent 16px. Appliquer l’arrondi maximal à chaque élément effacerait ces distinctions.
L’aperçu original présente l’étude de véhicule sur une large surface de 24px et utilise des commandes de 12px. La silhouette du véhicule est une création originale CSS, et non une représentation d’un modèle Porsche ni une photo de produit. Cette même composition peut servir à un sélecteur de matériaux sans laisser entendre que des configurations réelles sont disponibles.
Système de design Porsche Un contrôle segmenté sert à faire un choix, ce n’est pas une barre d’onglets
Utiliser des valeurs stables et un seul propriétaire de l’état
Chaque p-segmented-control-item fournit une valeur. Un événement change renvoie cette valeur dans event.detail ; l’exemple l’enregistre avant de mettre à jour le récapitulatif. Le groupe présente un libellé visible afin que les options de finition et de jantes restent distinctes.
Le contrôle segmenté API de la v4 permet de définir un nombre de colonnes adaptatif et d’activer, en option, le défilement sans retour à la ligne. Les options courtes peuvent rester visibles ensemble ; les libellés longs dans une langue donnée doivent passer à la ligne ou utiliser un défilement prévu à cet effet, plutôt que d’être tronqués. Les commandes désactivées sont exclues des données du formulaire, un point à prendre en compte si cet exemple devient un véritable formulaire.
Initialiser une seule fois les valeurs de finition et de jantes dans l’état de l’application.
Lire detail.value dans l’événement change du groupe.
Mettre à jour simultanément l’étude visible et la sélection textuelle.
Effacer tout récapitulatif précédemment conservé après une modification.
Système de design Porsche Une sélection locale ne constitue pas une transaction terminée
Définir explicitement le type des boutons
p-button est de type submit par défaut. L’exemple définit type="button", car la conservation d’une combinaison et le changement de schéma de couleurs sont des interactions locales. La navigation relève du composant Link, et non d’un bouton auquel on attribuerait une destination fictive.
L’action principale indique précisément ce qui s’est passé : une combinaison a été conservée pour la session en cours sur cette page. Elle ne prétend pas que les données seront conservées après un rechargement, enregistrées dans un compte ou associées à une commande. Cette portée limitée est délibérée et complète pour un exemple d’interface.
L’action principale conserve la combinaison localement pour la session en cours.
L’action secondaire modifie le thème de couleur de l’interface.
Les libellés restent visibles pour les deux actions.
Aucun indicateur de chargement n’apparaît lorsqu’aucune opération n’est en cours.
Système de design Porsche Charger les composants et protéger leur premier rendu
Le chargeur, la feuille de style et le compilateur fonctionnent ensemble
La configuration Vite injecte le fragment de chargement officiel dans le corps du document. Le point d’entrée principal importe la feuille de style globale et affiche de véritables éléments personnalisés. Les règles scoped :not(:defined) empêchent les balises de composants sélectionnées de clignoter avant leur enregistrement.
La configuration Vite documentée exclut la transformation LightDark de Lightning CSS, car ce polyfill est réputé défectueux. Il est important de conserver cette exclusion : une compilation incorrecte de la fonction de jeton peut casser le thème, même si le balisage du composant est correct. Les préchargements recommandés pourront être ajoutés ultérieurement à l’aide des fragments documentés pour les polices, les icônes et les composants.
Exemples de composants du système de design système de design Porsche
Exemple interactif autonome complet
Enregistrez le document complet sous le nom index.html, puis ouvrez-le dans un navigateur. Interprétation hors ligne originale des rôles de jeton v4 et du comportement des choix segmentés HTML/CSS. Aucun moteur PDS natif, aucune police distante, aucune image officielle de modèle ni aucune donnée réelle de véhicule.
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>
Les choix de finition et de roues mettent à jour une illustration de configurateur originale. Ils ne correspondent pas aux spécifications des véhicules Porsche ; les événements natifs du contrôle segmenté figurent dans l’exemple v4 distinct.
Deux choix contrôlés et un récapitulatif valable uniquement pour la session
Les éléments natifs p-segmented-control émettent des événements change avec detail.value ; p-button utilise click et un attribut type explicite.
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();
La modification de l’un ou l’autre choix efface la combinaison précédemment conservée.
La propriété color-scheme contrôle le thème du système ; les échantillons de finition restent des données originales de l’application.
L’exemple ne recueille aucune coordonnée, ne réserve aucun véhicule et ne passe aucune commande.
04
Configuration de l’agent système de design Porsche
Point de départ de l’implémentation
Configuration des composants Web natifs de la version 4, avec la feuille de style globale et le fragment de chargement documentés. L’aperçu hors ligne n’utilise ni polices distantes ni environnement d’exécution de package ; la compilation native du package n’a pas été vérifiée ici.
texte
# 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
Un prompt pour votre projet
Prompt pour l’agent IA
Créez une composition PDS version 4 avec les styles globaux obligatoires, le fragment de chargement, color-scheme, un espacement fluide réel et des rayons de 12 px pour les contrôles et de 24 px pour les conteneurs. Utilisez detail.value lors de l’événement change du contrôle segmenté pour deux choix d’exemple originaux, et type=button explicite pour les actions locales. Ne mélangez pas les anciennes API de wrappers et ne présentez pas l’exemple comme une configuration réelle de véhicule.
05
Sources et périmètre système de design Porsche
Référence indépendante OpenDesign limitée à PDS v4. Les illustrations et noms de finition originaux ne sont pas des spécifications de véhicules Porsche, des codes de peinture ni des options disponibles. Aucune transaction n’est effectuée.
