余白

関係から選ぶ

余白は、どの要素がまとまりなのかを示します。数値より先に関係を選び、同じ階層の要素には同じ間隔を繰り返してください。

• 詳細の間隔 (xs–sm): アイコンとラベル、ラベルと値、1 つの小さなグループ内の行
• コンポーネントの間隔 (md–lg): フィールド、操作、行、境界を持つコンポーネント内の余白
• セクションの間隔 (xl–2xl): タスクグループ、ページ領域、話題が大きく変わる境界

視覚的なスケール

レイアウトのリズム

内側から外側へ組み立てます。ラベルと値は xs でまとめ、同階層の行は sm または md で分け、コンポーネント内には lg の内側余白を使い、次のタスクとは xl または 2xl で分離します。すべての要素間に異なる余白を作らないでください。同じ関係には同じ間隔を使います。

実装とリファレンス

.rack-card { display: grid; gap: var(--tinyrack-space-md); padding: var(--tinyrack-space-lg); }

Tailwind の余白マッピングも確認してください。