# Rippleデザインシステム

## Rippleデザインシステムのインターフェースプレビュー

準備に関するメモを読み、準備ができたことをマークして、次の未完了ステップに直接進みます。

## Rippleデザインシステムのデザインリファレンス

この検証では、公開済みのRippleデザインドキュメントを確認しました。対象は、デフォルトのカラーの役割、スペーシング、フォントサイズと行の高さの組み合わせ、フォーカスカラーです。これらはデザインリファレンスであり、ネイティブなRippleが同梱されていることを示すものではありません。

### 公開済みのカラーの役割

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --rpl-clr-primary | #0052C2 | ドキュメントに記載されたRippleのデフォルトパレット。テーマによって値は異なる場合があります。テーマを適用する際は、役割名を維持してください。 |
| --rpl-clr-primary-alt | #003174 | ドキュメントに記載されたRippleのデフォルトパレット。テーマによって値は異なる場合があります。テーマを適用する際は、役割名を維持してください。 |
| --rpl-clr-accent | #0095EC | ドキュメントに記載されたRippleのデフォルトパレット。テーマによって値は異なる場合があります。テーマを適用する際は、役割名を維持してください。 |
| --rpl-clr-accent-alt | #E6F5FD | ドキュメントに記載されたRippleのデフォルトパレット。テーマによって値は異なる場合があります。テーマを適用する際は、役割名を維持してください。 |
| --rpl-clr-neutral-0 | #FFFFFF | ドキュメントに記載されたRippleのデフォルトパレット。テーマによって値は異なる場合があります。テーマを適用する際は、役割名を維持してください。 |
| --rpl-clr-neutral-100 | #F5F5F5 | ドキュメントに記載されたRippleのデフォルトパレット。テーマによって値は異なる場合があります。テーマを適用する際は、役割名を維持してください。 |
| --rpl-clr-neutral-200 | #E6E6E6 | ドキュメントに記載されたRippleのデフォルトパレット。テーマによって値は異なる場合があります。テーマを適用する際は、役割名を維持してください。 |
| --rpl-clr-neutral-700 | #333333 | ドキュメントに記載されたRippleのデフォルトパレット。テーマによって値は異なる場合があります。テーマを適用する際は、役割名を維持してください。 |
| --rpl-clr-neutral-800 | #1A1A1A | ドキュメントに記載されたRippleのデフォルトパレット。テーマによって値は異なる場合があります。テーマを適用する際は、役割名を維持してください。 |
| --rpl-clr-type-default | #1A1A1A | ドキュメントに記載されたRippleのデフォルトパレット。テーマによって値は異なる場合があります。テーマを適用する際は、役割名を維持してください。 |
| --rpl-clr-link | #0052C2 | ドキュメントに記載されたRippleのデフォルトパレット。テーマによって値は異なる場合があります。テーマを適用する際は、役割名を維持してください。 |
| --rpl-clr-link-visited | #9F46B1 | ドキュメントに記載されたRippleのデフォルトパレット。テーマによって値は異なる場合があります。テーマを適用する際は、役割名を維持してください。 |
### 公開済みのスペーシングスケール

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --rpl-sp-1 | 4px | ドキュメントに記載されたスペーシングの値。後半の値は、インデックスに4を掛けたものではありません。 |
| --rpl-sp-2 | 8px | ドキュメントに記載されたスペーシングの値。後半の値は、インデックスに4を掛けたものではありません。 |
| --rpl-sp-3 | 12px | ドキュメントに記載されたスペーシングの値。後半の値は、インデックスに4を掛けたものではありません。 |
| --rpl-sp-4 | 16px | ドキュメントに記載されたスペーシングの値。後半の値は、インデックスに4を掛けたものではありません。 |
| --rpl-sp-5 | 20px | ドキュメントに記載されたスペーシングの値。後半の値は、インデックスに4を掛けたものではありません。 |
| --rpl-sp-6 | 24px | ドキュメントに記載されたスペーシングの値。後半の値は、インデックスに4を掛けたものではありません。 |
| --rpl-sp-7 | 28px | ドキュメントに記載されたスペーシングの値。後半の値は、インデックスに4を掛けたものではありません。 |
| --rpl-sp-8 | 32px | ドキュメントに記載されたスペーシングの値。後半の値は、インデックスに4を掛けたものではありません。 |
| --rpl-sp-9 | 40px | ドキュメントに記載されたスペーシングの値。後半の値は、インデックスに4を掛けたものではありません。 |
| --rpl-sp-10 | 48px | ドキュメントに記載されたスペーシングの値。後半の値は、インデックスに4を掛けたものではありません。 |
| --rpl-sp-11 | 56px | ドキュメントに記載されたスペーシングの値。後半の値は、インデックスに4を掛けたものではありません。 |
| --rpl-sp-12 | 64px | ドキュメントに記載されたスペーシングの値。後半の値は、インデックスに4を掛けたものではありません。 |
| --rpl-sp-13 | 80px | ドキュメントに記載されたスペーシングの値。後半の値は、インデックスに4を掛けたものではありません。 |
| --rpl-sp-14 | 120px | ドキュメントに記載されたスペーシングの値。後半の値は、インデックスに4を掛けたものではありません。 |
### 文字の役割とフォールバック

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| rpl-type-font-family | VIC, Arial, Helvetica, sans-serif | 公開済みの文字の役割に記載されたフォントサイズと行の高さの組み合わせ。この単独のサンプルでは、VIC書体ではなく、ドキュメントに記載されたArialをフォールバックとして使用します。 |
| rpl-type-h1 | 32/36px small · 56/60px large · 700 | 公開済みの文字の役割に記載されたフォントサイズと行の高さの組み合わせ。この単独のサンプルでは、VIC書体ではなく、ドキュメントに記載されたArialをフォールバックとして使用します。 |
| rpl-type-h2 | 24/32px small · 32/40px large · 700 | 公開済みの文字の役割に記載されたフォントサイズと行の高さの組み合わせ。この単独のサンプルでは、VIC書体ではなく、ドキュメントに記載されたArialをフォールバックとして使用します。 |
| rpl-type-h3 | 20/28px small · 24/32px large · 700 | 公開済みの文字の役割に記載されたフォントサイズと行の高さの組み合わせ。この単独のサンプルでは、VIC書体ではなく、ドキュメントに記載されたArialをフォールバックとして使用します。 |
| rpl-type-p | 16/24px | 公開済みの文字の役割に記載されたフォントサイズと行の高さの組み合わせ。この単独のサンプルでは、VIC書体ではなく、ドキュメントに記載されたArialをフォールバックとして使用します。 |
| rpl-type-p-small | 14/20px | 公開済みの文字の役割に記載されたフォントサイズと行の高さの組み合わせ。この単独のサンプルでは、VIC書体ではなく、ドキュメントに記載されたArialをフォールバックとして使用します。 |
### フォーカスのコントラスト

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --rpl-clr-focus | #FF9E1B | 公開済みのフォーカスカラー。このサンプルではRippleのユーティリティクラスを読み込まず、独自のフォーカスCSSを実装しています。 |
| --rpl-clr-focus-contrast | #1A1A1A | 公開済みのフォーカスカラー。このサンプルではRippleのユーティリティクラスを読み込まず、独自のフォーカスCSSを実装しています。 |
| --rpl-clr-dark | #1A1A1A | 公開済みのフォーカスカラー。このサンプルではRippleのユーティリティクラスを読み込まず、独自のフォーカスCSSを実装しています。 |
## Ripple デザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Rippleデザインシステムの基礎とランタイムの適用範囲

