# Système de design Porsche ## 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. ## 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. ### Espacement statique | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | spacingStatic2Xs | 1px | Jeton d’espacement fixe. | | spacingStaticXs | 4px | Jeton d’espacement fixe. | | spacingStaticSm | 8px | Jeton d’espacement fixe. | | spacingStaticMd | 16px | Jeton d’espacement fixe. | | spacingStaticLg | 32px | Jeton d’espacement fixe. | | spacingStaticXl | 48px | Jeton d’espacement fixe. | | spacingStatic2Xl | 80px | Jeton d’espacement fixe. | ### Espacement fluide | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | spacingFluidXs | clamp(4px, 0.25vw + 3px, 8px) | Petit écart adaptatif. | | spacingFluidSm | clamp(8px, 0.5vw + 6px, 16px) | Écart adaptatif compact. | | spacingFluidMd | clamp(16px, 1.25vw + 12px, 36px) | Marge intérieure d’exemple de page. | | spacingFluidLg | clamp(32px, 2.75vw + 23px, 76px) | Espacement des sections. | | spacingFluidXl | clamp(48px, 3vw + 38px, 96px) | Espacement important. | | spacingFluid2Xl | clamp(80px, 7.5vw + 56px, 200px) | Espacement majeur de composition. | ### Rôles des couleurs | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | colorCanvas | light-dark(#fff,hsl(225 66.7% 1.2%)) | Fond de page. | | colorSurface | light-dark(hsl(240 10% 95%),hsl(240 2% 10%)) | Surface secondaire. | | colorPrimary | light-dark(hsl(225 66.7% 1.2%),hsl(225 100% 99%)) | Texte principal. | | colorFocus | light-dark(#1A44EA,#1A44EA) | Focus clavier. | | colorContrastLow / colorContrastLower | Decorative only | Rôles de texte non conformes aux exigences d’accessibilité. | ### Expressions typographiques | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | fontPorscheNext | 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif | Famille officielle et polices de remplacement. | | typescale2Xs | .75rem | Plus petite taille de texte répertoriée. | | typescaleXs | .875rem | Métadonnées en petit corps. | | typescaleSm | 1rem | Corps de texte de référence. | | typescaleMd | clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem) | Typographie fluide. | | typescale2Xl | clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem) | Grand titre fluide. | | leadingNormal | calc(6px + 2.125ex) | Hauteur de ligne adaptée à la police. | | fontWeightNormal / Semibold / Bold | 400 / 600 / 700 | Graisses disponibles. | ### Formes | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | radiusXs / Sm / Md | 2px / 4px / 6px | Petits arrondis. | | radiusLg | 8px | Commandes interactives compactes. | | radiusXl | 12px | Commandes interactives standard. | | radius2Xl | 16px | Notifications. | | radius3Xl | 24px | Tuiles et conteneurs de type boîte de dialogue. | | radius4Xl | 32px | Plus grand rayon fixe. | | radiusFull | calc(infinity * 1px) | Indicateurs autonomes en forme de pilule. | ### Points de rupture | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | breakpointXs | 480 | Jeton numérique utilisé avec px. | | breakpointSm | 760 | Jeton numérique utilisé avec px. | | breakpointMd | 1000 | Jeton numérique utilisé avec px. | | breakpointLg | 1300 | Jeton numérique utilisé avec px. | | breakpointXl | 1760 | Jeton numérique utilisé avec px. | | breakpoint2Xl | 1920 | Jeton numérique utilisé avec px. | ### Contrat du choix segmenté | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | value | string \| number | Valeur de l’élément sélectionné. | | change event | detail: { value: string \| number } | Mettre à jour l’état de l’application. | | columns | auto or 1–25; responsive values supported | Contrôler la grille d’éléments. | | noWrap | false by default | La valeur true crée une ligne unique défilante. | | state | none / error / success | Style de validation. | | disabled | Excludes value from form submission | Différent d’un élément ordinaire non sélectionné. | ## Système de design Porsche Guide complet Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. 1. Initialiser une seule fois les valeurs de finition et de jantes dans l’état de l’application. 2. Lire detail.value dans l’événement change du groupe. 3. Mettre à jour simultanément l’étude visible et la sélection textuelle. 4. Effacer tout récapitulatif précédemment conservé après une modification. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. ``` 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

