# Scottish Government デザインシステム

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

長いメモを入力し、文字数制限内に戻して、ローカルでプレビューし、編集してからリセットしてください。

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

Scottish Government Design System 4.3.0で公開されたCSSとJavaScriptに基づき、現行の公式なタイポグラフィ、色、グリッドのガイダンスを掲載しています。ネイティブのCharacterCountとスタイルはプレビューで動作します。Arialは独立したサンプルで明示的に指定したフォールバックです。Scottish Governmentの各局ではRobotoを使用する必要があります。現行のパッケージアセットは以前のインストール例とは異なります。

### レスポンシブなタイポグラフィ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Body | 16/24px small →19/32px large | Regular400。ネイティブの大サイズスタイルは48remから始まります。 |
| H1 | 30/40px →44/56px | Bold700。 |
| H2 / H3 | 22/32 →30/40px;19/24 →22/32px | 意味に沿った見出しレベルを使用してください。ds_h3は見た目を変更できますが、見出しレベルは変わりません。 |
| H4 / H5 | 16/24 →19/32px;14/24 →16/24px | Bold700。 |
| Lead | 19/32px →24/40px | Light300。各ページのリード文は簡潔にひとつにします。 |
| Font | Roboto | Scottish Governmentの各局／政策分野では必須です。独立したデモではArialを明示的に使用しています。 |
### Sassの色の役割

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| $ds_colour__brand / __link | #0065bd | プライマリーブルー。リンクのホバー色は#00437e。 |
| $ds_colour__text | #1a1a1a | セカンダリーテキストは#5e5e5e。 |
| $ds_colour__focus / --background | #1a1a1a / #fdd522 | ブランドテーマを調整する場合も、これらのフォーカス用の役割を維持してください。 |
| $ds_colour__state--negative | #d32205 | 文字数上限超過時のフィールド／エラーメッセージ。 |
| $ds_colour__state--positive | #1a7032 | 肯定的なメッセージ。ローカルのテキストが送信されたことを示すものではありません。 |
| $ds_colour__border | #b3b3b3 | 濃色の#1a1a1aと淡色の#ebebebの代替色。 |
### レスポンシブな間隔ユーティリティ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| ds_!_margin-bottom--1 / --2 / --3 | 8 /16 /24px | 48remを境に変化しません。 |
| ds_!_margin-bottom--4 | 24px →32px | 48remで小から大に切り替わります。 |
| ds_!_margin-bottom--5 / --6 | 32→40px /40→48px | 固定値をひとつ使うのではなく、レスポンシブに設定します。 |
| ds_!_margin-bottom--7 / --8 / --9 | 40→56px /48→64px /56→72px | 大きな間隔に使い、最大の間隔をどこにでも適用するのは避けてください。 |
### グリッドと使用可能な内側幅

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Viewport thresholds | 480,768,992,1200px | カラム数は2→6→12と増え、その後は12のままです。 |
| Content width at medium/large/xl | 736 /928 /1120px | 公開されているグリッドの内側幅。ラッパーボックスの幅とは異なります。 |
| Native ds_wrapper box | 768 /960 /1152px | リリースCSSでは、左右それぞれに16pxのパディングを含みます。 |
| Gutter / side padding | 32px /16px | 768px未満では、ラッパーの幅は可変です。 |
| Reading width in specimen | 42rem maximum | 公式の共通トークンではなく、ネイティブラッパー内でアプリケーション側が選択する設定です。 |
### CharacterCountの仕様

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Root | data-module="ds-character-count" | ネイティブのinputまたはtextareaを内包します。 |
| Limit | maxlength="200" | 初期化時に読み取られて削除されます。上限を超えたテキストも編集できます。 |
| Alternative | data-maxlength on root | JavaScriptが利用できない場合、ネイティブのmaxlengthによる代替はありません。 |
| Threshold | data-threshold="80" | 上限×.8に丸めて設定します。上限が200の場合、160文字で表示されます。 |
| Error state | ds_input--error;aria-invalid="true" | カウントが負の間に適用され、表示される超過文字数と組み合わせて使います。 |
| Announcements | Separate hidden message;1000ms delay | aria-describedbyは既存のヒントを保持し、生成されたメッセージIDを追加します。 |
| Counting unit | JavaScript value.length | UTF-16コード単位で数えます。絵文字を書記素単位で数えるとは保証しないでください。 |
## Scottish Government デザインシステム 完全ガイド

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

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

