# Pega Bolt 设计系统 ## Pega Bolt 设计系统界面预览 试用单项展开的问题列表，并查看旁边的图文编辑摘要。 ## Pega Bolt 设计系统设计参考 公开的 Bolt Twig Pattern Lab 参考。rem 尺寸会随页面根字号变化，不应将所有 rem 值都视为固定的 16 px 倍数。预览布局和插图均为原创。 ### 品牌色彩角色 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --bolt-color-navy | #001f5f | 品牌主色区域。 | | --bolt-color-navy-dark | #081c45 | 更深的背景色。 | | --bolt-color-navy-xlight | #d7e2f2 | 浅淡的品牌界面表面。 | | --bolt-color-teal | #10a5ac | 插图强调色；不一定适用于正文文字。 | | --bolt-color-teal-xdark | #005154 | 较深的蓝绿色选项。 | | --bolt-color-orange | #f76923 | 暖色强调色。 | | --bolt-color-yellow | #ffc836 | 高亮强调色。 | ### 双轴间距 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --bolt-spacing-x-xsmall | 0.3875rem | 水平间距使用 x 轴刻度，垂直间距使用 y 轴刻度。 | | --bolt-spacing-x-small | 0.775rem | 水平间距使用 x 轴刻度，垂直间距使用 y 轴刻度。 | | --bolt-spacing-x-medium | 1.55rem | 水平间距使用 x 轴刻度，垂直间距使用 y 轴刻度。 | | --bolt-spacing-x-large | 3.1rem | 水平间距使用 x 轴刻度，垂直间距使用 y 轴刻度。 | | --bolt-spacing-y-xsmall | 0.3375rem | 水平间距使用 x 轴刻度，垂直间距使用 y 轴刻度。 | | --bolt-spacing-y-small | 0.675rem | 水平间距使用 x 轴刻度，垂直间距使用 y 轴刻度。 | | --bolt-spacing-y-medium | 1.35rem | 水平间距使用 x 轴刻度，垂直间距使用 y 轴刻度。 | | --bolt-spacing-y-large | 2.7rem | 水平间距使用 x 轴刻度，垂直间距使用 y 轴刻度。 | ### 字体基础 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --bolt-type-font-size-display | 3.75rem | 相对于流动根字号；语义标题标签应独立选择。 | | --bolt-type-font-size-xxlarge | 2.35rem | 相对于流动根字号；语义标题标签应独立选择。 | | --bolt-type-font-size-large | 1.4rem | 相对于流动根字号；语义标题标签应独立选择。 | | --bolt-type-font-size-regular | 1rem | 相对于流动根字号；语义标题标签应独立选择。 | | --bolt-type-font-size-small | 0.9rem | 相对于流动根字号；语义标题标签应独立选择。 | | Font family | Open Sans | 已发布基础规范中的正文字体和标题字体系列。 | | Weights | 300 / 400 / 600 / 700 / 800 | 从细体到特粗体；请加载对应的字体文件。 | ### 页面密度 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | Attribute | data-bolt-info-density | 仅设置在 html 元素上。 | | comfortable | Larger font and spacing | 便于阅读的密度。 | | regular | Default | 可省略此属性。 | | compact | Smaller font and spacing | 不要将其用作卡片局部修饰符。 | ### 手风琴组合 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | single | false by default | true 会限制手风琴中同时展开的项目数为一项。 | | spacing | medium | 模式列出 none、xsmall、small、medium、large。 | | icon_valign | center | top 会将图标与多行触发文本的顶部对齐。 | | no_separator | false | 保留分隔线，以清晰区分各个问题。 | | box_shadow | false | 可选的外层阴影。 | | item.open | false | 展开初始项目。 | | item.inactive | false | 已折叠且不显示切换图标的项目。 | | item.trigger | Content | 撰写有意义的问题，替换默认标签。 | ## Pega Bolt 设计系统完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## Pega Bolt 设计系统：选择 Bolt 实现方案 ### Twig 与 React 具有不同的规范 > 本指南聚焦于公开的 Bolt Twig / Pattern Lab 实现。当前 Bolt 主页也提供面向应用和门户的 BoltDS React；两种实现拥有各自独立的文档和版本管理。此预览是独立的 HTML 解读，并非 Bolt 运行时。 此示例是一个工作坊资源，包含可见摘要和可选问题。它适合以内容为核心的 Twig 实现：优先呈现编辑层级，并通过手风琴按需展示补充材料。基于 BoltDS React 构建的应用应参考其专属文档，而不要照搬 Twig 命名空间路径。 阅读配套规范 ## Pega Bolt 设计系统：以海军蓝为主，仅使用少量明亮强调色 ### 品牌化的阅读界面 已发布的调色板包含海军蓝 #001f5f、蓝绿色 #10a5ac 和橙色 #f76923。示例使用海军蓝作为醒目的编辑标题色，并以蓝绿色和橙色作为插图强调色。这些色相是基础规范中的取值，并不意味着任意组合都适用于小号文字。 资源信息置于白色和浅海军蓝界面表面上。装饰性的分支图描绘了一个关于简化服务流程的工作坊；它是原创插图，不是 Pega 标志或官方图表。 阅读配套规范 ## Pega Bolt 设计系统：流体排版与易读的行长 ### rem 值并非固定的像素承诺 Bolt 提供 regular（1rem）、large（1.4rem）、xxlarge（2.35rem）和 display（3.75rem）字号。根字号会随视口和显示密度变化，因此若以固定的 16 px 为基准换算整张表，就会失去预期的行为。 基础规范为正文和标题指定了 Open Sans。由于未打包字体文件，自包含预览使用本地系统字体作为后备。预览保留了清晰的标题、紧凑的眉题和舒适的段落排版，但不宣称与原字体在像素层面完全一致。 阅读配套规范 ## Pega Bolt 设计系统：水平与垂直节奏各不相同 ### 避免用通用的八点间距体系替代 中等水平间距为 1.55rem，中等垂直间距为 1.35rem。大间距也有相同区别，分别为 3.1rem 和 2.7rem。相邻对象之间使用 x 间距尺度，堆叠区块之间使用 y 间距尺度。 在宽屏上，预览将简介和问题列表分为两列；屏幕宽度达到本地 700 px 断点后，两者改为上下排列。该断点是应用的设置，并非 Bolt 令牌。较长的问题标签会在图标旁换行，文字不会缩小。 阅读配套规范 ## Pega Bolt 设计系统：使用 Twig 构建问题列表 ### 条目通过模板捕获内容，而非作为数据属性传入 每次调用 accordion-item.twig 时，都会提供触发器和内容。Twig set 区块会捕获渲染后的条目；父级通过 content 接收这些标记。上方的完整示例会展开第一个问题，并使用 single: true。 spacing 控制条目的内边距，icon_valign 控制图标的垂直对齐。若问题之间需要清晰的分界，请保留分隔线。inactive 标志并非禁用的表单控件：它会折叠内容并隐藏图标。 - 请将日期、先决条件和可参加时间放在折叠答案之外。 - 使用触发器提出一个具体问题。 - 避免在答案中再嵌套一个手风琴。 阅读配套规范 ## Pega Bolt 设计系统 展开内容，同时保持阅读位置 ### 一次展开一个答案 HTML 方案使用原生按钮、aria-expanded、aria-controls 和隐藏的答案面板。点击已关闭的问题会将其展开，并关闭之前展开的答案；点击已展开的问题则会将其折叠。焦点会保留在触发按钮上。 这与所选的单项展开行为一致，同时不依赖 Bolt JavaScript。预览没有实现 Bolt 深层链接，也不声称运行了原生组件运行时。在原生 Bolt 中，启用单项模式时，深层链接指定的条目优先于初始展开的条目。 阅读配套规范 ## Pega Bolt 设计系统：密度设置适用于整个页面 ### 根级设置，而非组件属性 Bolt 通过 html 元素上的 data-bolt-info-density 识别 comfortable、regular 和 compact。默认值为 regular。comfortable 会增大字号和间距；compact 则会减小两者。 不要将根级属性应用到手风琴上，并期待它能按受支持的方式更改单个组件的密度。对于本阅读页面，预览采用固定且舒适的编辑式布局，而不假装能够复现原生密度引擎。 阅读配套规范 ## Pega Bolt 设计系统 在实际环境中集成原生组件 ### 使用文档指定的环境 安装命令适用于能够解析组件命名空间并编译所需资源的 Bolt Twig 应用。公开仓库通过 yarn setup 和 yarn start 提供完整的开发环境。这是参考开发环境，并非两行命令即可完成的生产部署。 1. 服务器渲染的内容实现请选择 Twig，并在应用中确认其版本。 2. 安装手风琴包，通过 Bolt 应用配置注册现有的 Twig 命名空间，并引入已编译的项目资源。 3. 渲染完整的问题示例，然后在实际项目中验证单项展开、触发器换行和键盘操作。 阅读配套规范 ## Pega Bolt 设计系统 组件示例 ### 完整的独立交互示例 将完整文档保存为 index.html 并在浏览器中打开。这是对 Bolt Twig 基础规范和单项手风琴行为的独立 HTML/CSS 解读。使用系统字体作为后备；不包含 Bolt 运行时。 ``` Service journey workshop
Field notes · Live workshop

