# Rivet 设计系统

## Rivet 设计系统界面预览

使用指针或键盘切换简短的参观信息面板；活动的重要详情始终可见。

## Rivet 设计系统设计参考

Rivet 2.9.1 发布版 CSS 和官方令牌/工具类文档。rem 换算以 16px 根字号为基准；本地示例改用 Arial/Georgia 字体，并自行设置 64rem 的外层宽度。

### 排版

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --rvt-font-sans | BentonSans, system sans-serif fallbacks | 机构字体；预览明确使用 Arial。 |
| --rvt-font-serif | GeorgiaPro, Georgia, Times New Roman, Times, serif | 衬线字体角色；必要时预览使用 Georgia。 |
| rvt-ts-12 / 14 / 16 / 18 / 20 / 23 / 26 | 12 / 14 / 16 / 18 / 20 / 23 / 26px | 以 16px 根字号为基准的数值工具类。 |
| rvt-ts-29 / 32 / 36 / 41 / 46 / 52 | 29 / 32 / 36 / 41 / 46 / 52px | 较大的比例级别；应用于文本元素。 |
| rvt-lh-tight / base / loose | 1.2 / 1.5 / 1.65 | 无单位的行高选项。 |
| --rvt-font-regular / medium / bold | 400 / 500 / 700 | 是否可用中等字重取决于字体。 |
### 间距与形状

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --rvt-spacing-xxs / xs / sm / md | 4 / 8 / 16 / 24px | 小到组件级别的间距。 |
| --rvt-spacing-lg / xl / xxl | 32 / 40 / 64px | 更大的组合间距。 |
| --rvt-spacing-3-xl / 4-xl | 128 / 192px | 用于大型展示元素的间距，不用于面板内边距。 |
| --rvt-border-radius-sm / md / lg | .125 / .25 / .5rem | 标准根字号下的 2 / 4 / 8px。 |
| --rvt-width-4-xl | 48rem (768px) | 宽度令牌与后缀相同的间距令牌含义不同。 |
### 调色板

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --rvt-color-black-500 | #243142 | 深色主参考色。 |
| --rvt-color-black-000 / black-100 | #f8f9fa / #e2e7e9 | 浅色界面表面和分隔线参考色。 |
| --rvt-color-crimson-500 / crimson-600 | #990000 / #800000 | 深红色系参考色。 |
| --rvt-color-blue-500 / blue-600 | #006298 / #004f80 | 蓝色系参考色。 |
| --rvt-color-green-500 | #056e41 | 绿色系；本身不表示成功。 |
### 断点

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --rvt-breakpoint-sm | 30em / 480px | -sm-up 工具类。 |
| --rvt-breakpoint-md | 46.25em / 740px | -md-up 工具类。 |
| --rvt-breakpoint-lg | 67.5em / 1080px | -lg-up 工具类。 |
| --rvt-breakpoint-xl | 78.75em / 1260px | -xl-up 工具类。 |
| --rvt-breakpoint-xxl | 87.5em / 1400px | -xxl-up 工具类。 |
## Rivet设计系统完整指南

实用指南，介绍如何为真实界面选择、应用和评审此系统。

完整指导、实现起点和源代码链接。

## Rivet大学事务设计系统

### 以 HTML 为入口的组件系统

> Rivet 为印第安纳大学的界面提供 CSS、JavaScript、工具类和页面布局。此示例直接使用 2.9.1 浏览器构建包，无需 React 或组件编译器。它旨在展示一个小型工作坊详情页，其中包含辅助访问信息，而不是伪装成仪表盘的入学申请页面。

机构标识与示例内容各自独立。此页面不会复刻 IU 标识、声称为访客办理登记，也不会确认真实场所。若要用于正式的大学服务，请遵循学校批准的品牌规范和内容所有权流程。代码许可并不意味着虚构的活动详情就是官方信息。

阅读配套规范

## Rivet设计系统：字体级别与字体角色

### 为文本使用精确的字号工具类

Rivet 的无衬线字体系列以 BentonSans 开头，衬线字体系列以 GeorgiaPro 开头。本地示例特意使用 Arial 和 Georgia 作为后备字体，不会请求远程字体。正式实现必须妥善处理机构字体的使用授权和交付，不要从此预览中复制字体文件。

