# Sistema de design Porsche ## Prévia da interface sistema de design Porsche Escolha um acabamento e um estilo de roda, mantenha um resumo da sessão e alterne entre os modos claro e escuro da interface. ## Referência de design sistema de design Porsche Documentação do Porsche Design System v4, com páginas de tokens que exibem a versão v4.8.0. Esta é uma referência com escopo de versão, não uma afirmação de que seja a versão mais recente. As amostras de acabamentos originais são dados do aplicativo, não códigos oficiais de pintura Porsche. ### Espaçamento estático | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | spacingStatic2Xs | 1px | Token de espaçamento fixo. | | spacingStaticXs | 4px | Token de espaçamento fixo. | | spacingStaticSm | 8px | Token de espaçamento fixo. | | spacingStaticMd | 16px | Token de espaçamento fixo. | | spacingStaticLg | 32px | Token de espaçamento fixo. | | spacingStaticXl | 48px | Token de espaçamento fixo. | | spacingStatic2Xl | 80px | Token de espaçamento fixo. | ### Espaçamento fluido | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | spacingFluidXs | clamp(4px, 0.25vw + 3px, 8px) | Pequeno intervalo adaptável. | | spacingFluidSm | clamp(8px, 0.5vw + 6px, 16px) | Espaçamento adaptável compacto. | | spacingFluidMd | clamp(16px, 1.25vw + 12px, 36px) | Preenchimento de exemplo da página. | | spacingFluidLg | clamp(32px, 2.75vw + 23px, 76px) | Espaçamento entre seções. | | spacingFluidXl | clamp(48px, 3vw + 38px, 96px) | Espaçamento amplo. | | spacingFluid2Xl | clamp(80px, 7.5vw + 56px, 200px) | Espaçamento amplo para a composição. | ### Papéis das cores | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | colorCanvas | light-dark(#fff,hsl(225 66.7% 1.2%)) | Fundo da página. | | colorSurface | light-dark(hsl(240 10% 95%),hsl(240 2% 10%)) | Superfície secundária. | | colorPrimary | light-dark(hsl(225 66.7% 1.2%),hsl(225 100% 99%)) | Texto principal. | | colorFocus | light-dark(#1A44EA,#1A44EA) | Foco do teclado. | | colorContrastLow / colorContrastLower | Decorative only | Papéis de texto que não atendem aos requisitos de acessibilidade. | ### Expressões tipográficas | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | fontPorscheNext | 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif | Família oficial e fallbacks. | | typescale2Xs | .75rem | Menor tamanho tipográfico listado. | | typescaleXs | .875rem | Metadados pequenos. | | typescaleSm | 1rem | Tamanho-base do corpo do texto. | | typescaleMd | clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem) | Tipografia fluida. | | typescale2Xl | clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem) | Título grande fluido. | | leadingNormal | calc(6px + 2.125ex) | Altura de linha sensível à fonte. | | fontWeightNormal / Semibold / Bold | 400 / 600 / 700 | Pesos disponíveis. | ### Formas | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | radiusXs / Sm / Md | 2px / 4px / 6px | Formas pequenas. | | radiusLg | 8px | Controles interativos compactos. | | radiusXl | 12px | Controles interativos padrão. | | radius2Xl | 16px | Notificações. | | radius3Xl | 24px | Blocos e contêineres semelhantes a diálogos. | | radius4Xl | 32px | Maior raio fixo. | | radiusFull | calc(infinity * 1px) | Indicadores isolados em formato de pílula. | ### Pontos de quebra | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | breakpointXs | 480 | Token numérico usado com px. | | breakpointSm | 760 | Token numérico usado com px. | | breakpointMd | 1000 | Token numérico usado com px. | | breakpointLg | 1300 | Token numérico usado com px. | | breakpointXl | 1760 | Token numérico usado com px. | | breakpoint2Xl | 1920 | Token numérico usado com px. | ### Contrato de escolha segmentada | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | value | string \| number | Valor do item selecionado. | | change event | detail: { value: string \| number } | Atualize o estado do aplicativo. | | columns | auto or 1–25; responsive values supported | Controle a grade de itens. | | noWrap | false by default | True cria uma linha única com rolagem. | | state | none / error / success | Estilo de validação. | | disabled | Excludes value from form submission | Diferente de um item comum não selecionado. | ## Guia completo de sistema de design Porsche Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Sistema de design Porsche Use a base do v4 como um conjunto completo ### As variáveis globais agora são obrigatórias > A versão 4 cria estilos de componentes com base em variáveis globais CSS. Portanto, importar a folha de estilos global é um requisito arquitetural, não apenas uma redefinição decorativa. A mesma importação inclui a normalização e as definições de font-face do Porsche Next. Esta referência reúne os contratos dos componentes e dos tokens do v4. Exemplos antigos que usam contêineres text-field ou propriedades de tema por componente não devem ser reutilizados sem consultar o guia de migração. A própria documentação é versionada; por isso, a página especifica seu escopo em vez de afirmar que o API é imutável. Consulte a especificação de apoio ## Sistema de design Porsche O esquema de cores seleciona pares completos de papéis ### Separe os papéis da interface das amostras de acabamento Os tokens de tela, superfície e primeiro plano principal contêm pares light-dark(). A propriedade CSS color-scheme seleciona a opção. Defina light, dark ou light dark conforme o aplicativo fixe um modo ou siga a preferência do usuário. As cores de acabamento deste exemplo são amostras originais independentes. Ao mudar a interface para o modo escuro, as superfícies ao redor e o texto mudam, mas o acabamento selecionado permanece igual. Os papéis de cor com menor contraste são decorativos; usá-los no rótulo de uma opção essencial ultrapassaria o limite de uso previsto para o token. Consulte a especificação de apoio ## Sistema de design Porsche Ritmo fluido e espaçamentos fixos entre controles coexistem ### Use expressões clamp quando o espaço precisar aumentar A Porsche oferece escalas estáticas e fluidas. A entrada nativa usa a expressão fluida média no preenchimento da página, enquanto os espaçamentos de 16px e 32px mantêm relações estáveis na área de opções. Um limite fluido evita que o espaço em branco continue aumentando indefinidamente em telas largas. O exemplo passa de uma disposição ampla, com visual e controles lado a lado, para seções empilhadas abaixo de 760px, um dos valores de breakpoint documentados. A decisão de empilhar é uma escolha de composição do aplicativo; o valor do breakpoint é a referência do sistema. Consulte a especificação de apoio ## Sistema de design Porsche A tipografia depende da fonte fornecida ### A expressão de altura de linha não é uma proporção genérica Porsche Next tem uma pilha de fallbacks documentada e uma escala tipográfica com tamanhos pequenos fixos e tamanhos maiores fluidos. leadingNormal usa unidades ex, que respondem à altura-x da fonte, mais um acréscimo fixo em pixels. Substituí-la por uma proporção arbitrária de 1.5 altera o ritmo previsto. A interpretação offline usa um fallback local e uma altura de linha confortável para leitura, sem fingir que a fonte licenciada foi incluída. Na implementação nativa, a folha de estilos global define a fonte real. Na linguagem visual do v4, os títulos usam peso regular; um tamanho maior não exige um peso mais forte para estabelecer hierarquia. Consulte a especificação de apoio ## Sistema de design Porsche Controles e contêineres usam raios diferentes ### Doze e vinte e quatro pixels definem a hierarquia principal O raio padrão para elementos interativos é de 12px; a família de cartões e diálogos usa 24px. Controles compactos usam 8px, enquanto notificações usam 16px. Aplicar o maior arredondamento a todos os elementos apagaria essas relações. A prévia original apresenta o estudo do veículo em uma superfície ampla com raio de 24px e usa controles com raio de 12px. A silhueta do veículo é uma ilustração original de CSS, não uma renderização de um modelo Porsche nem uma fotografia de produto. A mesma composição pode ser usada para um seletor de materiais sem sugerir que haja uma configuração real disponível. Consulte a especificação de apoio ## Sistema de design Porsche Um controle segmentado é uma escolha, não uma barra de abas ### Use valores estáveis e uma única fonte de estado Cada p-segmented-control-item fornece um valor. Um evento change retorna esse valor em event.detail, que o exemplo armazena antes de redesenhar o resumo. O grupo exibe um rótulo visível para diferenciar as opções de acabamento das opções de rodas. O API do v4 permite definir a quantidade de colunas de forma responsiva e usar, opcionalmente, um contêiner rolável que não quebra a linha. Opções curtas podem ficar visíveis ao mesmo tempo; rótulos longos e localizados devem quebrar linha ou usar uma área de rolagem planejada, em vez de serem cortados. Controles desativados são excluídos dos dados do formulário, algo importante ao ampliar este exemplo para um formulário real. 1. Inicialize os valores de acabamento e rodas uma única vez no estado do aplicativo. 2. Leia detail.value do evento change do grupo. 3. Atualize o estudo visual e a seleção textual ao mesmo tempo. 4. Limpe qualquer resumo salvo anteriormente após uma edição. Consulte a especificação de apoio ## Sistema de design Porsche Uma seleção local não é uma transação concluída ### Defina explicitamente os tipos dos botões p-button usa submit por padrão. O exemplo define type="button" porque salvar uma combinação e mudar o esquema de cores são interações locais. A navegação deve usar o componente Link, não um botão com um destino inventado. A ação principal informa exatamente o que aconteceu: uma combinação foi mantida durante a sessão atual da página. Ela não promete persistência após recarregar a página, armazenamento na conta nem realização de um pedido. Esse comportamento limitado é intencional e suficiente para um exemplo de interface. - A ação principal mantém a combinação local atual. - A ação secundária muda o esquema de cores da interface. - Os rótulos visíveis permanecem presentes nas duas ações. - Nenhum indicador de carregamento é exibido quando não há uma operação pendente. Consulte a especificação de apoio ## Sistema de design Porsche Carregue os componentes e proteja a primeira renderização ### Loader, folha de estilos e compilador trabalham juntos A configuração do Vite injeta o partial oficial do loader no corpo do documento. A entrada principal importa a folha de estilos global e renderiza elementos personalizados reais. As regras escopadas :not(:defined) impedem que as tags de componentes selecionadas pisquem antes do registro. A configuração documentada do Vite exclui a transformação LightDark do Lightning CSS porque esse polyfill é identificado como defeituoso. Manter essa exclusão é importante: compilar incorretamente a função de token pode quebrar o tema, mesmo quando a marcação do componente está correta. Os preloads recomendados podem ser adicionados depois por meio dos partials documentados de fontes, ícones e componentes. Consulte a especificação de apoio ## Exemplos de componentes do sistema de design sistema de design Porsche ### Exemplo interativo completo e independente Salve o documento completo como index.html e abra-o em um navegador. Interpretação original e offline das funções dos tokens e do comportamento das opções segmentadas de HTML/CSS v4. Não inclui runtime nativo do PDS, fontes remotas, imagens oficiais de modelos nem dados reais de veículos. ``` 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

