# Visa Product 设计系统 ## Visa Product 设计系统 界面预览 选择格式和频率，查看本地偏好设置并重置。 ## Visa Product 设计系统 设计参考 已发布的 @visa/nova-styles 1.6.5 样式、Visa 主题和示例元数据。默认/浅色值与备用和深色覆盖值分别列出。预览在本地嵌入官方 CSS，移除远程 font-face 规则，并使用系统字体作为回退。 ### 默认配色 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --palette-default-active | #1434cb | Visa 1.6.5 默认/浅色主题参考。 | | --palette-default-active-hover | #173be8 | Visa 1.6.5 默认/浅色主题参考。 | | --palette-default-active-pressed | #0f2595 | Visa 1.6.5 默认/浅色主题参考。 | | --palette-default-active-accent | #fcc015 | Visa 1.6.5 默认/浅色主题参考。 | | --palette-default-surface-1 | #ffffff | Visa 1.6.5 默认/浅色主题参考。 | | --palette-default-surface-2 | #f5f5f5 | Visa 1.6.5 默认/浅色主题参考。 | | --palette-default-surface-3 | #f0f0f0 | Visa 1.6.5 默认/浅色主题参考。 | | --palette-default-text | #000000 | Visa 1.6.5 默认/浅色主题参考。 | | --palette-default-text-subtle | #4a4a4a | Visa 1.6.5 默认/浅色主题参考。 | | --palette-default-text-on-active | #ffffff | Visa 1.6.5 默认/浅色主题参考。 | | --palette-default-border | rgba(0, 0, 0, 0.1) | Visa 1.6.5 默认/浅色主题参考。 | ### 主题尺寸与排版 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --theme-font-size | 14px | Visa 1.6.5 默认/浅色主题参考。 | | --theme-border-radius | 6px | Visa 1.6.5 默认/浅色主题参考。 | | --typography-headline-1-font-size | 2.2857142857rem | Visa 1.6.5 默认/浅色主题参考。 | | --typography-headline-2-font-size | 1.7857142857rem | Visa 1.6.5 默认/浅色主题参考。 | | --typography-headline-3-font-size | 1.4285714286rem | Visa 1.6.5 默认/浅色主题参考。 | | --typography-body-1-font-size | 1.1428571429rem | Visa 1.6.5 默认/浅色主题参考。 | | --typography-body-2-font-size | 1rem | Visa 1.6.5 默认/浅色主题参考。 | | --typography-body-3-font-size | 0.8571428571rem | Visa 1.6.5 默认/浅色主题参考。 | ### 可缩放尺寸 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --size-scalable-4 | calc(4px * var(--theme-scale-factor)) | 基础可缩放尺寸；响应式上下文可能会额外应用缩放系数。 | | --size-scalable-8 | calc(8px * var(--theme-scale-factor)) | 基础可缩放尺寸；响应式上下文可能会额外应用缩放系数。 | | --size-scalable-12 | calc(12px * var(--theme-scale-factor)) | 基础可缩放尺寸；响应式上下文可能会额外应用缩放系数。 | | --size-scalable-16 | calc(16px * var(--theme-scale-factor)) | 基础可缩放尺寸；响应式上下文可能会额外应用缩放系数。 | | --size-scalable-24 | calc(24px * var(--theme-scale-factor)) | 基础可缩放尺寸；响应式上下文可能会额外应用缩放系数。 | | --size-scalable-32 | calc(32px * var(--theme-scale-factor)) | 基础可缩放尺寸；响应式上下文可能会额外应用缩放系数。 | | --size-scalable-40 | calc(40px * var(--theme-scale-factor)) | 基础可缩放尺寸；响应式上下文可能会额外应用缩放系数。 | ### 已发布的实用工具类和组件类 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | v-flex | Flex layout | 间距示例需要父级元素。 | | v-gap-20 | Gap utility | 在官方默认间距示例中展示。 | | v-col-gap-20 | Column gap utility | 分隔列。 | | v-button | Primary button | 使用原生 button 元素。 | | v-button-secondary | Secondary modifier | 示例中的辅助重置操作。 | | v-radio | Native radio style | 保留相同的名称和不同的值。 | | v-label | Label style | 保留关联标签或包裹式标签。 | | v-alternate | Alternate palette context | 显示在界面表面或按钮上。 | | v-typography-headline-1 | Headline visual role | 应用于本页面语义上的 h1。 | ### 组合约定 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | Radio group | One shared name per question | 格式和频率是相互独立的选项组。 | | fieldset / legend | Group question | 说明这些选项分别对应什么问题。 | | checked | Native selected state | 不要仅使用 CSS 来表示选中状态。 | | disabled | Native unavailable state | 如果无法使用，请保留可见说明。 | | aria-describedby | Optional supporting description | 如果附加文本不属于标签，请将其关联起来。 | ## Visa Product 设计系统完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## Visa Product 设计系统 包含易读确认状态的偏好设置任务 ### 让每个问题彼此独立 > 示例要求用户选择账单格式和摘要频率。这是两个独立的单选组：更改频率不会取消已选的格式。主要操作前会重复显示这两项选择，方便用户查看结果，无需解读图标或猜测隐藏的默认值。 确认偏好设置仅记录本地确认状态。此页面不会请求卡号、检索账户、生成账单或更改金融服务设置。这样，示例便能专注展示设计系统的选择与反馈行为。 阅读配套规范 ## Visa Product 设计系统 Nova 样式与 Visa 主题需分别导入 ### 结构并不等同于完整主题 官方安装说明要求先导入 styles.css，再导入 themes/visa/index.css。前者提供组件和实用工具规则，后者提供 Visa 主题。只加载其中一个并非完整集成。独立示例和导入代码片段均保留了这一顺序。 已检查的程序包版本为 1.6.5。示例在本地嵌入其 CSS，因此查看时无需向第三方请求样式表。已移除远程 font-face 声明，应用明确使用系统字体作为回退；这是采用本地字体替代方案并明确说明的原生 Nova CSS，并不表示与专有字体完全一致。 阅读配套规范 ## Visa Product 设计系统 默认配色与备用配色均配有对应的前景色 ### 不要在移植填充色时遗漏对应的文本角色 默认/浅色主题中的活动色为 #1434cb，悬停时为 #173be8，按下时为 #0f2595。活动色上的文本角色为白色。备用主题上下文会改变角色映射，因此示例在页眉界面表面使用 v-alternate，而不是只覆盖背景色。 强调色 #fcc015 并非通用按钮填充色。主题上下文决定如何使用强调色和活动色角色。参考表描述的是默认配色；同一款式表中后续定义的深色和备用主题不会被合并成一组容易引起误解的数值。 阅读配套规范 ## Visa Product 设计系统 根据主题根字号理解 rem 比例 ### 14 像素的主题根字号会改变常见的 rem 换算预期 Visa 主题定义了 14 像素的字体根字号。因此，headline-1 的值约为 2.285714rem，按该根字号计算对应 32 像素，而不是假设根字号为 16 像素时得出的值。body-1 约为 1.142857rem，body-2 为 1rem。 可缩放尺寸令牌表示一个像素数值乘以主题缩放因子的结果。在响应式场景中，还可能引入第二个因子。在应用中调整间距时，应保留这一表达式；只复制默认计算值会丢失这种关联。示例在频率选项控件中使用官方间距工具类，整体分栏布局则采用原应用的尺寸。 阅读配套规范 ## Visa Product 设计系统：Nova 外观下的原生单选按钮语义 ### 样式化圆形控件不等于单选按钮组 公开元数据将 v-radio 应用于真正的 input type="radio"，并与 label 配对。预览保留了这一原生结构，并将每个选项的可见说明包裹在对应的 label 中。键盘方向键可在组内移动，浏览器和辅助技术也能识别选中状态。 每个问题都用 fieldset 和 legend 命名。格式选项说明了各自的特点：PDF 是可下载的样例，而 HTML 被描述为可重排格式。具体产品内容为原创；控件结构和类名则来自原生库。 - 为两个格式选项使用同一个 name，为频率选项使用另一个 name。 - 让单选按钮的 value 与可见说明文字保持区分，这样摘要就能使用稳定的标签。 - 使用 checked 和 disabled 属性表示状态，不要只依赖装饰性类名。 阅读配套规范 ## Visa Product 设计系统 Nova CSS 为控件添加样式；原生 HTML 负责选择 ### 将分组和审核逻辑放在样式表之外 示例在真正的单选按钮输入上使用 Nova 的 v-radio 类。共享 name 属性可确保格式选项互斥，另一个 name 则将频率选项分开。fieldset 和 legend 提供分组上下文；关联的 label 则使完整的选项文字成为控件的无障碍名称。 CSS 软件包不会替用户选择选项、管理应用持久化，也不会创建审核记录。提供的脚本会读取两个原生选项组并生成本地摘要。编辑任一选项时，摘要会清除，因为之前的值已无法代表当前偏好。 实现时应同时保留结构样式表和 Visa 主题。备用页眉使用 v-alternate，表单则保持在默认配色上下文中；不要只修改背景、却不处理前景角色，以此模仿页眉。 阅读配套规范 ## Visa Product 设计系统 在所有屏幕宽度下保持一致的阅读顺序 ### 移动摘要位置，不改变任务顺序 在宽屏上，选项组和当前选择摘要并排显示。在小屏上，摘要位于表单之后。原有文档插图因不提供任务信息而隐藏，所有标签、说明和操作仍会保留。 CSS 库支持现代主流浏览器。官方开发指南并未承诺兼容旧版浏览器，因此生产团队应针对实际支持的版本进行测试，而不能把现代浏览器中的预览成功视为普遍兼容。 1. 加载固定版本的结构样式 CSS 和 Visa 主题，然后添加应用布局样式。 2. 选择 Accessible HTML 和 Quarterly，检查偏好设置，并确认两项选择都显示在摘要中。 3. 更改任一选项，确认审核反馈会重置，然后测试 Reset 和窄屏布局。 阅读配套规范 ## Visa Product 设计系统组件示例 ### 完整的 Nova CSS 偏好设置组合 两个原生单选按钮组会即时更新摘要；主要操作会明确创建本地审核状态。 ``` Statement preference

