Explora Porsche Design System v4 con espaciado fluido, esquemas de color CSS, tipografía Porsche Next y un configurador con dos opciones. La referencia incluye expresiones reales de tokens y una entrada Vite completa que usa los eventos actuales de controles segmentados.
Interpretación original sin conexión de HTML/CSS sobre los roles de los tokens de v4 y el comportamiento de las opciones segmentadas. Sin entorno de ejecución nativo de PDS, fuentes remotas, imágenes oficiales de modelos ni datos reales de vehículos. · Referencia de implementación
02
Referencia de diseño de sistema de diseño Porsche
Documentación de Porsche Design System v4, con páginas de tokens que muestran v4.8.0. Es una referencia limitada a esa versión, no una afirmación sobre la versión más reciente. Las muestras de color de acabado originales son datos de la aplicación, no códigos oficiales de pintura de Porsche.
Usa la base de v4 de sistema de diseño Porsche como un conjunto completo
Las variables globales son ahora obligatorias
La versión 4 construye los estilos de los componentes sobre variables globales de CSS. Por lo tanto, importar la hoja de estilos global es un requisito arquitectónico, no un restablecimiento decorativo. La misma importación incluye la normalización y las definiciones de @font-face de Porsche Next.
Esta referencia reúne los contratos de componentes y tokens de v4. Los ejemplos antiguos que usan envoltorios de campos de texto o propiedades de tema por componente no deben trasladarse sin consultar la guía de migración. La documentación también está versionada, por lo que la página delimita su alcance en lugar de presentarlo como algo inmutable API.
Sistema de diseño Porsche El esquema de color selecciona pares completos de roles
Separa los roles de la interfaz de las muestras de acabado
Los tokens canvas, surface y primary foreground contienen pares light-dark(). La propiedad CSS color-scheme elige la variante. Define light, dark o light dark según si la aplicación fija un modo o sigue las preferencias de la persona usuaria.
Los colores de acabado de este ejemplo son muestras originales independientes. Al cambiar la interfaz al modo oscuro, cambian las superficies y el texto que la rodean, no el acabado seleccionado. Los roles de color con menos contraste son decorativos; usarlos para la etiqueta de una opción esencial contravendría el propósito del token.
Sistema de diseño Porsche El ritmo fluido y los espacios fijos entre controles coexisten
Usa expresiones clamp cuando el espacio deba crecer
Porsche ofrece escalas estáticas y fluidas. La implementación nativa usa la expresión fluida mediana para el relleno de página, mientras que los espacios de 16px y 32px mantienen relaciones estables dentro del área de opciones. Un límite máximo fluido evita que el espacio en blanco se expanda indefinidamente en pantallas anchas.
La muestra pasa de una disposición amplia, con elementos visuales y controles lado a lado, a secciones apiladas por debajo de 760px, uno de los valores de punto de quiebre documentados. Apilar las secciones es una decisión de composición de la aplicación; el valor del punto de quiebre es una referencia del sistema.
Sistema de diseño Porsche La tipografía depende de la fuente proporcionada
La expresión de interlineado no es una proporción genérica
Porsche Next cuenta con una pila de fuentes alternativas documentada y una escala tipográfica con tamaños pequeños fijos y tamaños grandes fluidos. leadingNormal usa unidades ex, que responden a la altura de la x de la fuente, además de una suma fija en píxeles. Sustituirlo por una proporción arbitraria de 1.5 cambia el ritmo previsto.
La versión sin conexión usa una fuente alternativa local y un interlineado cómodo y legible, sin dar a entender que se ha incluido la fuente con licencia. En la implementación nativa, la hoja de estilos global define la fuente real. En el lenguaje de diseño v4, los encabezados usan un grosor regular; un tamaño mayor no requiere un grosor pesado para establecer jerarquía.
Sistema de diseño Porsche Los controles y los contenedores usan radios distintos
Doce y veinticuatro píxeles definen la jerarquía principal
El radio estándar de los elementos interactivos es de 12px; la familia de tarjetas y diálogos usa 24px. Los controles compactos usan 8px, mientras que las notificaciones usan 16px. Aplicar el radio más amplio a todos los elementos borraría estas relaciones.
La vista previa original presenta el estudio del vehículo sobre una superficie amplia de 24px y usa controles de 12px. La silueta del vehículo es una ilustración original CSS, no una representación de un modelo Porsche ni una fotografía de producto. La misma composición puede usarse para un selector de materiales sin dar a entender que haya configuraciones reales disponibles.
Sistema de diseño Porsche Un control segmentado sirve para elegir, no es una barra de pestañas
Usa valores estables y una única fuente de estado
Cada p-segmented-control-item proporciona un valor. El evento change devuelve ese valor en event.detail, que el ejemplo guarda antes de volver a dibujar el resumen. El grupo muestra una etiqueta visible para distinguir las opciones de acabado de las opciones de ruedas.
El API de v4 admite un número de columnas adaptable y un desplazador opcional que evita el salto de línea. Las opciones breves pueden permanecer visibles a la vez; las etiquetas largas en otros idiomas deben ajustarse o usar un desplazador intencional, en lugar de quedar recortadas. Los controles deshabilitados se excluyen de los datos del formulario, algo que debe tenerse en cuenta al convertir esta muestra en un formulario real.
Inicializa una sola vez en el estado de la aplicación los valores de acabado y ruedas.
Lee detail.value del evento change del grupo.
Actualiza a la vez el estudio visible y la selección textual.
Borra cualquier resumen guardado anteriormente después de una edición.
Sistema de diseño Porsche Una selección local no es una transacción completada
Especifica explícitamente el tipo de los botones
p-button usa submit de forma predeterminada. El ejemplo establece type="button" porque guardar una combinación y cambiar el esquema de color son interacciones locales. La navegación corresponde al componente Link, no a un botón con un destino inventado.
La acción principal informa exactamente de lo que ha ocurrido: se ha guardado una combinación durante la sesión actual de la página. No afirma que se conserve tras recargar, que se almacene en una cuenta ni que se haya realizado un pedido. Este comportamiento limitado es deliberado y suficiente para una muestra de interfaz.
La acción principal guarda la combinación local actual.
La acción secundaria cambia el esquema de color de la interfaz.
Las dos acciones mantienen sus etiquetas visibles.
No se muestra ningún indicador de carga cuando no hay una operación pendiente.
Sistema de diseño Porsche Carga los componentes y protege su primer renderizado
El loader, la hoja de estilos y el compilador trabajan juntos
La configuración de Vite inyecta el fragmento oficial del loader en el body del documento. La entrada principal importa la hoja de estilos global y renderiza elementos personalizados reales. Las reglas :not(:defined) con ámbito evitan que las etiquetas de los componentes seleccionados parpadeen antes de registrarse.
La configuración de Vite documentada excluye la transformación LightDark de Lightning CSS porque se ha identificado que ese polyfill tiene errores. Mantener esta exclusión es importante: compilar incorrectamente la función del token puede romper el tema aunque el marcado del componente sea correcto. Más adelante pueden añadirse las precargas recomendadas mediante los fragmentos documentados para fuentes, iconos y componentes.
Sistema de diseño Porsche Ejemplos de componentes del sistema de diseño
Muestra interactiva independiente completa
Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación sin conexión original HTML/CSS de los roles de tokens de v4 y del comportamiento de selección segmentada. No incluye el entorno de ejecución nativo de PDS, fuentes remotas, imágenes oficiales de modelos ni datos reales de vehículos.
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>
Las opciones de acabado y ruedas actualizan una ilustración original de configurador. No representan especificaciones de productos Porsche; los eventos nativos de segmented-control aparecen en el ejemplo de v4 independiente.
Dos opciones controladas y un resumen que solo dura durante la sesión
Los elementos nativos p-segmented-control emiten eventos change con detail.value; p-button usa click y un type explícito.
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();
Cambiar cualquiera de las opciones borra la combinación anterior guardada.
La propiedad color-scheme controla el tema del sistema; las muestras de acabado siguen siendo datos originales de la aplicación.
El ejemplo no recopila datos de contacto, reserva un vehículo ni envía un pedido.
04
Configuración de sistema de diseño Porsche Agent
Punto de partida para la implementación
Configuración de Web Component nativo de la versión 4 con la hoja de estilos global documentada y el fragmento del loader. La vista previa sin conexión no usa fuentes remotas ni el runtime de paquetes; la compilación del paquete nativo no se ha verificado aquí.
Texto
# 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
Una instrucción para tu proyecto
Instrucción para el agente
Crea una composición PDS de la versión 4 con estilos globales obligatorios, el fragmento del loader, color-scheme, espaciado fluido real y radios de 12px para los controles y de 24px para los contenedores. Usa detail.value en el evento change de segmented-control para las dos opciones de muestra originales y type=button explícito para las acciones locales. No combines las API de wrappers heredadas ni presentes la muestra como una configuración de vehículo real.
05
Fuentes y alcance de sistema de diseño Porsche
Referencia independiente de OpenDesign, limitada a PDS v4. Las ilustraciones y los nombres de acabados originales no son especificaciones de vehículos Porsche, códigos de pintura ni opciones disponibles. No se realiza ninguna transacción.
