余白・寸法の最小単位は 4px。すべての値をこの倍数から選ぶ。

刻みの規則

規則	値
最小単位	4px。これより細かい値は使わない
要素と要素を隔てる主要な余白	8 の倍数（8 / 16 / 24 / 32 / 40 / 48）を基本にする
4px 刻みの出番	アイコンと文字の間隔のような細かい調整
タップ / クリック領域	最小 48 × 48（アクセシビリティ）

情報密度を上げる場面でも、操作対象の当たり判定は縮めない。

よく使う値

余白のクラスは 4px を 1 単位とする番号で指定する（p-4 = 16px のように、番号 × 4px）。

番号	値	クラス例
1	4px	p-1 gap-1
2	8px	p-2 gap-2
3	12px	p-3 gap-3
4	16px	p-4 gap-4
6	24px	p-6 gap-6
8	32px	p-8 gap-8
10	40px	p-10 gap-10
12	48px	p-12 gap-12