# Porsche 设计系统 ## Porsche 设计系统 界面预览 选择饰面和轮毂样式，查看会话摘要，并切换界面的明暗模式。 ## Porsche 设计系统参考 Porsche Design System v4 文档；令牌页面显示 v4.8.0。这是限定版本范围的参考，不代表最新版本。原创饰面色样属于应用数据，并非保时捷官方车漆代码。 ### 静态间距 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | spacingStatic2Xs | 1px | 固定间距令牌。 | | spacingStaticXs | 4px | 固定间距令牌。 | | spacingStaticSm | 8px | 固定间距令牌。 | | spacingStaticMd | 16px | 固定间距令牌。 | | spacingStaticLg | 32px | 固定间距令牌。 | | spacingStaticXl | 48px | 固定间距令牌。 | | spacingStatic2Xl | 80px | 固定间距令牌。 | ### 流动间距 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | spacingFluidXs | clamp(4px, 0.25vw + 3px, 8px) | 较小的自适应间隔。 | | spacingFluidSm | clamp(8px, 0.5vw + 6px, 16px) | 紧凑型自适应间隔。 | | spacingFluidMd | clamp(16px, 1.25vw + 12px, 36px) | 页面内边距示例。 | | spacingFluidLg | clamp(32px, 2.75vw + 23px, 76px) | 区块间距。 | | spacingFluidXl | clamp(48px, 3vw + 38px, 96px) | 大间距。 | | spacingFluid2Xl | clamp(80px, 7.5vw + 56px, 200px) | 用于主要布局的间距。 | ### 颜色角色 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | colorCanvas | light-dark(#fff,hsl(225 66.7% 1.2%)) | 页面画布。 | | colorSurface | light-dark(hsl(240 10% 95%),hsl(240 2% 10%)) | 次级界面表面。 | | colorPrimary | light-dark(hsl(225 66.7% 1.2%),hsl(225 100% 99%)) | 主文本。 | | colorFocus | light-dark(#1A44EA,#1A44EA) | 键盘焦点。 | | colorContrastLow / colorContrastLower | Decorative only | 不符合无障碍要求的文本角色。 | ### 字体表达式 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | fontPorscheNext | 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif | 官方字体系列及回退字体。 | | typescale2Xs | .75rem | 列出的最小字号。 | | typescaleXs | .875rem | 小号元数据。 | | typescaleSm | 1rem | 正文基准字号。 | | typescaleMd | clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem) | 流动字号。 | | typescale2Xl | clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem) | 流动大标题。 | | leadingNormal | calc(6px + 2.125ex) | 行高随字体而异。 | | fontWeightNormal / Semibold / Bold | 400 / 600 / 700 | 可用字重。 | ### 形状 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | radiusXs / Sm / Md | 2px / 4px / 6px | 小尺寸形状。 | | radiusLg | 8px | 紧凑型交互控件。 | | radiusXl | 12px | 标准交互控件。 | | radius2Xl | 16px | 通知。 | | radius3Xl | 24px | 卡片和类似对话框的容器。 | | radius4Xl | 32px | 最大的固定圆角。 | | radiusFull | calc(infinity * 1px) | 独立的胶囊形指示器。 | ### 断点 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | breakpointXs | 480 | 与 px 配合使用的数值令牌。 | | breakpointSm | 760 | 与 px 配合使用的数值令牌。 | | breakpointMd | 1000 | 与 px 配合使用的数值令牌。 | | breakpointLg | 1300 | 与 px 配合使用的数值令牌。 | | breakpointXl | 1760 | 与 px 配合使用的数值令牌。 | | breakpoint2Xl | 1920 | 与 px 配合使用的数值令牌。 | ### 分段选项约定 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | value | string \| number | 选中项的值。 | | change event | detail: { value: string \| number } | 更新应用状态。 | | columns | auto or 1–25; responsive values supported | 控制项目网格。 | | noWrap | false by default | 设为 true 时，显示可滚动的单行内容。 | | state | none / error / success | 验证样式。 | | disabled | Excludes value from form submission | 不同于普通的未选中项。 | ## Porsche 设计系统 完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## Porsche 设计系统 完整使用 v4 基础体系 ### 现在必须使用全局变量 > v4 基于全局 CSS 变量构建组件样式。因此，导入全局样式表是架构上的必要要求，而非装饰性重置。同一次导入还包含规范化样式和 Porsche Next 的 @font-face 定义。 本参考将 v4 组件与令牌约定整合在一起。旧示例中使用的文本字段包装器或按组件设置主题的属性，不应在未参考迁移指南的情况下直接沿用。文档本身有版本，因此本页面会明确标出适用范围，而不会声称内容永不过时：API。 阅读配套规范 ## Porsche 设计系统 配色方案会选择完整的角色配对 ### 将界面角色与饰面样本分开 画布、界面表面和主要前景色令牌包含 light-dark() 配对。CSS color-scheme 属性用于选择对应分支。根据应用是固定模式还是遵循用户偏好，设置为 light、dark 或 light dark。 本示例中的饰面颜色是彼此独立的原创色样。切换界面暗色模式只会改变周围的背景层和文本，不会改变所选饰面。对比度较低的颜色角色仅用于装饰；若将其用于重要选项标签，就超出了令牌的预期用途。 阅读配套规范 ## Porsche 设计系统 流动节奏与固定控件间距可以并存 ### 在空间应随尺寸增长时使用 clamp 表达式 保时捷提供静态和流动两种间距比例。原生条目使用中号流动表达式作为页面内边距，而选项区域内则使用 16px 和 32px 的固定间距，保持稳定的布局关系。流动间距设有最大值，避免宽屏上出现无止境扩大的留白。 示例在宽屏上采用视觉内容与控件并列的布局，宽度低于 760px 时则改为分区堆叠；760px 是文档列出的断点值之一。是否改为堆叠属于应用布局决策；断点值本身则是设计系统参考。 阅读配套规范 ## Porsche 设计系统 字体排版依赖所提供的字体 ### 行高表达式不是通用比例 Porsche Next 有文档规定的回退字体栈，以及由固定小字号和流动大字号组成的字体比例。leadingNormal 使用 ex 单位，随字体的 x 高度变化，并加上固定的像素值。若将其替换成任意的 1.5 比例，就会改变预期的排版节奏。 离线演绎使用本地回退字体和易读的行高，不会假装已打包授权字体。原生条目中的全局样式表会定义实际字体。v4 设计语言中的标题使用常规字重；建立层级不需要加粗大字号。 阅读配套规范 ## Porsche 设计系统 控件和容器使用不同的圆角 ### 12 像素和 24 像素构成主要层级 标准交互圆角为 12px；卡片和对话框系列使用 24px。紧凑型控件改用 8px，通知则使用 16px。若所有元素都采用最大圆角，这些层级关系就会消失。 原创预览将车辆设计置于宽大的 24px 界面表面上，并使用 12px 控件。车辆轮廓是原创的 CSS 插画，并非保时捷车型渲染图或产品照片。同样的布局也可用于材质选择器，但不应因此暗示用户可以实际配置车辆。 阅读配套规范 ## Porsche 设计系统 分段控件用于选项选择，不是标签栏 ### 使用稳定的值，并由单一状态源管理 每个 p-segmented-control-item 都会提供一个值。变更事件会在 event.detail 中返回该值，示例会先将其存入状态，再重新绘制摘要。分组控件会显示可见标签，以便区分饰面选项和轮毂选项。 v4 API 支持自适应列数，也可选择启用不换行的滚动容器。简短选项可以同时显示；较长的本地化标签应换行，或使用有意设计的滚动容器，而不是将内容截断。禁用的控件不会包含在表单数据中；将此示例扩展为真实表单时，这一点尤为重要。 1. 在应用状态中一次性初始化 finish 和 wheel 的值。 2. 从分组的 change 事件中读取 detail.value。 3. 同时更新可见的方案和文字选项。 4. 编辑后清除之前保留的摘要。 阅读配套规范 ## Porsche 设计系统 本地选择不等于已完成的交易 ### 明确指定按钮类型 p-button 默认类型为 submit。示例将 type="button" 设为按钮类型，因为保留组合和切换配色方案都属于本地交互。导航应使用 Link 组件，而不是使用按钮并虚构目标地址。 主要操作会准确说明实际发生的事情：本次页面会话中保留了一组组合。它不会声称数据在重新加载后仍然保留、已存入账户或已下单。这种有限的行为是刻意设计的，对于界面示例来说也已足够完整。 - 主要操作会保留当前本地组合。 - 次要操作会切换界面的配色方案。 - 两个操作都保留可见标签。 - 没有待处理操作时，不显示加载动画。 阅读配套规范 ## Porsche 设计系统 加载组件并保护其首次渲染 ### 加载器、样式表和编译器协同工作 Vite 配置会将官方加载器片段注入文档的 body。主入口会导入全局样式表并渲染真正的自定义元素。作用域内的 :not(:defined) 规则可防止所选组件标签在注册前闪现。 文档所述的 Vite 设置会排除 Lightning CSS 的 LightDark 转换，因为该 polyfill 被标记为存在缺陷。保留此排除项很重要：错误地编译掉令牌函数可能会破坏主题，即使组件标记本身正确无误。之后可通过文档所述的字体、图标和组件片段添加建议的预加载项。 阅读配套规范 ## Porsche 设计系统组件示例 ### 完整的独立交互示例 将完整文档保存为 index.html 并在浏览器中打开。这是对 v4 令牌角色和分段选项行为的原创离线 HTML/CSS 解读。不包含原生 PDS 运行时、远程字体、官方车型图片或真实车辆数据。 ``` 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

