余白の取り方
余白は要素間の関係性を視覚的に示す手段。近いものは関連があり、遠いものは独立している。適切な余白でグルーピングを強化し、視線を誘導する。
基本的な考え方
2 つの法則を軸に余白を設計する。
近接の法則
関連する要素は近くに置き、無関係な要素とは大きな余白で離す。ラベルと入力フィールドの間隔は小さく、フィールドグループ同士の間隔はそれより大きくする。
外から内へ狭くなる
ページ外周の余白が最も大きく、コンテンツ内部に向かうにつれて余白は小さくなる。この原則でコンテンツのまとまりが際立ち、視線が内側へ引き込まれる。
マージン（要素と要素の間）
同じ意味階層の要素には同じ大きさのマージンを使う。
垂直方向
| トークン | 値 | 用途 |
|---|---|---|
--spacing-xl | 48px | セクション間（大きなトピックの区切り） |
--spacing-m | 32px | セクション内の要素グループ間 |
--spacing-s | 24px | 見出しとその直下コンテンツの間 |
--spacing-xs | 16px | フォームグループ間、RadioButton/Checkbox 行間 |
--spacing-xxs | 8px | ラベルと入力欄、アイコンとテキスト |
--spacing-x3s | 4px | バッジ・ステータスラベル内の微細調整 |
水平方向
| トークン | 値 | 用途 |
|---|---|---|
--spacing-s | 24px | 横並び RadioButton / Checkbox の列間 |
--spacing-xs | 16px | 横並びフォームのフィールド間 |
--spacing-xxs | 8px | ボタン間、アイコン + テキスト |
--spacing-x3s | 4px | ステータスラベル内、バッジ内 |
パディング（要素の内側）
コンテナの種類ごとに内側余白の基準が異なる。
ページレイアウト
| 場所 | パディング | |
|---|---|---|
メインコンテンツ外周 | --spacing-m (32px) | ページ全体の外周余白 |
Card 内側 | --spacing-m (32px) | Card コンポーネントの内側標準 |
Card 内コンテングループ | --spacing-xs (16px) | Card 内のサブグループ |
ダイアログ
| 場所 | パディング | |
|---|---|---|
Dialog コンテンツ領域 | --spacing-s (24px) | Header / Body / Footer の内側 |
Dialog 内グループ | --spacing-xs (16px) | フォームグループ、リストグループ |