Tokens · Spacing
Spacing
Tailwind のスケールを使い、余白と大きさは 4px グリッドにそろえます。
4px グリッド
次の3つは 4 の倍数にそろえます。
- 並んだ物どうしの間（gap、space-x、space-y）。
- 要素を内側へ寄せる余白（padding、margin）。
- 操作部品・バッジ・アイコンの大きさ。アイコンは 12・16・20・24px です。
1行の行やバッジは、先に高さを決めてから余白を整数の段にします。メニューの項目は、上下 6px の余白ではなく min-h-8 py-1（高さ 32px・余白 4px）です。
機械検査：npm run design:verify:grid4
Scale
00pxpx1px細部専用0.52px細部専用14px1.56px細部専用28px2.510px細部専用312px3.514px細部専用416px520px624px728px832px936px1040px1248px1456px1664px2080px2496px28112px32128px36144px40160px48192px56224px64256pxよく使う組み合わせ
| Token | 値 | 用途 |
|---|---|---|
h-9 | 36px | Button / Input / Select の高さ ── システム共通のコントロールの拍子 |
gap-2 | 8px | ボタン内のアイコンとラベルの間隔 |
p-4 / p-5 / p-6 | 16 / 20 / 24px | Card の padding（コンパクト / デフォルト / ゆとりあり） |
space-y-4 / space-y-6 / space-y-8 | 16 / 24 / 32px | セクションブロック間の縦リズム |
max-w-2xl / 3xl / 6xl | 672 / 768 / 1152px | プロース / ドキュメント / ランディングの読みやすい幅 |