### デザインリファレンスとコンポーネントランタイムを区別する

> このリファレンスは、公開済みのRippleデザインシステムを説明しています。ワークショップのタイムラインは、選択した値をもとに独自に作成したHTML、CSS、JavaScriptの完全な解釈です。RippleのVueコンポーネントを実行せず、非公開のパッケージミラーも使用していません。また、ビクトリア州政府のサービスを称するものでもありません。この境界はプレビュー上でも明示され、ダウンロード可能なソースにも記載されています。

### ネイティブ連携の方法を慎重に選ぶ

Rippleは、コアパッケージを通じてVue向けパッケージとスタイルのみのパッケージを公開しています。公式のインストールにはGitHub Packagesへのアクセスが必要です。スタイルのみの方法でも、マークアップと動作はアプリケーション側で用意する必要があります。この配布方法を連携に使う場合は、リンク先の公式アクセス手順を参照し、採用するリリースを固定してください。以下の単独の検証には、認証もパッケージのインストールも必要ありません。

## Rippleデザインシステムのカラーの役割とキーボードフォーカス

### ブランドとコンテンツの色を区別する

タイムラインのヘッダーには濃いプライマリーカラーを使い、縁にはアクセントカラー、本文にはニュートラルなテキストカラーを使っています。提供されたソースでは、これらは別々のCSS変数として定義されています。独自に作成したステータスパネルには、淡いアクセントカラーの背景を使用しています。このリファレンスには値だけでなく役割名も記載されているため、将来テーマを変更するとき、関連性のない16進数値の集まりではなく、意図した色の関係を保ったまま更新できます。

