Spacing & Rhythm
余白は「空きスペース」ではなく「構造の一部」です。 要素間の距離を意図的に広げることで、情報の塊を明確にし、視線の迷いを減らします。
Spacing Levels
8px
Micro Space
8px - 16pxアイコンとテキスト、ラベルと入力欄など、密接に関連する要素間の距離。
gap-2 ～ gap-424px
Component Space
24px - 32pxカード内のパディングや、パラグラフ間の距離。情報のまとまりを作るための呼吸。
p-6 ～ p-864px
Section Space
64px - 80px大きな機能ごとの区切り。ユーザーが一度思考をリセットできる距離感。
py-16 ～ py-20120px
Global Space
120pxページ全体の大きなリズム。次の展開への期待を持たせる広大な余白。
py-28Spacing Scale
4pxベースの倍数スケール。一貫したリズムを生み出します。
00px14px28px312px416px520px624px832px1040px1248px1664px2080px2496px32128pxBorder Radius
none
0pxsm
4pxmd (default)
8pxxl
12px2xl
16pxfull
9999px