BlueAI Spacing
8px ベースユニットのスペーシングスケール。一貫した余白で視覚的なリズムと階層を作る。
Scale
| Token | px | rem | Tailwind | |
|---|---|---|---|---|
| space.0 | 0 | 0 | 0 | |
| space.025 | 2 | 0.125rem | 0.5 | |
| space.050 | 4 | 0.25rem | 1 | |
| space.075 | 6 | 0.375rem | 1.5 | |
| space.100 | 8 | 0.5rem | 2 | |
| space.150 | 12 | 0.75rem | 3 | |
| space.200 | 16 | 1rem | 4 | |
| space.250 | 20 | 1.25rem | 5 | |
| space.300 | 24 | 1.5rem | 6 | |
| space.400 | 32 | 2rem | 8 | |
| space.500 | 40 | 2.5rem | 10 | |
| space.600 | 48 | 3rem | 12 | |
| space.800 | 64 | 4rem | 16 | |
| space.1000 | 80 | 5rem | 20 |
Visual
2
4
6
8
12
16
20
24
32
40
48
64
80
用途別レンジ
Small0–8px
コンポーネント内部のスペーシング
- アイコンとテキストの間隔
- 入力フィールドの内部パディング
- カード要素間の小さなギャップ
Medium12–24px
コンポーネント間のスペーシング
- カード内のセクション間の余白
- フォームフィールド間のスペース
- リスト要素間のギャップ
Large32–80px
ページレベルのレイアウトスペーシング
- ページセクション間の余白
- ヘッダーとコンテンツの間隔
- フッター上部のスペース
原則
類似性でグルーピング
一貫した余白は要素間の意味的なまとまりを生む。同じ種類の要素には同じスペーシングを使う。
近接性で関連を示す
関連する要素は近くに配置し、距離で関係性を表現する。距離が近い＝関係が強い。
秩序と階層を作る
余白のサイズで視覚的な重要度を示す。大きな余白は大きなセクション区切りを意味する。
視覚的リズムを生む
一貫性と変化のバランスで自然なリズムを作る。機械的な均等配置を避け、意図のある余白設計を行う。
使い方
Tailwind CSS クラス
/* padding */
p-2 /* 8px */
px-4 py-3 /* 16px / 12px */
/* margin */
mt-6 /* 24px */
mb-8 /* 32px */
/* gap */
gap-2 /* 8px */
gap-4 /* 16px */
よくあるパターン
| パターン | スペーシング | Tailwind |
|---|---|---|
| カード内パディング | 16px | p-4 |
| フォームフィールド間 | 16px | space-y-4 |
| セクション間 | 32–40px | mt-8 / mt-10 |
| アイコンとテキスト | 6–8px | gap-1.5 / gap-2 |
| ページコンテナ左右 | 32px | px-8 |
| ページコンテナ上下 | 40px | py-10 |
| 見出しとコンテンツ | 20px | mb-5 |
| テーブルセル | 10–16px | px-4 py-2.5 |