``` 代码参考 - 车漆和轮毂选项会更新原创的配置器插画。它们不是保时捷产品规格；原生分段控件事件见另一个 v4 示例。 ### 两个受控选项与仅在会话内保留的摘要 原生 p-segmented-control 元素会发出包含 detail.value 的 change 事件；p-button 使用 click 事件，并显式指定 type。 ``` 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(); ``` 代码参考 - 更改任一选项都会清除之前保留的组合。 - color-scheme 属性控制系统主题；车漆色样属于原创应用数据。 - 此示例不会收集联系信息、预订车辆或提交订单。 ## Porsche 设计系统 Agent 设置 ### 实现起点 采用文档所述的全局样式表和加载器片段，设置 v4 原生 Web Component。离线预览不含远程字体或包运行时；此处未验证原生包编译。 ``` # 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 ``` ### 适用于你项目的提示词 ``` 构建 v4 PDS 组合，使用必需的全局样式、加载器片段、color-scheme、实际流式间距，以及 12px 控件圆角和 24px 容器圆角。为两个原创示例选项使用 segmented-control 的 change detail.value，并为本地操作显式设置 type=button。不要混用旧版包装器 API，也不要将示例描述为真实车辆配置。 ``` ## Porsche 设计系统 来源与范围 独立的 OpenDesign 参考示例，范围限定为 PDS v4。原创插画和车漆名称并非保时捷车辆规格、漆面代码或可选配置。此示例不会执行任何交易。 - v4 迁移 全局样式与 color-scheme 更改。 - 原生 JavaScript 设置 加载器、样式表和 Vite 配置。 - 间距令牌 静态与流式表达式。 - 颜色令牌 配对角色与装饰性限制。 - 字体令牌 Porsche Next、字号和行高。 - 边框令牌 控件和容器圆角。 - 断点令牌 实际响应式阈值。 - 分段控件 API 选项值、change 事件和表单行为。 - 按钮 API 类型、变体和待处理状态。 ## Porsche 设计系统 相关资源 ### Red Hat PatternFly 使用 PatternFly 构建运维工作区：引用语义令牌、可选择的服务卡片、三态批量选择、范围审核，以及完整的原生 React 代码。 ### REI Cedar 构建一个具体的 Cedar 履约方式选择器，采用原生 Vue 磁贴、真实令牌值、完整的键盘导航和响应式产品布局。 ### Sainsbury's 设计系统 将 Sainsbury’s 的公开设计指南应用于完整的配送时段选择流程：使用真实的配色和尺寸参考、无障碍单选项、动态更新的摘要，以及如实说明的本地操作反馈。 - [实现参考](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [来源](https://designsystem.porsche.com/v4/tokens/spacing/) - [来源](https://designsystem.porsche.com/v4/tokens/color/) - [来源](https://designsystem.porsche.com/v4/tokens/font/) - [来源](https://designsystem.porsche.com/v4/tokens/border/) - [来源](https://designsystem.porsche.com/v4/tokens/breakpoint/) - [来源](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [阅读配套规范](https://designsystem.porsche.com/v4/news/migration-guide/porsche-design-system/) - [阅读配套规范](https://designsystem.porsche.com/v4/tokens/color/) - [阅读配套规范](https://designsystem.porsche.com/v4/tokens/spacing/) - [阅读配套规范](https://designsystem.porsche.com/v4/tokens/font/) - [阅读配套规范](https://designsystem.porsche.com/v4/tokens/border/) - [阅读配套规范](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [阅读配套规范](https://designsystem.porsche.com/v4/components/button/api/) - [阅读配套规范](https://designsystem.porsche.com/v4/developing/vanilla-js/getting-started/) - [代码参考](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [v4 迁移 全局样式与 color-scheme 更改。](https://designsystem.porsche.com/v4/news/migration-guide/porsche-design-system/) - [原生 JavaScript 设置 加载器、样式表和 Vite 配置。](https://designsystem.porsche.com/v4/developing/vanilla-js/getting-started/) - [间距令牌 静态与流式表达式。](https://designsystem.porsche.com/v4/tokens/spacing/) - [颜色令牌 配对角色与装饰性限制。](https://designsystem.porsche.com/v4/tokens/color/) - [字体令牌 Porsche Next、字号和行高。](https://designsystem.porsche.com/v4/tokens/font/) - [边框令牌 控件和容器圆角。](https://designsystem.porsche.com/v4/tokens/border/) - [断点令牌 实际响应式阈值。](https://designsystem.porsche.com/v4/tokens/breakpoint/) - [分段控件 API 选项值、change 事件和表单行为。](https://designsystem.porsche.com/v4/components/segmented-control/api/) - [按钮 API 类型、变体和待处理状态。](https://designsystem.porsche.com/v4/components/button/api/)