レイアウト
foundation余白・角の丸み・境界線（区切りの線）の決まりごと一覧です。決まった段階の中から選ぶことで、どの画面でも見た目が揃います。
8px グリッド
基本となるグリッドは 8×8 で、すべての要素は 8 の偶数倍の大きさと間隔で構成されています（例: 16、24、32、48、128 など）。これにより、コンポーネントシステムは堅牢で使いやすいものとなっています。
8 の倍数どうしは、分割したり積み重ねてもグリッドが揃います:
要素の間に余白を取る場合も、余白を 8 の倍数にすれば全体はグリッドに揃ったままです（破線 = 余白）:
実際のコンポーネントを方眼 (8px 刻み) の上に並べてグリッドを組んだ例です。2 カラムの列間・行間 (16)、外周の余白 (24)、ボタン間 (8)、ラベルと入力欄の間 (8)、入力欄やボタンの高さ (40) がすべて 8 の倍数なので、各要素の端が方眼の線に揃います:
余白
CSS: p-* / m-* / gap-* / space-*
8px グリッドを基本単位とする 9 段階。spacing/N は Tailwind の p-N / m-N / gap-N 等に対応。
spacing/0
p-0 / m-0 / gap-0
spacing/1
p-1 / m-1 / gap-1
spacing/2
p-2 / m-2 / gap-2
spacing/3
p-3 / m-3 / gap-3
spacing/4
p-4 / m-4 / gap-4
spacing/6
p-6 / m-6 / gap-6
spacing/8
p-8 / m-8 / gap-8
spacing/12
p-12 / m-12 / gap-12
spacing/16
p-16 / m-16 / gap-16
角丸
CSS: rounded-*
none / xs / sm / md / lg / full の 6 段階。full はピル / 円形用。
rounded-none
なし
rounded-xs
細部
rounded-sm
小
rounded-md
中
rounded-lg
外側
rounded-full
ピル・円形
ヒエラルキー
入れ子では外側ほど大きく、内側ほど小さく揃える（lg → md → sm → xs）と、角が同心円状になって整って見える。
- 外側 → lg (24)
- 中 → md (16)
- 小 → sm (8)
- 細部 → xs (4)
- 中心 → full (●)
境界線
CSS: border-*
階層に応じて 3 段階。inverse はダーク背景の上で使う。
light
inverse