### キーボードフォーカスを明確に示す

フォーカスにはデフォルトの青の別の濃淡ではなく、暗いコンテンツにオレンジを使っています。独自に作成したボタンと概要のフォーカスルールでは、背景色を変更し、暗いアウトラインを表示します。チェックボックスのフォーカスはアウトラインのままです。これは公開済みのフォーカスカラーの考え方を実装したものであり、このサンプルがRippleのネイティブなフォーカスユーティリティを読み込んでいることや、あらゆるテーマでアクセシビリティを確保していることを示すものではありません。

## Rippleデザインシステムのスペーシングとレスポンシブな文字組み

### 実際のスペーシングの並びを使う

ソースでは、読みやすいリズムをつくるために、8、16、24、32、48pxの名前付きステップを使用しています。完全版のリファレンスには、さらに大きなステップも記載されています。ステップの値は後半でインデックスの単純な倍数ではなくなるため、rpl-sp-9は36pxではなく40pxです。グリッドの間隔とセクションのパディングには、レイアウト上の役割は異なりますが、意図的に同じスケールの値を使っています。

### フォントの使用範囲を明確にする

Rippleでは、VICのフォールバックとしてArialとHelveticaを記載しています。この検証にはVICのフォントファイルは含まれず、Arialを明示的に使用しています。見出しは、例の992pxのブレークポイントで32/36pxから56/60pxに切り替わり、本文は16/24pxのままです。これらのフォントサイズと行の高さは、ドキュメントに記載された参考値です。タイムラインの構成は独自のものであり、ネイティブコンポーネントとピクセル単位で同一だと説明すべきではありません。

## Rippleデザインシステムのタイムラインコンテンツと段階的な情報開示

### 各段階に明確な役割を持たせる

第1段階では判断内容を定め、第2段階では参加の準備をし、第3段階ではアクションを記録します。相対的な時間表示で順序を伝え、政府の期限やサービス提供の約束を作り出さないようにしています。各段階では短い概要を常に表示し、準備に関する補足はネイティブなdetails要素に格納しています。見た目上のマーカーは独自に作成されていますが、順序付きリストとしての構造は維持しています。

- 相対的な時間表示でワークショップの順序を伝えます。

- 常に表示される概要で各段階の目的を伝えます。

- 展開できる注記に補足情報を記載します。

- 準備状況はチェックボックスで明示的に記録します。

### 読むことと準備完了を混同しない

準備に関する注記を展開しても、段階が完了したことにはなりません。準備状況は別のチェックボックスで記録し、進捗数はチェック済みの項目だけから算出します。これにより、読むだけで誤って作業を完了にしてしまうことを防げます。ソースにはすべての項目と状態を扱うロジックが含まれているため、この違いを確認して編集できます。

## Ripple デザインシステムの進捗、次のステップとリセット

### 現在の状態に応じて次のアクションを決める

「次の未完了ステップへ」ボタンを押すと、最初の未チェックの段階を見つけ、その注記を展開してチェックボックスにフォーカスします。以前に開いたことがあっても、その段階を飛ばすことはありません。3つすべてのチェックボックスを選択すると、次のステップへ進むボタンが無効になり、すべての準備ステップが完了したことがステータスに表示されます。項目のチェックを外すと、再びこのアクションを実行できるようになります。

### 関連するすべての状態をまとめてリセットする

リセットすると、3つのチェックボックスの選択を解除し、注記を閉じて、進捗表示を更新したうえで、最初のチェックボックスにフォーカスを戻します。完了バナーを残したり、リモートの記録が削除されたかのように見せたりすることはありません。このローカルの検証では状態を意図的にメモリ内に保持し、保存も送信もされないことを画面上で説明しています。

