# HarvardSites デザインシステム

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

イベントの内容はそのままに見せ方を比較できます。参加者向け情報は個別に、または一括で開けます。

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

HarvardSitesの公式な編集基準とコンポーネントの指針。公開資料では、設定可能なスタイルと要件が示されていますが、あらゆるサイトで使える公開版のCSSトークンパッケージがあるわけではありません。このプレビューでは、独自に設定した数値のレイアウト値と色を明示的に使用し、システムフォントを代替フォントとして指定しています。

### タイポグラフィの要件

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Number of typefaces | At most 2 | サンセリフ体を少なくとも1種類使用し、案内表示にはサンセリフ体を使う。 |
| Minimum text size | 1rem | キャプションや操作部のラベルを、ブラウザーの既定サイズより小さくしない。 |
| Required x-height reference | 8.3px ±5% at a 16px font size | 公式テーマの選定基準。代替フォントが要件に適合すると自動的に保証するものではありません。 |
| Text and heading alignment | Left or right according to language | テキストブロックを中央揃えや両端揃えにしない。 |
| Special effects | No outline, drop shadow, tracking or horizontal scaling | 書体の形状を保ち、イタリック体の使用は控えめにする。 |
### 利用可能なフォントの組み合わせ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Academic pairing | Baskerville + Source Sans Pro | 見出しと本文のフォントの組み合わせ。 |
| Content-heavy pairing | Merriweather + Roboto | サイトスタイルの選択とは別に設定。 |
| Single-family pairing | Inter + Inter | コンポーネントの構造には影響しません。 |
### サイトスタイルの選択肢

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Light & Elegant | Soft corners; slightly lifted imagery | 開放感のあるレイアウト。通常、枠線はありません。 |
| Bold & Compelling | Straight corners; borders and dividers | Hero以外にも眉見出しを使用できます。 |
| Friendly & Approachable | Rounded cards; pill buttons | 柔らかくグループ化された見せ方。 |
| What style does not change | Typography, color roles, keyboard behavior | これらは個別に設定するか、コンポーネント側で処理します。 |
### 画像の準備に関する指針

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Hero export width | Approximately 1920px | 表示幅の最大値に近いサイズで準備し、トリミングを確認してください。 |
| 50/50 Card export width | Approximately 800px | 注目アイテム1点のための文脈に合った画像。 |
| Vertical Card export width | Approximately 600px | 同じ優先度のアイテムカード。 |
| List thumbnail export width | Approximately 400px | 要約を中心とした一覧。 |
| Most image file sizes | Under 200KB | 実用的な推奨事項であり、プラットフォームで保証される厳密な上限ではありません。 |
| Formats | JPG photographs; PNG transparency/line art; SVG simple graphics | 元のコンテンツに合わせて選択してください。 |
### 独自のサンプル値 — 公式トークンではありません

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Body / headings | Arial / Georgia | ローカルの代替フォント。提供されているプラットフォームのフォントの組み合わせではありません。 |
| Text / accent / surface | #242424 / #653f3a / #f4f1ec | 独自のニュートラルカラーパレット。Harvardのカラー・トークン名ではありません。 |
| Outer width / mobile inset | 70rem / 1.25rem | アプリケーション側で設定した値。 |
| Spacing / layout switch | 1 / 1.5 / 2rem; 48rem breakpoint | 実装例の値であり、公開されているシステムのスケールではありません。 |
## HarvardSites デザインシステム完全ガイド

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

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

## HarvardSites デザインシステム — 編集者のためのプラットフォーム

### 実際のHarvardSites設定から始める

> 公開されているデザインシステムのサイトでは、再利用可能な編集用コンポーネントと、大学の各ウェブサイトで利用できる設定が紹介されています。harvard-design-systemという名前のパッケージや、インポート可能なReact APIが存在することを示すものではありません。権限を持つサイト編集者はプラットフォームのコンポーネントを組み立てます。独立した開発者は、同じCMSを実行しているかのように装うことなく、公開されているコンテンツのパターンを参考にできます。

まず決めるのはページの種類です。会議の1ページ案内には、概要、プログラム、セッション検索、参加者向けの補足情報が必要です。ここで紹介する設定例では、それぞれの要件を実際のHarvardSitesコンポーネントに対応づけています。単独で動作するHTMLは、架空のコンテンツと機関のアイデンティティを示す要素を使わずに、その構成を独立して紹介します。

関連する仕様を確認する

## HarvardSites デザインシステムのタイポグラフィと読みやすさ