## Scottish Government デザインシステム 実用的なテキスト入力リファレンス

### 作業内容を復元できるようにする

> ここで特徴的な操作は、元の文章を損なわずに文字数を調整できることです。ユーザーは長いアクセス上の要望を貼り付け、どれだけ編集が必要かを確認しながら、文章をすべて残して短くできます。標準の文字数カウンターが、残り文字数の表示、上限超過時のスタイル、支援技術向けメッセージの遅延表示を担います。要望をプレビューできるかどうかは、アプリケーション側で別途判定します。

これはオリジナルのワークショップ用メモの例であり、スコットランド政府のサービスでも、医療情報を求めるものでもありません。本人確認用の画像や、データの保存・送信機能はありません。入力欄のヒントでは、実用的なアクセス上の要望を記入するよう促し、個人的な詳細情報は避けるよう伝えています。これにより、公式の手続きを模倣することなく、タスクの内容を理解できます。

関連する仕様を確認する

## Scottish Government デザインシステム Robotoとレスポンシブな階層

### 公開されている寸法を維持する

スコットランド政府の各局と政策分野では、Robotoの使用が必須です。ほかの組織がこのシステムを採用する場合は、読みやすい別のフォントを使用できますが、サイズと行の高さのルールを維持し、表示をテストしてください。単独で使用するこの例では、Arialをフォールバックとして明記しています。Webフォントが読み込めない場合にRobotoが使われるとはしていません。

本文のサイズは16/24pxから19/32pxに、メインタイトルは30/40pxから44/56pxに変わります。どちらの変更も、標準の大画面用スタイルシートで行われます。ds_h 3クラスを使うと、第3レベルの意味的な見出しを必要とせずに、見た目のサイズを変更できます。この違いは、短いフォームでセクションタイトルを小さくしたい一方、文書のアウトラインに不自然な階層を加えたくない場合に重要です。

関連する仕様を確認する

## Scottish Government デザインシステム 明確なフォーカス表示

### フォーカス、エラー、完了を区別する

青はブランドとリンクの基本色、黒はテキスト色、黄色はフォーカス表示に使われます。これらはSassで名前が付けられた設定であり、CSS個のカスタムプロパティを独自に作り上げたものではありません。ブランドの調整は、システムの設定モジュールを通じて読み込み前に行います。公式ガイダンスでは、ほかのブランドカラーを変更する場合も、フォーカス用の配色は維持します。

文字数が上限を超えた場合に限り、カウンターにエラーを示す赤色が使われます。アプリケーション側で必須項目が空の場合にも、同じエラーの色を使えますが、メッセージでは文字数の問題ではなく、回答が未入力であることを説明してください。プレビューで、リモートへの送信が成功したかのように緑色を使って示すことはありません。

- テキストエリアと操作ボタンに、キーボードフォーカスが視認できるアウトラインを表示します。

- 文字数の超過は、赤い枠線だけに頼らず、テキストでも説明します。

- エラーサマリーと入力欄のヒントを、固定のフィールドIDに関連付けます。

関連する仕様を確認する

## Scottish Government デザインシステム ラッパーの幅と余白

### 外側と内側の幅を混同しない

公式のグリッド表には、中、大、特大のブレークポイントにおけるコンテンツの内側の幅として、736、928、1120pxが記載されています。それぞれに対応する標準のラッパーボックスの幅は768、960、1152pxです。各ボックスには左右16pxのパディングが含まれるためです。この違いを把握しておけば、採用時に2種類の幅を入れ子にして、レイアウトが意図せず二重に狭くなるのを防げます。

プレビューでは、標準のラッパー内に最大幅42remの読みやすいテキスト列を配置しています。この最大幅は短いフォームに適したアプリケーション側の設定であり、システムの新たな設定ではありません。768px未満ではラッパーが画面幅に合わせて伸縮し、左右に同じ16pxの余白を設けて、テキストエリアが画面端に接しないようにしています。

余白ユーティリティはレスポンシブに変化します。たとえば、ds_!_margin-bottom--4は48remで24pxから32pxに広がり、より大きなレベルでも同様に増加します。参照資料には両方の値が示されているため、デスクトップのスクリーンショットから、余白が常に一定だと誤解することはありません。

関連する仕様を確認する

## Scottish Government デザインシステム 標準の文字数カウンター付き入力欄

### まず標準のテキストエリアを使う

