# 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をフォールバックとして使用し、外部フォントをリクエストしません。本番環境で実装する場合は、このプレビューからフォントファイルをコピーするのではなく、大学のフォント使用許可と配信方法を確認してください。

数値のスケールは、メジャーセカンドの音程に基づく丸めた段階です。この例ではタイトルに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デザインシステム：タブの構造と状態

### データ値を対応させてから初期化する

タブセットは、1つのrvt-tabsラッパー、意味のあるaria-labelを持つrvt-tabs__tablist、ボタン形式のトリガー、そして兄弟要素となるrvt-tabs__panelで構成されます。data-rvt-tabとdata-rvt-tab-panelの値は、各ペアで一致させます。初期選択を示すdata-rvt-tab-initはボタンではなくパネルに設定します。Rivetで識別子を生成できますが、ペアを明示するとこの例を確認しやすくなります。

Rivet.init()は、タブのロール、選択状態、パネルとの関連付け、キーボード操作を設定します。クリック時にhiddenを個別に切り替える別のイベントハンドラーを実装しないでください。状態を管理する仕組みが競合すると、選択されたタブと表示中のパネルが一致しなくなることがあります。以下の完全なマークアップにはオリジナルの短いコンテンツが含まれており、セットアップ内のスタイルシートタグとスクリプトタグの間に配置できます。

```
<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デザインシステム：タブの外に置く情報

### 来訪に必要な情報を見つけやすくする

イベント名、日付、所要時間、架空の例であることを示す注意書きは、タブの外に置きます。実際の予約についての情報かどうかを知るために、訪問者が非表示のパネルを探す必要があってはいけません。各パネルには短い見出しと段落を1つずつ配置します。3つのラベルは短いため、画面幅の狭い端末でも1行に収まります。

関連する情報を個別に読める場合、タブは適しています。一方、複数のプログラムの費用や2つの学習計画を比較する用途には向きません。切り替えると、一方の情報が隠れてしまうためです。その場合は、表や常時表示されるリストのほうが適切です。

- 個別に役立つ補足説明には、「概要」「アクセス方法」「利用案内」を使用します。

- 締め切り、キャンセルに関するお知らせ、主要な操作は、タブパネルの外に表示してください。

- 読者が複数の分類にまたがる値を同時に確認する必要がある場合は、比較表を使用します。

関連する仕様を確認する

## Rivetデザインシステム：レスポンシブ対応とキーボード操作

### モバイルファーストの5つのブレークポイント

Rivetのブレークポイントは30em、46.25em、67.5em、78.75em、87.5emです。通常の初期フォントサイズ16pxで換算すると、480、740、1080、1260、1400pxに相当します。中間のブレークポイントは、慣例として使われる768pxではなく740pxです。レスポンシブユーティリティは、rvt-ts-32-md-upのようにブレークポイント名と-upを追加します。

タブ列が複数行に積み重ならないようにしてください。ラベルを短く保ち、実際のテキストで狭い画面幅をテストしてください。文字を縮小して無理に収めても、適切なナビゲーションコンポーネントを選ぶ代わりにはなりません。ネイティブの操作では、左右の矢印キーでタブ間のフォーカスを移動し、端まで進むと反対側に戻ります。EnterまたはSpaceキーでフォーカス中のタブを有効にします。閉じたパネル内の操作可能な要素は、Tabキーでのフォーカス移動の対象から除外してください。

関連する仕様を確認する

## Rivetデザインシステム：サンプルのインストールと動作確認

### 初期化を1回行うブラウザバンドル

付属のインストール手順では、バージョン2.9.1を固定し、公開されているCSSと圧縮済みのブラウザー用JavaScriptをサイトの静的ディレクトリにコピーします。Rivet.init()を呼び出す前に、これらのアセットを配信してください。フレームワークがHTMLを後からマウントする場合は、初回のページスキャンで新しいノードが検出されると想定せず、ドキュメントに記載されたJavaScriptの統合ライフサイクルを使用してください。

単独で動作するプレビューでは、公式のCSSおよびJavaScriptアセットをローカルで実行します。タイポグラフィのフォールバックとラッパーの幅は、アプリケーション側で明示的に上書きしています。ネットワーク経由の予約リクエスト、永続化、分析、確認メッセージの生成はありません。デモする操作は、ネイティブのタブのみです。

1. ローカルのスタイルシートを読み込み、初期化前に3つのタブトリガーとパネルがすべて存在することを確認します。

2. Rivetを初期化し、ポインターで各タブを切り替えた後、矢印キーとEnterまたはSpaceでも操作します。

3. デスクトップと幅の狭いモバイル画面で、選択中のトリガー、表示中のパネル、フォーカスリング、ドキュメント幅を確認します。

関連する仕様を確認する

## Rivet デザインシステムのコンポーネント例

### 3つのパネルで構成する訪問情報切り替えUI

対応するdata属性と初期パネルを明示します。フォーカスと表示状態はネイティブの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()を1回呼び出してください。

- 矢印キーでフォーカスを移動し、EnterまたはSpaceでフォーカス中のタブを有効にします。

### 単体で動作するサンプル一式

レイアウト、操作要素、初期化処理を含むドキュメント全体です。リンク先のサンプルアーカイブを展開すると、このプレビューで使用する正確な相対パスのベンダーアセットが得られます。その後、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に正確なローカル起動コマンドが記載されています。

- ベンダーのパスはこのドキュメントからの相対パスのままにしてください。アーカイブには、このプレビューで使用するアセット一式が含まれています。

## Rivet デザインシステムのエージェント設定

### 実装の出発点

公開されているrivеt-core 2.9.1のブラウザーアセットのパスは、公式のスタートガイドと照合済みです。サーバーに合わせて公開ディレクトリを調整してください。プレビューではローカルコピーとフォントのフォールバックを使用します。「ソース」にある完全な動作例の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>
```

### あなたのプロジェクト向けプロンプト

```
Rivet 2.9.1のネイティブなHTMLタブを使い、大学のワークショップ詳細ページを作成します。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リファレンスと、架空のワークショップでのデモです。機関のロゴおよびフォントの使用許可には、引き続きIndiana Universityの規則が適用されます。実際の訪問や予約は提供していません。

- 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/)