``` Referência de código - As escolhas de acabamento e rodas atualizam uma ilustração original do configurador. Elas não são especificações de produtos Porsche; os eventos nativos do controle segmentado aparecem no exemplo v4 separado. ### Duas opções controladas com um resumo válido apenas durante a sessão Os elementos nativos p-segmented-control emitem eventos change com detail.value; p-button usa click e um type explícito. ``` 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(); ``` Referência de código - A alteração de qualquer uma das opções limpa a combinação salva anteriormente. - A propriedade color-scheme controla o tema do sistema; as amostras de acabamento continuam sendo dados originais do aplicativo. - O exemplo não coleta informações de contato, não reserva um veículo nem envia um pedido. ## Configuração do agente sistema de design Porsche ### Ponto de partida para implementação Configuração de Web Components nativos da versão 4 com a folha de estilos global documentada e o partial do loader. A prévia offline não usa fontes remotas nem runtime de pacote; a compilação do pacote nativo não foi verificada aqui. ``` # 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 ``` ### Um prompt para seu projeto ``` Crie uma composição do PDS v4 com estilos globais obrigatórios, o partial do loader, color-scheme, espaçamento fluido real e raios de 12px para controles e 24px para contêineres. Use change detail.value do controle segmentado para duas opções de exemplo originais e type=button explícito para ações locais. Não misture APIs de wrappers legados nem apresente o exemplo como uma configuração real de veículo. ``` ## Fontes e escopo de sistema de design Porsche Referência independente de OpenDesign, restrita ao PDS v4. As ilustrações e os nomes de acabamento originais não são especificações de veículos Porsche, códigos de pintura nem opções disponíveis. Nenhuma transação é realizada. - Migração para a versão 4 Alterações nos estilos globais e em color-scheme. - Configuração com Vanilla JS Loader, folha de estilos e configuração do Vite. - Tokens de espaçamento Expressões estáticas e fluidas. - Tokens de cor Funções pareadas e limites decorativos. - Tokens de fonte Porsche Next, tamanhos de fonte e altura da linha. - Tokens de borda Raios de controles e contêineres. - Tokens de breakpoint Limites responsivos reais. - Controle segmentado API Valores, eventos change e comportamento de formulário. - Botão API Tipos, variantes e estado pendente. ## Recursos relacionados de sistema de design Porsche ### Red Hat PatternFly Use PatternFly para criar um espaço de trabalho operacional: referências semânticas de tokens, cartões de serviço selecionáveis, seleção em massa com três estados, revisão do escopo e código nativo completo de React. ### REI Cedar Crie um seletor de atendimento de pedidos concreto com Cedar, blocos nativos do Vue, valores reais de tokens, navegação completa pelo teclado e uma composição responsiva de produtos. ### Sainsbury's sistema de design Aplique as diretrizes públicas de design da Sainsbury’s a um fluxo completo de escolha de horário: referências reais de paleta e tamanhos, opções de rádio acessíveis, resumo atualizado e feedback local transparente. - [Referência de implementação](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [Fonte](https://designsystem.porsche.com/v4/tokens/spacing/) - [Fonte](https://designsystem.porsche.com/v4/tokens/color/) - [Fonte](https://designsystem.porsche.com/v4/tokens/font/) - [Fonte](https://designsystem.porsche.com/v4/tokens/border/) - [Fonte](https://designsystem.porsche.com/v4/tokens/breakpoint/) - [Fonte](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [Consulte a especificação de apoio](https://designsystem.porsche.com/v4/news/migration-guide/porsche-design-system/) - [Consulte a especificação de apoio](https://designsystem.porsche.com/v4/tokens/color/) - [Consulte a especificação de apoio](https://designsystem.porsche.com/v4/tokens/spacing/) - [Consulte a especificação de apoio](https://designsystem.porsche.com/v4/tokens/font/) - [Consulte a especificação de apoio](https://designsystem.porsche.com/v4/tokens/border/) - [Consulte a especificação de apoio](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [Consulte a especificação de apoio](https://designsystem.porsche.com/v4/components/button/api/) - [Consulte a especificação de apoio](https://designsystem.porsche.com/v4/developing/vanilla-js/getting-started/) - [Referência de código](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [Migração para a versão 4 Alterações nos estilos globais e em color-scheme.](https://designsystem.porsche.com/v4/news/migration-guide/porsche-design-system/) - [Configuração com Vanilla JS Loader, folha de estilos e configuração do Vite.](https://designsystem.porsche.com/v4/developing/vanilla-js/getting-started/) - [Tokens de espaçamento Expressões estáticas e fluidas.](https://designsystem.porsche.com/v4/tokens/spacing/) - [Tokens de cor Funções pareadas e limites decorativos.](https://designsystem.porsche.com/v4/tokens/color/) - [Tokens de fonte Porsche Next, tamanhos de fonte e altura da linha.](https://designsystem.porsche.com/v4/tokens/font/) - [Tokens de borda Raios de controles e contêineres.](https://designsystem.porsche.com/v4/tokens/border/) - [Tokens de breakpoint Limites responsivos reais.](https://designsystem.porsche.com/v4/tokens/breakpoint/) - [Controle segmentado API Valores, eventos change e comportamento de formulário.](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [Botão API Tipos, variantes e estado pendente.](https://designsystem.porsche.com/v4/components/button/api/)