ds_questionルート要素にはdata-moduleと、任意の割合しきい値を指定します。関連付けられたラベルとヒントは、一般的なアクセシブルなHTMLです。maxlengthを指定したテキストエリアを使えば、JavaScriptなしでも役立つフォールバックになります。機能を拡張すると、コンポーネントはその値を読み取ってハードリミットを解除するため、貼り付けたテキストが気付かないうちに切り捨てられることはありません。

上限が200文字で、しきい値が80%の場合、160文字に達するとカウンターが表示されます。公開されているコンポーネントのページでは、サンプル文と250文字のコード例で異なる数値が使われているため、この例では上限を統一しています。JavaScriptがなくても、表示されるヒントに上限が記載され、標準のmaxlengthが適用されます。

```
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>
```

コードリファレンス

関連する仕様を確認する

## Scottish Government デザインシステム 標準コンポーネントが担う処理

### メッセージ、表示タイミング、文字数の計算

バージョン管理された実装では、aria-hiddenを指定した画面表示用メッセージと、支援技術向けの非表示メッセージを別々に作成します。作成者が記述したヒントを置き換えずに、関連するIDを既存のaria-describedbyに追加します。入力中のフィードバックが先に完了するよう、非表示メッセージの更新を1000ms遅らせます。

実際の文字数はJavaScript string.value.lengthから取得され、UTF-16のコード単位で数えられます。基本多言語面外の記号は2単位を消費する場合があり、結合された絵文字はさらに多くの単位を使うことがあります。異なる文字数の基準が必要なサービスでは、このコンポーネントが人間の感覚に基づく文字数を数えると期待せず、カウンターとサーバー側の検証で同じ基準を用いてください。

このコンポーネントはinputイベントを監視します。アプリケーション側でサンプルを入力したり、プログラムからフィールドを消去したりする場合は、inputイベントもディスパッチする必要があります。デモのサンプル入力とリセットの操作では、これを行っています。ソース内のコメントには音声認識のポーリングについて記載がありますが、確認した実装ではポーリング間隔を設定していません。そのため、このガイドではその動作をうたっていません。

関連する仕様を確認する

## Scottish Government デザインシステム 現行リリースのパスを使う

### モジュールの読み込みとスコープを限定した初期化

現行パッケージは@scottish-government/design-systemです。バージョン4.3.0では、コンパイル済みスタイルシートはdist/css/design-system.min.cssに配置されています。一方、以前のインストール手順には、依然としてdist/styles/main.cssへの参照が残っています。この手順では、実際に公開されているアセットを使用します。スクリプトはESモジュールとしてエクスポートされるため、通常のクラシックスクリプトタグではなく、type="module"を指定して読み込んでください。

このフィールド専用のCharacterCountインスタンスを作成し、initを呼び出します。複数のコンポーネントがあるページではDS.initAllも利用できますが、このサンプルでは必要なカウンターだけを初期化します。追加の分析サービスは設定していません。サーバー側の検証はライブラリとは別に行います。カウンターは入力を助ける機能であり、入力制限を強制するものではありません。

1. バージョンを4.3.0に固定したパッケージをインストールし、コンパイル済みのCSSとモジュールをローカルのアセットディレクトリにコピーします。

2. モジュールをインポートする前に、ラベル、ヒント、テキストエリアを含む構造をページに配置します。

3. カウンターを一度初期化したら、通常のinputイベントを使って、アプリケーションのプレビュー／リセット操作を接続します。

関連する仕様を確認する

## Scottish Government デザインシステム 上限超過後の復帰をテストする

### 空のフィールドだけをテストしない

上限未満から入力を始め、160文字を超えた後、さらに200文字を超えるテキストを貼り付けます。「文字数が多すぎます」というメッセージが表示され、aria-invalidがtrueになっても、テキストエリア内の全文が保持されることを確認します。上限未満まで文字数を減らし、エラークラスと無効状態の両方が解除されることを確認します。

アプリケーションの「プレビュー」操作では、空欄または上限を超えたメモに対して、関連付けられたエラーを表示して処理を中断します。有効なメモは、textContentを使ってローカルプレビューに表示します。そのため、入力したマークアップは解釈されず、テキストとして表示されます。「メモを編集」を選ぶと、入力内容を保持したまま同じテキストエリアに戻ります。「リセット」ではinputイベントを発生させて内容を消去するため、標準の文字数表示もリセットされます。

幅390pxでは、タイトルの折り返し、幅いっぱいのテキストエリア、ボタンの折り返し、エラー概要を確認します。幅の広い画面では、本文の行が必要以上に長くならないようにします。これらはこのサンプルの確認事項です。実際のサービスでは、最終的な利用環境に即したユーザー調査、フォントのテスト、支援技術を用いたレビューも必要です。