Make your service journey simpler.

A practical session for turning a complex request into a clear next step.

Useful to know

Bring a laptop and one workflow you want to simplify. A short description of the request and its current outcome is enough.

``` 代码参考 - 单项展开的问题列表不支持 Bolt 深层链接。Twig 示例是原生集成方式；重要的工作坊信息应放在折叠答案之外。 ### 工作坊问题列表，一次展开一个答案 使用条目模板渲染每个问题，捕获生成的标记，再将其传给父级手风琴。 ``` {% set questions %} {% include '@bolt-components-accordion/accordion-item.twig' with { trigger: 'What should I bring?', content: '

Bring a laptop and one workflow you want to simplify.

', open: true } only %} {% include '@bolt-components-accordion/accordion-item.twig' with { trigger: 'Will there be a recording?', content: '

This workshop is live only. The written exercise is included.

' } only %} {% include '@bolt-components-accordion/accordion-item.twig' with { trigger: 'Who is this session for?', content: '

Content teams and developers working on service journeys.

' } only %} {% endset %} {% include '@bolt-components-accordion/accordion.twig' with { content: questions, single: true, spacing: 'medium', icon_valign: 'top' } only %} ``` 代码参考 - 请在已配置的 Bolt Twig 应用中使用。官方组件不提供纯 HTML 用法入口。 - single 限制同时展开的条目数量。深层链接优先于初始展开的条目。 - 架构中列出的最大间距选项是 large，尽管文档示例使用了 xlarge；本示例遵循架构规定。 ## Pega Bolt 设计系统：Agent 设置 ### 实现起点 此包命令用于添加组件，而非独立网站。请使用项目中已注册的 @bolt-components-accordion Twig 命名空间及其编译后的 Bolt 资源。仓库开发环境与应用集成是两种不同路径；两者都不是当前的 BoltDS React API。 ``` # In an existing Bolt Twig application with its asset pipeline configured: npm install @bolt/components-accordion # To inspect the complete official development environment instead: git clone https://github.com/boltdesignsystem/bolt.git cd bolt yarn setup yarn start ``` ### 适用于你项目的提示词 ``` 创建一个 Bolt Twig 工作坊资源页面，使用已核实的藏青色／青绿色配色、流体字号层级以及彼此独立的 x/y 间距尺度。重要信息保持可见。将 accordion-item.twig 组合到 accordion.twig 中，并设置 single true 和 medium 间距。不要将 Twig 路径当作 React API。 ``` ## Pega Bolt 设计系统：来源与范围 本指南聚焦于公开的 Bolt Twig / Pattern Lab 实现。当前 Bolt 主页也提供面向应用和门户的 BoltDS React；两种实现拥有各自独立的文档和版本管理。此预览是独立的 HTML 解读，并非 Bolt 运行时。 - Bolt 实现 React 和 Twig 入口。 - 品牌颜色令牌 Pega 配色和 CSS 变量。 - 间距 彼此独立的 x 和 y 尺度。 - 排版 流体 rem 尺寸和字体系列。 - 信息密度 页面级密度设置。 - 手风琴架构 Twig 属性、条目模板和交互限制。 ## Pega Bolt 设计系统：相关资源 ### Porsche 设计系统 通过流动式间距、CSS 配色方案、Porsche Next 字体和双选项配置器，探索 Porsche Design System v4。参考内容包含真实的令牌表达式，以及完整的 Vite 入口文件，并采用当前的分段控件事件。 ### Red Hat PatternFly 使用 PatternFly 构建运维工作区：引用语义令牌、可选择的服务卡片、三态批量选择、范围审核，以及完整的原生 React 代码。 ### REI Cedar 构建一个具体的 Cedar 履约方式选择器，采用原生 Vue 磁贴、真实令牌值、完整的键盘导航和响应式产品布局。 - [实现参考](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [来源](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html) - [来源](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html) - [来源](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html) - [来源](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html) - [来源](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [阅读配套规范](https://boltdesignsystem.com/) - [阅读配套规范](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html) - [阅读配套规范](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html) - [阅读配套规范](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html) - [阅读配套规范](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [阅读配套规范](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html) - [代码参考](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Bolt 实现 React 和 Twig 入口。](https://boltdesignsystem.com/) - [品牌颜色令牌 Pega 配色和 CSS 变量。](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html) - [间距 彼此独立的 x 和 y 尺度。](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html) - [排版 流体 rem 尺寸和字体系列。](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html) - [信息密度 页面级密度设置。](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html) - [手风琴架构 Twig 属性、条目模板和交互限制。](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)