ACCOUNT PREFERENCES / SAMPLE

Choose how you read
your statement.

One clear choice, with the details visible before you confirm.

Statement format

This page stores a demonstration preference only.

Summary frequency
``` 代码参考 - CSS 提供组件外观；简短脚本负责应用行为。 - 更改偏好设置会清除之前的审核状态。 - 备用页眉使用真正的主题上下文，而不是手工绘制的配色仿制品。 - 将完整的 HTML 保存为 index.html，并在能够访问固定版本公共 CSS URL 的浏览器中打开。本指南中的嵌入式预览会在本地加载这些样式。 ### 同时加载结构样式和主题 在打包应用中，应在应用样式表之前一次性导入这两个层。 ``` import '@visa/nova-styles/styles.css'; import '@visa/nova-styles/themes/visa/index.css'; import './application.css'; ``` 代码参考 - 缺少主题文件时，结构类可能仍然存在，但不会应用预期的 Visa 令牌。 ## Visa Product 设计系统 AI Agent 设置 ### 实现起点 完整的 HTML 使用已验证的 styles.css 和 themes/visa/index.css 路径。两者缺一不可。此指南中的 iframe 在本地嵌入了这些样式；官方远程 font-face 声明未包含在其中。 ``` npm create vite@latest statement-preference -- --template vanilla cd statement-preference npm install npm install @visa/nova-styles@1.6.5 # Replace index.html with the complete example below. npm run dev ``` ### 适用于你项目的提示词 ``` 使用固定的结构和主题CSS，构建 Visa Nova 对账单偏好示例。保留原生单选按钮组、清晰的图例和关联标签。区分默认主题与备用主题的角色，并在换算 rem 值时留意 14px 的根字号。将审核状态保留在本地，更改后清除过期的确认信息，并在小屏幕上将摘要纵向排列。 ``` ## Visa Product 设计系统 来源与范围 独立的OpenDesign指南，使用原生 Nova CSS。此虚构的偏好设置任务不会使用账户数据，也不会更改任何金融服务。预览页面会说明字体替代情况。 - Nova 代码库 官方安装与主题加载说明。 - Styles 1.6.5 原生组件规则与可缩放尺寸。 - Visa 主题 1.6.5 准确的主题配色与字体排版。 - 示例元数据 已验证的HTML类结构。 - CSS 入门 公开的集成指南。 - 浏览器支持 对现代浏览器的支持范围。 ## Visa Product 设计系统 相关资源 ### Volvo Cars Web 设计系统 通过完整的行李规划示例，检查 Volvo Cars 以 HTML 为先的 Web 基础、实际的浅色模式令牌和原生可选卡片样式；支持独立选择、主题切换和重置。 ### Wonderflow Wanda 在完整的反馈阅读工作区中使用 Wanda 的真实主题角色和令牌语法，支持主题筛选、展开查看证据背景，以及持久保存到本地的笔记本。 ### Workday Canvas 使用 Canvas Kit 的复合 FormField、受控 TextInput 和 PrimaryButton，制定本地学习计划；同时区分当前语义令牌来源与旧版 space.x4 迁移示例。 - [实现参考](https://github.com/visa/nova-styles) - [来源](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css) - [来源](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css) - [来源](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [来源](https://design.visa.com/components/radio/) - [阅读配套规范](https://design.visa.com/components/radio/) - [阅读配套规范](https://github.com/visa/nova-styles) - [阅读配套规范](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css) - [阅读配套规范](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css) - [阅读配套规范](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [阅读配套规范](https://design.visa.com/developing/) - [代码参考](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [代码参考](https://github.com/visa/nova-styles) - [Nova 代码库 官方安装与主题加载说明。](https://github.com/visa/nova-styles) - [Styles 1.6.5 原生组件规则与可缩放尺寸。](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css) - [Visa 主题 1.6.5 准确的主题配色与字体排版。](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css) - [示例元数据 已验证的HTML类结构。](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [CSS 入门 公开的集成指南。](https://design.visa.com/developing/styles-css/) - [浏览器支持 对现代浏览器的支持范围。](https://design.visa.com/developing/)