### フォントの組み合わせとスタイルを分けて考える

このプラットフォームでは、見出しと本文の組み合わせとして、BaskervilleとSource Sans Pro、MerriweatherとRoboto、InterとInterの3種類を用意しています。これらはサイトスタイルとは別に選択します。ページのレイアウトを枠付きから角丸に変更しても、フォントが自動的に切り替わるわけではありません。

グラフィックデザイン基準では、使用する書体を2種類までとし、少なくとも1種類のサンセリフ体を使うこと、テキストサイズを1rem以上とすることを定めています。メニュー、操作部、ラベルなどの案内要素にはサンセリフ体を使用します。公開されているx-heightの基準は、16pxで設定した場合に8.3px ±5%です。これは単に読みやすいフォントを推奨するより、具体的な基準です。このサンプルではArialとGeorgiaを表示用の代替フォントとして使っていますが、プラットフォームで提供されるフォントの組み合わせであることや、この基準への正式な適合性を主張するものではありません。

関連する仕様を確認する

### 配置も基準の一部

テキストブロックと見出しは、中央揃えや両端揃えではなく、読み進める方向に沿って配置します。リンク以外のテキストには下線を付けません。見出しは明確にし、強調にはウェイトを使います。文字を引き伸ばしたり、輪郭線を付けたり、文字間隔を大きく広げたりして、ディスプレイ向けの装飾を作らないでください。そのためプレビューでは、すべてのラベルを1rem以上に保ち、イベント紹介を左揃えにしています。

関連する仕様を確認する

## HarvardSites デザインシステム 独立した3つのスタイル選択肢

### フレーム、色、タイポグラフィはそれぞれ別の設定です

Light & Elegantは、ゆとりのあるセクション、控えめな角丸、少しずらして配置した画像が特徴です。Bold & Compellingは、直線的なエッジ、輪郭線、区切り線を際立たせます。Friendly & Approachableは、角丸のグループ化とピル型ボタンを使います。これらは、同じコンテンツとコンポーネント構造の視覚的な枠組みを変えるものです。

このサンプルではレイアウトスタイルを選択でき、テキスト、アコーディオンの状態、フォーカスの挙動を変えずに違いを確認できます。HarvardSitesのスタイルシートを再現するものではなく、独自のCSSを使って、文書化された視覚表現を近似しています。特に、枠線の幅と角丸はこのアプリケーション独自の選択であり、HarvardSitesのトークンから抽出した値ではありません。

関連する仕様を確認する

### 役割に応じて色を割り当てる

HarvardSitesでは、テキスト、背景、ボタン、アクセントの役割が、ライトとダークそれぞれの対応関係とともに説明されています。パレットが異なっても、これらの関係性は一貫して保てます。すべてのサイトに適用される必須の16進カラーコード一式は、公開リファレンスで定められていません。そのためプレビューでは、ニュートラルなインクカラー、ブラウンのアクセント、暖色系の背景を独自の値として示し、Harvardのブランドトークンとは呼んでいません。

関連する仕様を確認する

## HarvardSites デザインシステム イベントの1ページを構成する

### 主要なスケジュールを見やすく保つ

HeroまたはSection Headingでイベントを紹介し、その後にスケジュールをインラインの表で示します。公式の1ページ構成ガイドでは、モバイルで読みやすくするため、セルの文言を簡潔にし、時刻の表記を統一し、列数を抑えることを推奨しています。このサンプルではTime列とSession列を使い、会場やアクセスに関する情報は、5列に詰め込むのではなく、表の上または下に配置しています。

補足的な実用情報にはアコーディオンが適しています。ただし、参加資格、会場へのアクセス、キャンセル、締め切りなどの重要情報は、閉じたテキストが見落とされる可能性があるため、常に表示しておきます。単独のイベントなら簡潔で完結したページにできます。要旨が長く、複数のトラックが並行する大規模なプログラムでは、開閉項目を延々と入れ子にするのではなく、詳細ページへのリンクを用意します。

- 目的と概要を伝えるには、HeroまたはSection Headingを使います。

- 参加者が時刻をひと目で比較できるように、表を使います。

- イベントやセッションの絞り込み検索が必要な場合は、タクソノミーに基づくListを使います。

関連する仕様を確認する

## HarvardSites デザインシステム 適切なカード構成を選ぶ

### 単独の注目コンテンツと、複数項目の一覧は異なります