``` Référence du code - 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. ``` 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(); ``` Référence du code - 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. ## 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. ``` # 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 ``` ### Un prompt pour votre projet ``` 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. ``` ## 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. - Migration vers la version 4 Styles globaux et modifications de color-scheme. - Configuration en JavaScript natif Fragment de chargement, feuille de style et configuration Vite. - Jetons d’espacement Expressions statiques et fluides. - Jetons de couleur Rôles associés et limites décoratives. - Jetons de police Porsche Next, tailles de police et interligne. - Jetons de bordure Rayons des contrôles et des conteneurs. - Jetons de points de rupture Seuils adaptatifs réels. - Contrôle segmenté API Valeurs, événements change et comportement des formulaires. - Bouton API Types, variantes et état en attente. ## Ressources associées système de design Porsche ### Red Hat PatternFly Utilisez PatternFly pour créer un espace de travail opérationnel : références aux tokens sémantiques, cartes de service sélectionnables, sélection groupée à trois états, vérification du périmètre et code React natif complet. ### REI Cedar Créez un sélecteur de commandes Cedar concret avec des vignettes Vue natives, les véritables valeurs des tokens, une navigation complète au clavier et une composition de produits adaptative. ### Sainsbury's système de design Appliquez les recommandations publiques de Sainsbury’s en matière de design à un parcours complet de réservation d’un créneau de collecte : références réelles de palette et de tailles, choix par boutons radio accessibles, récapitulatif actualisé et retour local fidèle à la réalité. - [Référence de mise en œuvre](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [Source](https://designsystem.porsche.com/v4/tokens/spacing/) - [Source](https://designsystem.porsche.com/v4/tokens/color/) - [Source](https://designsystem.porsche.com/v4/tokens/font/) - [Source](https://designsystem.porsche.com/v4/tokens/border/) - [Source](https://designsystem.porsche.com/v4/tokens/breakpoint/) - [Source](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [Consultez la spécification associée](https://designsystem.porsche.com/v4/news/migration-guide/porsche-design-system/) - [Consultez la spécification associée](https://designsystem.porsche.com/v4/tokens/color/) - [Consultez la spécification associée](https://designsystem.porsche.com/v4/tokens/spacing/) - [Consultez la spécification associée](https://designsystem.porsche.com/v4/tokens/font/) - [Consultez la spécification associée](https://designsystem.porsche.com/v4/tokens/border/) - [Consultez la spécification associée](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [Consultez la spécification associée](https://designsystem.porsche.com/v4/components/button/api/) - [Consultez la spécification associée](https://designsystem.porsche.com/v4/developing/vanilla-js/getting-started/) - [Référence du code](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [Migration vers la version 4 Styles globaux et modifications de color-scheme.](https://designsystem.porsche.com/v4/news/migration-guide/porsche-design-system/) - [Configuration en JavaScript natif Fragment de chargement, feuille de style et configuration Vite.](https://designsystem.porsche.com/v4/developing/vanilla-js/getting-started/) - [Jetons d’espacement Expressions statiques et fluides.](https://designsystem.porsche.com/v4/tokens/spacing/) - [Jetons de couleur Rôles associés et limites décoratives.](https://designsystem.porsche.com/v4/tokens/color/) - [Jetons de police Porsche Next, tailles de police et interligne.](https://designsystem.porsche.com/v4/tokens/font/) - [Jetons de bordure Rayons des contrôles et des conteneurs.](https://designsystem.porsche.com/v4/tokens/border/) - [Jetons de points de rupture Seuils adaptatifs réels.](https://designsystem.porsche.com/v4/tokens/breakpoint/) - [Contrôle segmenté API Valeurs, événements change et comportement des formulaires.](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [Bouton API Types, variantes et état en attente.](https://designsystem.porsche.com/v4/components/button/api/)