# Decanter デザインシステム
## Decanter デザインシステムのインターフェースプレビュー
オリジナルのイベントカードを絞り込み、概要を開き、該当するトピックがない場合も別の方法で内容を確認できます。
## Decanter デザインシステム設計リファレンス
Decanter 7.5.3 パッケージと公式の v7 インストール手順・規約に基づいています。v8 での非推奨化は移行に関する注記として扱います。プレビューはHTML/CSSによる独自の解釈で、ローカルのフォントフォールバックを使用し、大学のアイデンティティマークは使用していません。
### 文字設定
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Primary sans / serif | Source Sans 3 / Source Serif 4 | フォールバックには Helvetica/Arial と Georgia/Times を使用します。 |
| Long-form line height | 1.4–1.5em | 推奨する読みやすい文字サイズの範囲。 |
| Short text / headings | 1.2–1.3em | よりコンパクトなグループ。 |
### 選択したモジュラー設定
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Scale mobile / tablet / desktop | 1.15 / 1.2 / 1.25 | type-* の各段階に適用する比率。 |
| basefont-23 selection | 18px XS–SM; 21px MD–XL; 23px 2XL | このサンプルで使用する明示的な設定。 |
| Breakpoints SM / MD / LG / XL / 2XL | 576 / 768 / 992 / 1200 / 1500px | レスポンシブの境界。 |
| cc maximum | 1500px at 1700px viewport | 画面端まで広がる流動的なコンテンツコンテナ。 |
| Screen edge XS / SM / MD / LG / XL | 20 / 30 / 50 / 80 / 100px | 数学的なスケールではなく、厳選された設定。 |
### アイデンティティカラーとアクションカラーの違い
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Cardinal red | #8c1515 | アイデンティティの主要カラー。 |
| Black / cool grey | #2e2d29 / #53565a | 基本のニュートラルパレット。 |
### Web向けインタラクティブパレット
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Digital red / dark | #b1040e / #820000 | インタラクティブ要素向けのスタイル。ワードマークの色の代わりにはなりません。 |
| Digital blue / dark | #006cb8 / #00548f | リンクのスタイル。 |
## Decanter デザインシステム完全ガイド
実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。
詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。
## Decanter デザインシステム：SDK ではなく Tailwind プリセット
### ドキュメントに記載された生成手順を固定する
> 検証済みの Decanter パッケージは 7.5.3 で、Tailwind CSS ^3.4.17 を宣言しています。公開エントリーポイントは Tailwind の設定プリセットです。presets に require("decanter") を追加し、content を実際のソースファイルに設定して、ユーティリティスタイルシートをコンパイルします。インポートする Decanter React プロバイダーはありません。
ドキュメントには v8 で削除予定の項目が含まれていますが、インストール手順は引き続き v7 として記載されています。このリファレンスでは v7.5.3 に固定し、非推奨の foggy、slab、旧式の modular-text ユーティリティは使用しません。単独のプレビューはレイアウト規則を明示的に解釈したものであり、Tailwind でコンパイルしたものではありません。
関連する仕様を確認する
## Decanter デザインシステム：レスポンシブなモジュラータイポグラフィ
### スケールは基準値によって決まる
Source Sans 3 と Source Serif 4 をそれぞれ主要なサンセリフ体とセリフ体として使用し、フォールバックには Helvetica/Arial と Georgia/Times を指定します。type-* ユーティリティは、ピクセル数で固定された見出しではなく、比率に基づく役割を表します。スケールの倍率は、モバイルで 1.15、タブレットで 1.2、デスクトップで 1.25 です。
このサンプルでは、ドキュメントに記載された basefont-23 の設定を採用しています。XS–SM では 18px、MD–XL では 21px、2XL では 23px です。コンパクトな埋め込み例でも表示が適切な比率になるよう、見出しには type-3 相当のサイズを使用しています。異なる基準値を選ぶ場合は、このプレビューのピクセル値をそのまま流用せず、適用後のサイズを再計算してください。
関連する仕様を確認する
## Decanter デザインシステム：流動的なコンテナとグリッド
### 画面端もレイアウトの一部
cc コンテナでは、画面端の余白を XS で 20px、SM で 30px、MD で 50px、LG で 80px、XL で 100px に設定しています。ビューポート幅が 1700px に達すると、コンテンツの最大幅 1500px に達するまで広がります。これは画面端のルールを明示した流動的なシステムであり、単に幅を 1200px に固定するコンテナではありません。
このサンプルは同じ画面端のルールに従い、MD 未満では2枚の編集カードを1列に並べます。カード内のコンテンツは通常の文書順に配置しているため、レイアウトを縦に積んだ場合も、キーボード操作の順序は読み進める順序と一致します。
関連する仕様を確認する
## Decanter デザインシステム：画面幅に応じて変化するスペーシング
### レスポンシブユーティリティは意図を持って使う
Decanter には、レスポンシブなマージンとパディング用の rs-m-* および rs-p-* ファミリーがあります。選択した段階の値は、ドキュメントに記載された範囲に応じて変わり、Tailwind の固定スペースの別名ではありません。このコード例では、カードの周囲に rs-p-1 を使い、アクションには通常の固定パディングを使っています。
このリファレンスを再現可能な状態に保つため、単独の独自解釈では、CSS に関する調整をすべてアプリケーションコードとして明示しています。ネイティブなビルドでは、同じ名前のルールを別途定義して競合させず、プリセットが生成するユーティリティを使用してください。ビルドスキャナーがクラス全体を認識できない場合は、"rs-p-" + size のような動的な断片を避けてください。
関連する仕様を確認する
## Decanter デザインシステム：アイデンティティカラーとインタラクティブカラー
### Cardinal と digital red は異なる役割を持つ
スタンフォード大学の主要な Cardinal red は #8c1515 です。Digital red #b1040e はインタラクティブ要素やアクセントに使う色で、大学のアイデンティティにおける Cardinal の代わりにはなりません。Digital blue #006cb8 はリンクに使用し、より濃いインタラクション時の色には #00548f を使用します。
このサンプルでは、展開式の詳細表示アクションに digital red を使い、背景には控えめなニュートラルカラーを使用しています。スタンフォード大学のワードマーク、シール、公式アイデンティティバーは含まれていません。大学で使用する場合は、認可されたアイデンティティ素材と大学のブランド規則に従ってください。技術リファレンスの使用は、大学からの推奨や承認を意味するものではありません。
関連する仕様を確認する
## Decanter デザインシステム：アクション付き編集カード
### コンポーネントを推測せず、コンテンツを構成する API
公式のカード例は、スペーシング、タイポグラフィ、背景、アクションのユーティリティを組み合わせたセマンティックな HTML です。この構成では、イベントのカテゴリとタイトルを分け、日付と会場をテキストで示し、実際のボタンで概要をその場に表示します。Decanter の Card prop API を独自に作り出してはいません。
実際の結果がページ遷移なら、タイトルをリンクにするのが適切です。ここで行うのはその場での展開なので、aria-expanded と aria-controls を設定したボタンでその動作を伝えます。プレビューには、大学のニュースをコピーせず、オリジナルのイベント名と概要を使用しています。
- イベントのタイトルをカードの見出しにする。
- 展開前から日時と場所が見えるようにする。
- 内容の開示にはボタンを使い、リンクは実際にページ遷移する場合にのみ使う。
関連する仕様を確認する
## Decanter デザインシステム：フィルターと開示
### どのレイアウトでもコンテンツを利用できる状態にする
トピックセレクターは、元の研究イベントカード2件を絞り込み、表示中の件数を更新します。一致する項目がない選択肢は、意図的に空の状態とリセット方法を示します。フィルターによって見出しの階層が変わったり、カードが選択式のフォーム項目に変わったりすることはありません。
各要約には個別のボタン状態があります。カードを閉じても、フォーカスは同じトリガーに残ります。フィルターを変更すると、非表示になった要約は閉じられるため、トピックに戻った際も一貫した概要から確認できます。コントロールの動作は、ユーティリティベースのデザイン手法に追加されたアプリケーション側の機能であり、パッケージに含まれるDecanter JavaScriptの機能ではありません。
関連する仕様を確認する
## Decanterデザインシステムのビルドと検証
### 生成クラスにはソースのスキャンが必要です
このセットアップはTailwind 3と、検証済みのDecanter 7.5.3プリセットを対象としています。入力ディレクティブ、コンテンツのglob、出力コマンド、オリジナルのカード構成が含まれています。生成されたスタイルシートをドキュメントのheadから読み込んでください。承認済みのフォントファイルは別途読み込むか、記載されているフォールバックをそのまま使用してください。
プレビューはこのツールチェーンではビルドされておらず、実装ラベルにもその旨が記載されています。本番環境で採用する場合は、完全なクラスセットを独自にコンパイルし、生成された出力を確認してください。特にメジャーバージョンのアップグレードで非推奨のユーティリティが変更される場合は、念入りな確認が必要です。
1. Decanterと互換性のあるTailwindのメジャーバージョンを固定します。
2. プリセットを登録し、実際のソースディレクトリをスキャンします。
3. Tailwindの3つのディレクティブレイヤーをコンパイルします。
4. 選択したベースフォント、画面端、カードのアクションを、記載されたブレークポイントで確認します。
関連する仕様を確認する
## Decanterデザインシステムのコンポーネント例
### オリジナルのエディトリアルカード
検証済みのユーティリティ群で構成したセマンティックなHTMLと、アプリケーション側で管理する開示ボタン。
```
Research conversation
Reading the changing coast
An original example event about field observations.
Show session details
```
コードリファレンス
### プリセット設定
Tailwind 3を固定して使用するための、最小限かつ完全な設定。
```
module.exports = {
presets: [require('decanter')],
content: ['./src/**/*.{html,js}']
};
```
コードリファレンス
### 単体で動作するサンプル一式
レイアウト、操作要素、初期化処理を含むドキュメント全体です。リンク先のサンプルアーカイブを展開すると、このプレビューで使用する正確な相対パスのベンダーアセットが得られます。その後、HTTP経由で配信してください。
```
Decanter editorial composition RESEARCH CONVERSATIONS · ORIGINAL EXAMPLES
Ideas take shape in conversation. A compact editorial collection interpreting Decanter’s responsive type and screen-edge rules.
Topic All topics Environment Archives Astronomy 2 example events
ENVIRONMENT
Reading the changing coast 12 October · Fictional seminar room How field notes reveal changes that a single measurement cannot capture.
Show session details This original sample session compares written observations, sketches and repeat measurements. The conversation asks how researchers describe uncertainty when a landscape changes gradually.
ARCHIVES
The stories between records 19 October · Fictional reading room Exploring how context connects objects in a community archive.
Show session details This original example considers correspondence, oral history and catalogue descriptions together. It examines how a collection can preserve disagreement without erasing individual perspectives.
No events in this example topic Choose another topic or return to the full collection.
Show all topics Independent OpenDesign specimen. Original content, local font fallbacks and interpreted Decanter layout rules. No Stanford identity or real event listing.