50/50 Cardは、画像またはテキスト領域と説明文を組み合わせます。文書化されているフィールドには、画像、キャプション、任意のアイブロウ、見出し、説明、行動喚起リンクが含まれます。特に目立たせたいストーリーやイベント1件に使い、同じ重要度の項目を複数示す場合はVertical Cards、手早い操作を案内する場合はButton-Style Cardsを使います。

50/50 Cardが効果を発揮するには、十分なスペースが必要です。ガイドでは、狭いサイドナビゲーション領域に無理に収めないこと、また装飾用のストック画像ではなく、意味のある画像を使うことを推奨しています。このサンプルでは、公式の例にもあるテキストのみの左右分割レイアウトを使い、一方に短いテーマ、もう一方に説明とスケジュールへのリンクを配置しています。これにより、架空のキャンパス写真を実際のハーバードの風景と誤解させずに済みます。

関連する仕様を確認する

## HarvardSites デザインシステム 画像サイズと代替テキスト

### コンポーネントに合わせて素材を準備する

公式の画像ガイドでは、Hero画像は約1920px、50/50 Cardは800px、Vertical Cardsは600px、リストのサムネイルは400pxを目安に書き出すことを推奨しています。これらは準備時のおおよその目標値であり、CSSの表示幅を固定するものではありません。多くのファイルを200KB未満に抑え、写真にはJPG、透過や線画が必要な場合はPNG、シンプルな図にはSVGを使うことも推奨しています。

情報を伝える画像には内容に即した代替テキストを付け、画像とともに表示すべき情報やクレジットがある場合はキャプションを使います。会場の地図には、視覚的な情報だけでなく、テキストによる道順や同等の場所の説明も必要です。トリミングを変えると、文章で言及している人物、物、ラベルが見切れることがあります。デスクトップ向けの横長トリミングですべての端末に対応できると思い込まず、アップロード後に実際の狭い画面レイアウトを確認してください。

関連する仕様を確認する

## HarvardSites デザインシステム アコーディオンの動作と操作

### 内容がわかる明確な名前を付けた補足情報

HarvardSitesでは、開くとほかの項目が閉じるアコーディオンと、各セクションの一括開閉コントロールを備えた、開いた状態を維持できるアコーディオンの両方が説明されています。この例では、参加者が移動情報と準備に関する注意事項を同時に読めるよう、項目ごとに独立して開閉し、開いた状態を維持できる動作を選んでいます。各見出しからは、パネルを開かなくても、隠れている内容がわかります。

ここでは、独立した実装のためにネイティブのdetailsとsummaryを使っています。これはHarvardSitesが生成するマークアップを示すものではありません。「すべて開く」と「すべて閉じる」ボタンは、すべてのdetails.openプロパティを更新します。各summaryでは、ブラウザー標準のキーボード操作が維持されます。アコーディオンを入れ子にする必要はなく、必須情報はこのグループの外に配置します。

```
<!-- Independent HTML interpretation, not HarvardSites CMS output. -->
<div aria-label="Attendee information">
  <button type="button" id="open-all">Open all sections</button>
  <button type="button" id="close-all">Close all sections</button>
  <details><summary>What will I need?</summary>
    <p>Bring a notebook. The fictional workshop supplies all reading material.</p>
  </details>
  <details><summary>Can I join part of the day?</summary>
    <p>The example schedule lets visitors choose either morning or afternoon sessions.</p>
  </details>
</div>
<script>
const panels = [...document.querySelectorAll('details')];
document.querySelector('#open-all').addEventListener('click', () => {
  panels.forEach(panel => { panel.open = true; });
});
document.querySelector('#close-all').addEventListener('click', () => {
  panels.forEach(panel => { panel.open = false; });
});
</script>
```

コードリファレンス

関連する仕様を確認する

## HarvardSites デザインシステム 実際の編集ワークフロー

### 最初に設定し、一貫性を保って組み立てる

権限のあるHarvardSitesプロジェクトでイベントページを作成する前に、承認済みのサイトスタイル、フォントの組み合わせ、色の役割を選択します。独立したデモHTMLをエディターに貼り付け、独自のスクリプトが実行されると期待するのではなく、プラットフォームに用意された既存のコンポーネントを使います。利用できるエディターの操作項目は、提供されたサイトによって異なります。この手順では、設定画面の内容を創作せず、文書化された選択肢のみを示します。