数值字号采用经过取整的 Major Second 比例递进。示例标题使用 rvt-ts-32，面板标题使用 rvt-ts-23，编译后的字号分别为 2rem 和 1.4375rem。正文字号为 1rem。行高为 1.5 时使用 rvt-lh-base，1.2 时使用 rvt-lh-tight，1.65 时使用 rvt-lh-loose。将这些类应用于文本元素，避免容器中的控件继承到不合适的展示字号。

| 此示例中的角色 | 类名 | 根字号为 16px 时的值 |
| --- | --- | --- |
| 标题 | rvt-ts-32 | 32px |
| 面板标题 | rvt-ts-23 | 23px |
| 正文 | rvt-ts-16 | 16px |
| 小标签 | rvt-ts-14 | 14px |
阅读配套规范

## Rivet设计系统：颜色与界面表面选择

### 深红并非唯一选择

参考色板将 crimson-500 (#990000) 与 blue-500 (#006298) 区分开来。示例以克制的方式用深红色呈现顶部横线，并使用原生的 Rivet 控件来体现交互状态。文本使用 black-500 (#243142)，辅助信息背景层使用 black-000 (#f8f9fa)，分隔线使用 black-100 (#e2e7e9)。这些都是实际的色板条目，并非从截图中提取的颜色值。

颜色名称并不能保证任意搭配都符合对比度要求。保留原生的标签页焦点样式和选中状态，并确保它们与可见内容及 aria-selected 值一致。不要只把标签文字改成深红色来表示面板处于激活状态。示例中的虚构活动提示仍以普通可读文本的形式放在切换器上方。

阅读配套规范

## Rivet设计系统：间距、宽度与圆角

### 命名比例，尺寸跨越有意拉大

Rivet 的间距比例并非按连续的 4px 递增。以根字号 16px 计，各级间距依次为 xxs 4px、xs 8px、sm 16px、md 24px、lg 32px、xl 40px、xxl 64px、3-xl 128px 和 4-xl 192px。示例在移动端页面内边距中使用 sm，在面板附近的间距中使用 md，并以 lg 拉开主要纵向区块。

示例中最大宽度为 64rem 的阅读区域是应用层面的选择，并非声称它是 Rivet 的容器令牌。在此区域内，4-xl 宽度令牌为 48rem/768px；spacing-4-xl 为 12rem/192px。后缀相同不代表尺寸相同。圆角分别为 radius-sm .125rem、md .25rem 和 lg .5rem；不要把所有组件都改成统一的大圆角卡片风格。

阅读配套规范

## Rivet设计系统：标签页结构与状态

### 匹配数据值后再初始化

一组标签页包含一个 rvt-tabs 包装元素、一个带有明确 aria-label 的 rvt-tabs__tablist、一组按钮触发器，以及对应的 rvt-tabs__panel 面板。每组对应项的 data-rvt-tab 和 data-rvt-tab-panel 值必须匹配。初始选中标记 data-rvt-tab-init 应放在面板上，而不是按钮上。Rivet 可以生成标识符，但在此示例中，显式配对更便于检查。

Rivet.init() 会添加标签页角色、选中状态、面板关联关系和键盘交互行为。不要再添加一个独立切换隐藏状态的点击处理程序：两个状态控制逻辑相互竞争，可能导致选中的标签与显示的面板不同步。下方的完整标记包含原创的简短内容，可放在设置中的样式表标签与脚本标签之间。

```
<div class="rvt-tabs" data-rvt-tabs="visit">
  <div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
    <button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
    <button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
    <button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
    <h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
    <p>Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
    <h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
    <p>In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="access">
    <h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
    <p>The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.</p>
  </div>
</div>
```

代码参考

阅读配套规范

## Rivet设计系统：哪些内容不应放在标签页中

### 确保访问信息一目了然

活动标题、日期、时长和虚构示例提示应放在标签页之外。访客不应为了确认内容是否描述真实预订而去查找隐藏面板。每个面板都包含一个简短标题和一段文字；三个标签名称都足够简短，在窄屏上也能保持单行显示。

如果相关内容适合分别阅读，使用标签页很合适。但若要比较多个项目的费用或两种学习计划，标签页就不合适，因为切换时一侧内容会被隐藏。此类需求更适合使用表格或展开列表。

- 使用“概览”“到达”和“无障碍”分别呈现有独立参考价值的辅助说明。

- 将截止日期、取消通知和主要操作放在标签页面板之外，确保始终可见。

- 如果读者需要同时查看不同类别的数值，请使用对比表格。

阅读配套规范

## Rivet设计系统：响应式布局与键盘操作

### 五个移动优先断点

Rivet 的断点为 30em、46.25em、67.5em、78.75em 和 87.5em。按常见的 16px 初始字号换算，分别为 480、740、1080、1260 和 1400px。中等断点为 740px，而不是沿用常见的 768px 规范。响应式工具类会在名称中附加断点和 -up，例如 rvt-ts-32-md-up。

标签栏不应换成多行堆叠布局。请保持标签简短，并在窄屏上测试实际文本；缩小文字以勉强塞下，并不能替代对合适导航组件的选择。在原生交互中，按 Left 和 Right 可在标签间移动焦点，并在两端循环。按 Enter 或 Space 可激活焦点所在的标签。已关闭面板中的交互元素不得留在 Tab 键导航顺序中。

阅读配套规范

## Rivet设计系统：安装并验证示例

### 使用浏览器构建包，只需初始化一次

提供的安装配置固定使用 2.9.1，并将其已发布的 CSS 和压缩版浏览器 JavaScript 复制到网站的静态目录中。调用 Rivet.init() 前，请先提供这些资源。如果框架稍后才挂载 HTML，请使用文档说明的 JavaScript 集成生命周期，不要假设初始页面扫描已找到新节点。

独立预览会在本地运行这些官方 CSS 和 JavaScript 资源。字体回退和容器宽度是明确设置的应用覆盖项。它不包含网络预约请求、持久化、分析或生成的确认信息。此处演示的交互仅限原生标签页。

1. 加载本地样式表，并在初始化前确认三个标签触发器和面板都已存在。

2. 初始化 Rivet，用指针切换每个标签页，再使用方向键和 Enter 或 Space 重复操作。

3. 在桌面和窄屏移动设备尺寸下，检查选中的触发器、可见面板、焦点环和文档宽度。

阅读配套规范

## Rivet 设计系统组件示例

### 三面板参访信息切换器

使用明确匹配的数据属性和初始面板；焦点与可见性由原生 Rivet 管理。

```
<div class="rvt-tabs" data-rvt-tabs="visit">
  <div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
    <button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
    <button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
    <button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
    <h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
    <p>Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
    <h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
    <p>In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="access">
    <h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
    <p>The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.</p>
  </div>
</div>
```

代码参考

- 将活动标题和重要信息放在面板之外。

- 引入已发布的 CSS 和 JavaScript，并调用一次 Rivet.init()。

- 使用方向键移动焦点；按 Enter 或 Space 激活获得焦点的标签页。

### 完整的独立示例

完整文档包含其布局、控件与初始化。解压所链接的示例归档，即可获得完全一致的相对 vendor 资源，然后通过 HTTP 提供服务。

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop visit — Rivet specimen</title><link rel="stylesheet" href="vendor/rivet-2.9.1/rivet.min.css"><style>:root{--rvt-font-sans:Arial,sans-serif;--rvt-font-serif:Georgia,serif}body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}body{border-top:8px solid #990000;margin:0;background:#fff;color:#243142}.shell{max-width:64rem;margin:auto;padding:2rem 1rem 3rem}.eyebrow{font-size:.875rem;letter-spacing:.06em;color:#4c5a69}.intro{max-width:48rem}.facts{display:flex;gap:1.5rem;flex-wrap:wrap;padding:1.5rem;margin:2rem 0;background:#f8f9fa;border:1px solid #e2e7e9}.facts p{margin:0}.facts strong{display:block;font-size:.875rem}.rvt-tabs__panel{min-height:13rem}footer{margin-top:2rem;padding-top:1rem;border-top:1px solid #e2e7e9;font-size:.875rem;color:#4c5a69}h1{margin:.5rem 0 1rem}@media(min-width:46.25em){.shell{padding:3rem 2rem}.rvt-tabs__panel{min-height:12rem}}</style></head><body><main class="shell"><p class="eyebrow">LEARNING STUDIO · RIVET COMPONENT EXAMPLE</p><h1 class="rvt-ts-32 rvt-text-bold rvt-lh-tight">Reading the archive</h1><p class="intro rvt-ts-18">A hands-on introduction to working with historical sources. Explore the visit information below.</p><div class="facts"><p><strong>Session</strong>Saturday · 10:00–11:30</p><p><strong>Format</strong>Small-group workshop</p><p><strong>Location</strong>Learning studio · Room 204</p></div><p class="rvt-ts-14 rvt-m-bottom-lg">Fictional event for interface demonstration. No reservation is made.</p><div class="rvt-tabs" data-rvt-tabs="visit">
  <div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
    <button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
    <button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
    <button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
    <h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
    <p>Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
    <h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
    <p>In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="access">
    <h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
    <p>The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.</p>
  </div>
</div><footer>Native Rivet 2.9.1 tabs · Arial font fallback · Original example content<br>Keyboard: use Left and Right to move between tabs, then Enter or Space to activate.</footer></main><script src="vendor/rivet-2.9.1/rivet.min.js"></script><script>Rivet.init();</script></body></html>
```

代码参考

- 从“来源”一节下载完整示例。其 README 给出了确切的本地启动命令。

- 保持 vendor 路径相对于本文档；该归档包含此预览所使用的全部资源。

## Rivet 设计系统 Agent 设置

### 实现起点

已根据官方入门指南核实已发布的 rivet-core 2.9.1 浏览器资源路径。请按服务器环境调整公共目录；预览使用本地副本和字体回退。Sources 中的完整可运行示例 ZIP 还提供了预览所需的确切依赖项和完整文档。解压后，在该目录运行 python3 -m http.server 8080，然后打开 http://localhost:8080/indiana-rivet.html。请勿通过 file:// 打开基于模块的示例。

```
npm install rivet-core@2.9.1
mkdir -p public/vendor/rivet
cp node_modules/rivet-core/css/rivet.min.css public/vendor/rivet/
cp node_modules/rivet-core/js/rivet.min.js public/vendor/rivet/

# Add these tags to the HTML served from public/:
# <link rel="stylesheet" href="/vendor/rivet/rivet.min.css">
# ...component markup...
# <script src="/vendor/rivet/rivet.min.js"></script>
# <script>Rivet.init();</script>
```

### 适用于你项目的提示词

```
使用原生 HTML 标签页创建 Rivet 2.9.1 大学工作坊详情页。加载 rivet.min.css 和 rivet.min.js，并调用 Rivet.init()。使用匹配的 data-rvt-tab/data-rvt-tab-panel 值、有意义的标签列表名称，并在第一个面板上设置 data-rvt-tab-init。将标题、日期和重要通知放在标签页之外。正文使用 16px、面板标题使用 23px、页面标题使用 32px，并使用 Rivet 间距令牌。遵循 480/740/1080/1260/1400px 断点。面板内容保持简短，保留键盘焦点和选择行为，并将所有虚构的活动详情标明为演示内容。未经授权，请勿使用 IU 标识。
```

## Rivet 设计系统资源与范围

一份技术性 Rivet 参考资料及虚构的工作坊演示。机构标识的使用和字体许可仍须遵守印第安纳大学的规定；本页面不提供真实的参访或预约服务。

- Rivet 概览 官方用途和资源概览。

- 设计令牌 用于共享视觉决策的命名值。

- 布局 适用于应用和内容页面的起始布局。

- 组件 有文档说明的界面组件。

- 下载完整可运行示例 包含完整 HTML、本地 CSS/JavaScript 依赖、随附许可证以及确切启动说明的 ZIP 包。无需构建步骤。

## Rivet 设计系统相关资源

### Digital Agency 设计系统

使用 DADS 文本角色、语义令牌和原生 HTML 组件结构，构建易读的日语公共服务界面。试用可运行的收据查询功能，体验格式错误、无匹配结果和可供审核的状态记录。

### KERN

使用经验证的字体排印、语义主题、披露组件和可撤销的确认流程，构建原生 KERN 界面。

### Michigan Forty Two

通过一个可运行的角色与研究筛选示例，了解 Forty-Two 支持的 WordPress 工作流程、Web 配色方案和人员目录模式。


- [实现参考](https://rivet.iu.edu/components/tabs/)
- [来源](https://rivet.iu.edu/utilities/typography/)
- [来源](https://rivet.iu.edu/design-tokens/)
- [阅读配套规范](https://rivet.iu.edu/getting-started/)
- [阅读配套规范](https://rivet.iu.edu/utilities/typography/)
- [阅读配套规范](https://rivet.iu.edu/design-tokens/)
- [代码参考](https://rivet.iu.edu/components/tabs/)
- [阅读配套规范](https://rivet.iu.edu/components/tabs/)
- [Rivet 概览 官方用途和资源概览。](https://rivet.iu.edu/)
- [设计令牌 用于共享视觉决策的命名值。](https://rivet.iu.edu/design-tokens/)
- [布局 适用于应用和内容页面的起始布局。](https://rivet.iu.edu/layouts/)
- [组件 有文档说明的界面组件。](https://rivet.iu.edu/components/)