## Rippleデザインシステムの完全なソースと検証

### 単独で動作する検証を実行する

提供された完全なドキュメントをindex.htmlとして保存し、そのディレクトリを配信してください。トークン、マークアップ、読みやすいサンプルコンテンツ、操作コードがすべて含まれているため、外部ランタイムやフォントの読み込みはありません。実際のサービスを構築する前に、ネイティブなRippleのAPI、リリースの選択肢、許可されたブランド素材を確認するには、リンク先のリファレンスを参照してください。

1. HTMLの完全なサンプルをindex.htmlとして保存してください。

2. ディレクトリをローカルで配信します。

3. キーボードを使って、次の手順へのフォーカス移動、完了、リセットをテストします。

4. 公式パッケージへのアクセスと固定バージョンを使用して、ネイティブなRipple連携を別途セットアップします。

### 状態遷移全体を確認する

最初の項目を準備完了にし、次の手順へのアクションを実行して、2つ目のチェックボックスにフォーカスが移り、補足が展開されることを確認します。すべての項目を完了して、次の手順へのアクションが無効になることを確認したら、項目のチェックを外し、アクションが再び使えることを確認します。リセットして、進捗と開閉状態の両方を確認します。スマートフォン幅ではステータスパネルがタイムラインの下に移動し、すべてのコントロールを引き続き利用できます。

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

### index.html — ワークショップのタイムライン全体