デモのスタイルセレクターが変えるのは、視覚的な枠組みだけです。参加者向けのパネルを2つとも開いてからスタイルを変更し、開いた状態が保たれることを確認します。次にすべて閉じ、キーボードで1つを再び開きます。これは、表示スタイルを変えても読者の位置やコンテンツモデルが失われたり変わったりしないことを確認するための、便利な継続性チェックです。

1. 確認済みのイベント名、日時、会場、アジェンダ、アクセス情報、および更新の責任者を用意します。

2. ドキュメントに記載されたコンポーネントを使って、イントロダクション、簡潔なアジェンダ表、補足アコーディオンを作成します。

3. 狭い画面でのレイアウトとキーボード操作をプレビューし、登録リンクが実際に承認された遷移先につながることを確認します。

関連する仕様を確認する

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

### 開いた状態を維持する参加者情報

全項目を開く／閉じる操作を含む、ドキュメントに記載されたアコーディオンの動作を、独立したセマンティックなHTMLで実装します。

```
<!-- Independent HTML interpretation, not HarvardSites CMS output. -->
<div aria-label="Attendee information">
  <button type="button" id="open-all">Open all sections</button>
  <button type="button" id="close-all">Close all sections</button>
  <details><summary>What will I need?</summary>
    <p>Bring a notebook. The fictional workshop supplies all reading material.</p>
  </details>
  <details><summary>Can I join part of the day?</summary>
    <p>The example schedule lets visitors choose either morning or afternoon sessions.</p>
  </details>
</div>
<script>
const panels = [...document.querySelectorAll('details')];
document.querySelector('#open-all').addEventListener('click', () => {
  panels.forEach(panel => { panel.open = true; });
});
document.querySelector('#close-all').addEventListener('click', () => {
  panels.forEach(panel => { panel.open = false; });
});
</script>
```

コードリファレンス

- これはHarvardSitesが生成するマークアップでも、公式SDKでもありません。

- 重要なアクセス情報は、折りたたみパネルの外に常に表示してください。

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