関連する仕様を確認する

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

### 入力内容を消さない文字数制限

ラベル、ヒント、テキストエリアと80%のしきい値を、段階的な機能強化で提供します。

```
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>
```

コードリファレンス

### 現行の4.3.0コンパイル済みアセット

バージョン確認済みのCSSパスとESモジュールによる初期化。

```
npm install --save-exact @scottish-government/design-system@4.3.0
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/

<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
  import DS from '/vendor/scot/design-system.js';
  const root = document.querySelector('[data-module="ds-character-count"]');
  new DS.components.CharacterCount(root).init();
  // Or DS.initAll() when the page uses multiple DS components.
</script>
```

コードリファレンス

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

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

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Scottish design system character count specimen</title><link rel="stylesheet" href="vendor/scot-4.3.0/dist/css/design-system.min.css"><style>body,button,input,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.reading{max-width:42rem}.eyebrow{border-top:4px solid #0065bd;padding-top:16px;color:#5e5e5e}.actions{display:flex;flex-wrap:wrap;gap:16px}.actions .ds_button{margin:0}.preview-text{white-space:pre-wrap;overflow-wrap:anywhere;border-left:4px solid #b3b3b3;padding-left:24px}[hidden]{display:none!important}</style><main class="ds_wrapper"><div class="reading"><p class="ds_small eyebrow">Independent specimen · Workshop access note</p><section id="entry"><h1>Tell us what would help</h1><p>Practice a short access note for a community workshop. This page does not save or send your text.</p><div id="error" class="ds_error-summary" tabindex="-1" hidden><h2 class="ds_error-summary__title">There is a problem</h2><p><a href="#access-note" id="error-link"></a></p></div><form id="form" novalidate><div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div><p class="ds_small">Use up to 200 characters. The count appears after 160.</p><div class="actions"><button class="ds_button" type="submit">Preview note</button><button class="ds_button ds_button--secondary" id="sample" type="button">Try a long example</button><button class="ds_button ds_button--secondary" id="reset" type="button">Reset</button></div></form></section><section id="preview" hidden><h1 tabindex="-1">Your note preview</h1><p id="result" class="preview-text"></p><p>No note has been sent. You can return to edit it.</p><button id="edit" class="ds_button ds_button--secondary">Edit note</button></section></div></main><script type="module">import DS from './vendor/scot-4.3.0/dist/scripts/design-system.js';const field=document.querySelector('[data-module="ds-character-count"]');new DS.components.CharacterCount(field).init();const input=document.querySelector('#access-note'),entry=document.querySelector('#entry'),preview=document.querySelector('#preview'),error=document.querySelector('#error');function setValue(value){input.value=value;input.dispatchEvent(new Event('input',{bubbles:true}));input.focus()}document.querySelector('#sample').onclick=()=>setValue('A clear route from the entrance to the workshop room would help me take part. Please describe where the quiet seating area is and whether instructions will be available in writing. I would also appreciate knowing where to find the nearest accessible entrance.');document.querySelector('#reset').onclick=()=>{setValue('');error.hidden=true};document.querySelector('#form').onsubmit=e=>{e.preventDefault();let message=!input.value.trim()?'Enter a short access note.':input.value.length>200?'Shorten your note to 200 characters or fewer.':'';if(message){document.querySelector('#error-link').textContent=message;error.hidden=false;error.focus();return}error.hidden=true;document.querySelector('#result').textContent=input.value;entry.hidden=true;preview.hidden=false;preview.querySelector('h1').focus()};document.querySelector('#edit').onclick=()=>{entry.hidden=false;preview.hidden=true;input.focus()};window.demoReady=true;</script></html>
```

コードリファレンス

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

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

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

### 実装の出発点

ローカルデモでは、実際の4.3.0 CSSとCharacterCountモジュールを使用します。フォントのフォールバックは明示的に指定しており、インストールページに記載された古いdist/stylesパスは使用しません。「Sources」にある動作確認済みの完全なサンプルZIPには、プレビューに必要な依存関係とドキュメント全体も含まれています。ZIPを展開し、そのディレクトリでpython3 -m http.server 8080を実行してから、http://localhost:8080/scottish-government.htmlを開きます。モジュールを使うサンプルをfile://経由で開かないでください。

```
npm install --save-exact @scottish-government/design-system@4.3.0
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/

<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
  import DS from '/vendor/scot/design-system.js';
  const root = document.querySelector('[data-module="ds-character-count"]');
  new DS.components.CharacterCount(root).init();
  // Or DS.initAll() when the page uses multiple DS components.
</script>
```

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

```
Scottish Government Design System 4.3.0のCharacterCountコンポーネントを使用して、独立した参加支援メモ用フォームを作成します。検証済みのdist/css/design-system.min.cssとESモジュールのdist/scripts/design-system.jsのパスをバージョン固定で指定します。200文字のテキストエリア、80%のしきい値、関連付けられたヒント、コンポーネントを対象とした初期化を用意します。上限を超えた貼り付けテキストを保持し、標準の文字数表示とARIAの更新はライブラリに任せます。これとは別に、ローカルでの検証と、安全なテキストのみのプレビュー／編集／リセット機能を追加します。プログラムからサンプルを入力またはリセットする際は、inputイベントを発生させます。公開されているレスポンシブな文字組みとスペーシングを使用し、フォントの選択を明示します。公式のブランド表現や、実在しない送信機能は追加しません。
```

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

独立した実装例です。Scottish Governmentの各局ではRobotoの使用が必須ですが、この公式ブランドを使用しないサンプルでは、Arialをフォールバックとして明示しています。テキストはオリジナルで、保存や送信、公式な関係はありません。コードのライセンスと政府のグラフィックアセットの利用許可は別個のものです。

- 種類 タイポグラフィとフォントの採用ルール。

- カラー Sassのカラーパレットの役割とテーマの境界。

- グリッド 内側のグリッド幅、列、ガター。

- 文字数 入力内容を保持する文字数制限としきい値の動作。

- JavaScript 初期化APIと段階的な機能強化。

- インストール パッケージのインストール方法。現在公開されているパスと照合してください。

- フォーカス キーボードフォーカスを視覚的に示すための指針。

- 質問 質問をグループ化する構造。

- エラー エラーからの復帰とエラー概要に関する指針。

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

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

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

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

### Decanter

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

### Suomi.fi デザインシステム

Source Sans 3と明示的なスペーシングトークンを使い、書類選択から復帰できるパターンを取り入れて、フィンランドの公共サービス向けに読みやすいフォームを作成します。


- [実装リファレンス](https://designsystem.gov.scot/components/character-count)
- [ソース](https://designsystem.gov.scot/styles/typography)
- [ソース](https://designsystem.gov.scot/styles/colour)
- [ソース](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/dist/css/design-system.min.css)
- [ソース](https://designsystem.gov.scot/styles/column-grid)
- [ソース](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/src/components/character-count/character-count.ts)
- [関連する仕様を確認する](https://designsystem.gov.scot/components/character-count)
- [関連する仕様を確認する](https://designsystem.gov.scot/styles/typography)
- [関連する仕様を確認する](https://designsystem.gov.scot/styles/colour)
- [関連する仕様を確認する](https://designsystem.gov.scot/styles/column-grid)
- [コードリファレンス](https://designsystem.gov.scot/components/character-count)
- [関連する仕様を確認する](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/src/components/character-count/character-count.ts)
- [関連する仕様を確認する](https://designsystem.gov.scot/get-started/javascript)
- [関連する仕様を確認する](https://designsystem.gov.scot/components/error-summary)
- [コードリファレンス](https://designsystem.gov.scot/get-started/javascript)
- [種類 タイポグラフィとフォントの採用ルール。](https://designsystem.gov.scot/styles/typography)
- [カラー Sassのカラーパレットの役割とテーマの境界。](https://designsystem.gov.scot/styles/colour)
- [グリッド 内側のグリッド幅、列、ガター。](https://designsystem.gov.scot/styles/column-grid)
- [文字数 入力内容を保持する文字数制限としきい値の動作。](https://designsystem.gov.scot/components/character-count)
- [JavaScript 初期化APIと段階的な機能強化。](https://designsystem.gov.scot/get-started/javascript)
- [インストール パッケージのインストール方法。現在公開されているパスと照合してください。](https://designsystem.gov.scot/get-started/installation)
- [フォーカス キーボードフォーカスを視覚的に示すための指針。](https://designsystem.gov.scot/styles/focus-states)
- [質問 質問をグループ化する構造。](https://designsystem.gov.scot/components/question)
- [エラー エラーからの復帰とエラー概要に関する指針。](https://designsystem.gov.scot/components/error-summary)