すべてのトークン値、レスポンシブスタイル、コンテンツ、進捗、フォーカスの動作を、1つの実行可能なドキュメントにまとめています。

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop planning timeline</title><style>
:root{--rpl-clr-primary:#0052c2;--rpl-clr-primary-alt:#003174;--rpl-clr-accent:#0095ec;--rpl-clr-accent-alt:#e6f5fd;--rpl-clr-type-default:#1a1a1a;--rpl-clr-neutral-0:#fff;--rpl-clr-neutral-100:#f5f5f5;--rpl-clr-neutral-200:#e6e6e6;--rpl-clr-focus:#ff9e1b;--rpl-clr-focus-contrast:#1a1a1a;--rpl-sp-2:8px;--rpl-sp-4:16px;--rpl-sp-6:24px;--rpl-sp-8:32px;--rpl-sp-10:48px;--rpl-type-font-family:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--rpl-clr-neutral-0);color:var(--rpl-clr-type-default);font:16px/1.5 var(--rpl-type-font-family)}main{max-width:1160px;margin:auto;padding:var(--rpl-sp-8)}header{background:var(--rpl-clr-primary-alt);color:white;padding:var(--rpl-sp-8);border-bottom:8px solid var(--rpl-clr-accent)}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700}h1{font-size:32px;line-height:36px;margin:16px 0;max-width:20ch}header p:last-child{max-width:65ch;margin-bottom:0}.layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:var(--rpl-sp-10);margin-top:var(--rpl-sp-8)}h2{font-size:24px;line-height:32px;margin:0 0 16px}h3{font-size:20px;line-height:28px;margin:0}.timeline{list-style:none;margin:0;padding:0 0 0 24px;border-left:2px solid var(--rpl-clr-primary);}.timeline>li{position:relative;padding:0 0 32px 8px}.timeline>li:before{content:'';position:absolute;width:14px;height:14px;background:var(--rpl-clr-primary);border:3px solid white;outline:2px solid var(--rpl-clr-primary);border-radius:50%;left:-32px;top:6px}.when{font-size:14px;font-weight:700;color:var(--rpl-clr-primary);margin:0 0 8px}.timeline p{margin:8px 0 16px}.timeline label{display:flex;align-items:flex-start;gap:8px;font-weight:700}.timeline input{width:20px;height:20px;flex-shrink:0;margin:2px 0;accent-color:var(--rpl-clr-primary)}details{background:var(--rpl-clr-neutral-100);margin:16px 0;padding:16px}summary{font-weight:700;cursor:pointer}details ul{padding-left:24px}.progress{background:var(--rpl-clr-accent-alt);padding:24px;align-self:start;border-top:4px solid var(--rpl-clr-primary)}progress{width:100%;height:16px;accent-color:var(--rpl-clr-primary)}button{font:700 16px/24px var(--rpl-type-font-family);padding:12px 16px;cursor:pointer;border:2px solid var(--rpl-clr-primary);background:var(--rpl-clr-primary);color:white;text-align:left;max-width:100%}button:hover{background:var(--rpl-clr-primary-alt)}.secondary{color:var(--rpl-clr-primary);background:white;margin-top:16px}button:disabled{cursor:default;opacity:.6}.progress button{width:100%;margin-top:16px}button:focus-visible,summary:focus-visible{outline:3px solid var(--rpl-clr-focus-contrast);outline-offset:2px;background:var(--rpl-clr-focus);color:var(--rpl-clr-focus-contrast);border-radius:0}input:focus-visible{outline:3px solid var(--rpl-clr-focus);outline-offset:3px}.note{font-size:14px;border-top:1px solid var(--rpl-clr-neutral-200);padding-top:24px;margin-top:8px;max-width:80ch}[hidden]{display:none!important}@media(min-width:992px){h1{font-size:56px;line-height:60px}h2{font-size:32px;line-height:40px}}@media(max-width:760px){main{padding:20px}header{padding:24px}.layout{grid-template-columns:1fr;gap:24px}.eyebrow{overflow-wrap:anywhere}}
</style></head><body><main><header><p class="eyebrow">OpenDesign · Workshop practice</p><h1>Make room for a useful conversation</h1><p>A short planning timeline for a team workshop. Mark what is ready and jump to the next unfinished step.</p></header><div class="layout"><section aria-labelledby="plan-heading"><h2 id="plan-heading">Your preparation timeline</h2><ol class="timeline">
<li><p class="when">One week before</p><h3>Define the decision</h3><p>Agree on the question the workshop should answer and the people who need to take part.</p><details><summary>Preparation notes</summary><ul><li>Write a one-sentence outcome.</li><li>Invite people with different perspectives on the decision.</li><li>Explain what is already decided and what is still open.</li></ul></details><label><input type="checkbox" data-step="0">The purpose and invitations are ready</label></li>
<li><p class="when">Two days before</p><h3>Prepare for participation</h3><p>Share a short agenda and offer a way to contribute before the session.</p><details><summary>Preparation notes</summary><ul><li>Send readable material in advance.</li><li>Check access needs and remote participation.</li><li>Choose someone to capture decisions.</li></ul></details><label><input type="checkbox" data-step="1">The agenda and access arrangements are ready</label></li>
<li><p class="when">On the day</p><h3>Leave with a next step</h3><p>Close with a clear decision, an owner and a date to review what happens next.</p><details><summary>Preparation notes</summary><ul><li>Leave time to compare different views.</li><li>Record unanswered questions separately.</li><li>Read back the agreed action before closing.</li></ul></details><label><input type="checkbox" data-step="2">The action and follow-up are recorded</label></li>
</ol></section><aside class="progress" aria-labelledby="progress-heading"><h2 id="progress-heading">Preparation status</h2><p id="count" role="status">0 of 3 steps ready</p><progress max="3" value="0" aria-label="Preparation progress"></progress><p id="next-note">Next: Define the decision</p><button id="next" type="button">Go to next unfinished step</button><button class="secondary" id="reset" type="button">Reset checklist</button></aside></div><p class="note">An original OpenDesign HTML/CSS study using published Ripple color, spacing and type values. It uses Arial, Ripple’s documented fallback, and does not run the Ripple Vue components or supply the VIC font. The checklist stays in this page and is not saved or sent.</p></main><script>
const checks=[...document.querySelectorAll('[data-step]')],names=['Define the decision','Prepare for participation','Leave with a next step'];const next=document.querySelector('#next');
function update(){let count=checks.filter(c=>c.checked).length,first=checks.findIndex(c=>!c.checked);document.querySelector('#count').textContent=`${count} of 3 steps ready`;document.querySelector('progress').value=count;document.querySelector('#next-note').textContent=first<0?'All three preparation steps are ready.':'Next: '+names[first];next.disabled=first<0;}
checks.forEach(c=>c.addEventListener('change',update));next.addEventListener('click',()=>{let check=checks.find(c=>!c.checked);if(check){check.closest('li').querySelector('details').open=true;check.focus();}});document.querySelector('#reset').addEventListener('click',()=>{checks.forEach(c=>c.checked=false);document.querySelectorAll('details').forEach(d=>d.open=false);update();checks[0].focus();});update();
</script></body></html>
```

コードリファレンス

- これはオリジナルのアプリケーションコードであり、Ripple Vueコンポーネントのソースではありません。

- 外部ランタイム、フォントの読み込み、アカウント、データ送信は不要です。

## Ripple デザインシステムAIエージェントのセットアップ

### 実装の出発点

このコマンドで、自己完結型の解釈版を配信します。ネイティブなRippleを利用する場合は、「Sources」にリンクされている公式のGitHub Packagesへのアクセス方法と、Vueまたはスタイルのみのセットアップ手順を確認してください。

```
# Save the complete example as index.html in an empty directory.
python3 -m http.server 8000
# Open http://localhost:8000/
```

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

```
提供されたドキュメントをもとに、ワークショップのタイムライン全体をオリジナルで構築してください。Rippleに記載されているロール値とスペーシング、明示されたArialのフォールバック、閲覧状態と準備状態の区別、未完了の次のステップへのフォーカス移動、完了、全体のリセットを維持してください。ネイティブなRipple Vue実装ではなく、HTML/CSSによる解釈版であることを明記してください。
```

## Ripple デザインシステムの情報源と対象範囲

公開されているRippleのデザイン値と、ドキュメントに記載されたArialのフォールバックを使用したOpenDesign HTML/CSSの解釈版です。このプレビューではRipple Vueコンポーネントは実行されず、VICフォントのアセットも含まれていません。

- 色の役割 既定のカラーパレットとコンテンツのロール。

- スペーシング 公開されているスペーシングの値一式。

- タイポグラフィ VIC、フォールバック、レスポンシブな書体の組み合わせ。

- フォーカス状態 オレンジとダークカラーによるフォーカス表現。

- ネイティブなスタイルのみのセットアップ パッケージへのアクセス方法と、スタイルのみを利用する場合の役割。

- デザイントークン ロールの命名とテーマ間の関係。

## Ripple デザインシステムの関連リソース

### Scottish Government デザインシステム

スコットランド政府のレスポンシブな文字組み、余白、色の役割を、上限超過後も入力内容を保持して修正を支援するネイティブな文字数入力フィールドに適用します。

### Singapore Government デザインシステム

現行のSGDS Web Componentsを使い、実際のレスポンシブトークン、昼夜のテーマ、ローカルのプランと同期する標準の範囲指定数量を実装します。

### Decanter

DecanterのTailwindプリセット、レスポンシブな文字サイズのスケール、画面幅に応じて伸縮する余白を使って、学術的な編集ページを構成します。トピックで絞り込めるイベントカードや、展開できる要旨など、オリジナルの要素を試せます。


- [実装リファレンス](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/)
- [ソース](https://www.ripple.sdp.vic.gov.au/design-system/styles/colour/)
- [ソース](https://www.ripple.sdp.vic.gov.au/design-system/styles/spacing/)
- [ソース](https://www.ripple.sdp.vic.gov.au/design-system/styles/typography/)
- [ソース](https://www.ripple.sdp.vic.gov.au/design-system/styles/focus-state/)
- [コードリファレンス](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/)
- [色の役割 既定のカラーパレットとコンテンツのロール。](https://www.ripple.sdp.vic.gov.au/design-system/styles/colour/)
- [スペーシング 公開されているスペーシングの値一式。](https://www.ripple.sdp.vic.gov.au/design-system/styles/spacing/)
- [タイポグラフィ VIC、フォールバック、レスポンシブな書体の組み合わせ。](https://www.ripple.sdp.vic.gov.au/design-system/styles/typography/)
- [フォーカス状態 オレンジとダークカラーによるフォーカス表現。](https://www.ripple.sdp.vic.gov.au/design-system/styles/focus-state/)
- [ネイティブなスタイルのみのセットアップ パッケージへのアクセス方法と、スタイルのみを利用する場合の役割。](https://www.ripple.sdp.vic.gov.au/design-system/develop/usage/css-only/)
- [デザイントークン ロールの命名とテーマ間の関係。](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/)