レイアウト、操作要素、初期化処理を含むドキュメント全体です。リンク先のサンプルアーカイブを展開すると、このプレビューで使用する正確な相対パスのベンダーアセットが得られます。その後、HTTP経由で配信してください。

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Research forum — HarvardSites pattern interpretation</title><style>*{box-sizing:border-box}body{margin:0;font:1rem/1.6 Arial,sans-serif;color:#242424;background:#fff}main{max-width:70rem;margin:auto;padding:2rem 1.25rem}.config{padding:1rem 0;border-bottom:1px solid #b9b4ac;margin-bottom:2rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}select,button{font:inherit;color:inherit;background:white;border:1px solid #615a51;padding:.65rem .9rem}button{cursor:pointer}h1,h2{font-family:Georgia,serif;line-height:1.15}h1{font-size:clamp(2.5rem,6vw,4rem);max-width:15ch;margin:1rem 0}h2{font-size:1.75rem}a{color:#653f3a;text-underline-offset:4px}a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #005fcc;outline-offset:4px}.hero{padding-bottom:2rem;border-bottom:1px solid #b9b4ac}.meta{color:#653f3a;font-weight:bold}.split{display:grid;gap:1.5rem;margin:2rem 0;padding:1.5rem;background:#f4f1ec}.split h2{margin:0}.split p{margin:0 0 1rem}table{width:100%;border-collapse:collapse;margin:1rem 0 2rem}caption{text-align:left;font-weight:bold;margin-bottom:1rem}th,td{text-align:left;padding:1rem .5rem;border-bottom:1px solid #b9b4ac;vertical-align:top}th:first-child,td:first-child{width:7rem}.controls{display:flex;flex-wrap:wrap;gap:.75rem;margin:1rem 0}details{border-top:1px solid #b9b4ac;padding:1rem 0}details:last-of-type{border-bottom:1px solid #b9b4ac}summary{font-weight:bold;cursor:pointer}details p{max-width:55ch;margin-bottom:0}.note{margin:2rem 0 0;padding:1rem;border-left:4px solid #653f3a;background:#f4f1ec}footer{padding-top:2rem;margin-top:2rem;border-top:1px solid #b9b4ac}body[data-style="bold"] .split{border:2px solid #242424}body[data-style="friendly"] .split{border-radius:1.5rem}body[data-style="friendly"] button{border-radius:3rem}body[data-style="light"] .split{border-radius:.3rem;background:#faf9f6}@media(min-width:48rem){.split{grid-template-columns:1fr 1fr;padding:2rem}.body-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem}main{padding:2.5rem}}</style></head><body data-style="bold"><main><div class="config"><label for="style">Explore framing</label><select id="style"><option value="bold">Bold &amp; Compelling interpretation</option><option value="light">Light &amp; Elegant interpretation</option><option value="friendly">Friendly &amp; Approachable interpretation</option></select></div><header class="hero"><p class="meta">An original academic event example</p><h1>Ideas across disciplines</h1><p>A one-day forum on how researchers turn shared questions into new methods.</p><p><strong>Friday, 16 October · 9:30–16:00 · Example Learning Centre</strong></p><p>Fictional programme. No registration or university affiliation is implied.</p></header><section class="split" aria-labelledby="theme"><h2 id="theme">One question.<br>Many ways of seeing.</h2><div><p>Historians, scientists, and designers compare the evidence they work with and the assumptions they bring to it.</p><a href="#agenda">Explore the day’s programme →</a></div></section><div class="body-grid"><section id="agenda" tabindex="-1"><h2>The day at a glance</h2><table><caption>Illustrative programme</caption><thead><tr><th scope="col">Time</th><th scope="col">Session</th></tr></thead><tbody><tr><td>09:30</td><td><strong>Welcome and questions</strong><br>Shared framing for the day</td></tr><tr><td>10:00</td><td><strong>Working with evidence</strong><br>A conversation across disciplines</td></tr><tr><td>13:30</td><td><strong>Methods in practice</strong><br>Small-group demonstrations</td></tr><tr><td>15:30</td><td><strong>What changes next?</strong><br>Reflection and closing discussion</td></tr></tbody></table></section><section><h2>Attendee information</h2><div class="controls"><button id="open-all" type="button">Open all sections</button><button id="close-all" type="button">Close all sections</button></div><details><summary>What will I need?</summary><p>Bring a notebook. All reading material is provided in this fictional programme, and no specialist preparation is required.</p></details><details><summary>Can I join part of the day?</summary><p>The example schedule has morning and afternoon sessions. A real event page should state whether individual sessions require separate registration.</p></details><p class="note"><strong>Access information stays visible.</strong><br>A real event must provide verified venue access details and an accommodation contact here, outside collapsed panels.</p></section></div><footer>Independent interpretation of HarvardSites editorial guidance. Original layout values and colors; Arial and Georgia fallbacks. This is not a HarvardSites CMS page.</footer></main><script>document.querySelector('#style').addEventListener('change',e=>document.body.dataset.style=e.target.value);const panels=[...document.querySelectorAll('details')];document.querySelector('#open-all').addEventListener('click',()=>panels.forEach(p=>p.open=true));document.querySelector('#close-all').addEventListener('click',()=>panels.forEach(p=>p.open=false));</script></body></html>
```

コードリファレンス

- 完全なサンプルは「ソース」からダウンロードできます。READMEに正確なローカル起動コマンドが記載されています。

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

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

### 実装の出発点

HarvardSitesの認可された編集者向けに、具体的な設定と構成手順を示します。公開パッケージAPIや、未確認のトークンスケールは作成していません。「Sources」にある完全な動作例のZIPには、正確なプレビュー用依存関係とドキュメント全体も含まれています。展開後、そのディレクトリで python3 -m http.server 8080 を実行し、http://localhost:8080/harvard-sites.html を開いてください。モジュールを使った例を file:// から直接開かないでください。

```
HarvardSites editorial configuration recipe (not a package command)

1. In an authorized HarvardSites site, choose an available site style:
   Bold & Compelling for clearly framed conference sections.
2. Choose typography separately:
   Baskerville + Source Sans Pro, Merriweather + Roboto, or Inter + Inter.
3. Apply the site's approved color roles; do not hand-color every card.
4. Compose an event page from available platform components:
   Section Heading/Hero -> inline schedule table -> attendee Accordion.
5. Use a 50/50 Card for one featured event or a venue map with text;
   use Vertical Cards or a taxonomy-driven List for equal event records.
6. Add descriptive headings, image alternatives, verified times and locations.
   Preview mobile layout and keyboard interactions before publication.

Standalone demonstration: open the supplied harvard-sites.html.
It uses ordinary HTML, CSS and JavaScript, not the HarvardSites runtime.
```

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

```
認可されたHarvardSitesの研究イベントページを作成します。Section HeadingまたはHero、コンパクトな2列のスケジュール表、開いた状態を維持する参加者用Accordionを組み合わせます。サイトスタイル、承認済みフォントの組み合わせ、色の役割はそれぞれ独立して選択してください。重要なアクセス情報と時間情報は常に見えるようにします。テキストは最小1rem、書体は2種類以内とし、コントロールにはサンセリフ体を使い、英語の本文は左揃えにします。HarvardSitesのnpmパッケージ、公開トークンスケール、編集者向けUIを作り上げないでください。独立したプロトタイプを実装する場合は、そのCSSの値が独自のものであることを明記し、公式CMSの出力だと主張しないでください。
```

## HarvardSites デザインシステム参考資料と対象範囲

HarvardSitesに関する編集上の参考資料と、独立した架空のイベントプロトタイプです。公式の機関ロゴ、プラットフォームへのアクセス、本番環境の設定は、引き続きHarvardの管理下にあります。予約、提携関係、SDKとの互換性は一切主張していません。

- グラフィックデザインの基準 書体の上限、最小文字サイズ、配置、案内表示。

- フォントの組み合わせ ドキュメントに記載された見出しと本文の組み合わせ3種。

- サイトスタイル タイポグラフィや色とは独立した、フレーミングの選択肢。

- イベントの1ページ案内 アジェンダ、セッション、参加者情報に使用するコンポーネント。

- アコーディオン 補足コンテンツの構成と、独立した開閉動作。

- 画像の準備 書き出しサイズの目安と形式に関するガイダンス。

- 動作サンプル一式をダウンロード 完全なHTML、ローカルのCSS／JavaScript依存関係、付属ライセンス、正確な起動手順を含むZIPです。ビルド手順は不要です。

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

### Helsinki

ネイティブのHDS選択グループ、意味に即したフィードバックカラー、相互にリンクしたエラーサマリーを組み合わせ、確認と修正まで完了できるローカルなフローを構築します。

### Rivet

Rivetの実際のトークンスケール、HTMLのコンポーネント構造、キーボード操作への標準対応を活用して、大学のページを作成します。アクセシブルな来場案内タブを備えた、コンパクトなワークショップ詳細ページをご覧ください。

### Digital Agency デザインシステム

DADSのテキストロール、セマンティックなトークン、ネイティブなHTMLコンポーネント構造を使って、読みやすい日本語の行政サービス向けインターフェースを構築できます。形式エラー、該当なしの結果、確認可能なステータス記録を備えた、動作する受付番号検索をお試しください。


- [実装リファレンス](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums)
- [ソース](https://designsystem.harvardsites.harvard.edu/graphic-design)
- [ソース](https://designsystem.harvardsites.harvard.edu/typography-options)
- [ソース](https://designsystem.harvardsites.harvard.edu/site-styles)
- [ソース](https://designsystem.harvardsites.harvard.edu/choose-right-image-size-and-format)
- [関連する仕様を確認する](https://designsystem.harvardsites.harvard.edu/)
- [関連する仕様を確認する](https://designsystem.harvardsites.harvard.edu/graphic-design)
- [関連する仕様を確認する](https://designsystem.harvardsites.harvard.edu/site-styles)
- [関連する仕様を確認する](https://designsystem.harvardsites.harvard.edu/color-roles)
- [関連する仕様を確認する](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums)
- [関連する仕様を確認する](https://designsystem.harvardsites.harvard.edu/5050-card)
- [関連する仕様を確認する](https://designsystem.harvardsites.harvard.edu/choose-right-image-size-and-format)
- [コードリファレンス](https://designsystem.harvardsites.harvard.edu/accordion)
- [関連する仕様を確認する](https://designsystem.harvardsites.harvard.edu/accordion)
- [コードリファレンス](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums)
- [グラフィックデザインの基準 書体の上限、最小文字サイズ、配置、案内表示。](https://designsystem.harvardsites.harvard.edu/graphic-design)
- [フォントの組み合わせ ドキュメントに記載された見出しと本文の組み合わせ3種。](https://designsystem.harvardsites.harvard.edu/typography-options)
- [サイトスタイル タイポグラフィや色とは独立した、フレーミングの選択肢。](https://designsystem.harvardsites.harvard.edu/site-styles)
- [イベントの1ページ案内 アジェンダ、セッション、参加者情報に使用するコンポーネント。](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums)
- [アコーディオン 補足コンテンツの構成と、独立した開閉動作。](https://designsystem.harvardsites.harvard.edu/accordion)
- [画像の準備 書き出しサイズの目安と形式に関するガイダンス。](https://designsystem.harvardsites.harvard.edu/choose-right-image-size-and-format)