UIスペーシングシステムとは？
UIスペーシングシステムは、デザイン全体の余白・パディング・ギャップを一定の単位で標準化した間隔体系です。ベースユニット（通常4pxまたは8px）を決めてその倍数に展開し、--space-1・--space-2などのトークンを作ります。これによりデザインと開発間の一貫性が保たれ、修正・拡張が容易になります。
8ptグリッドが広く使われる理由
8pxをベースにする理由は、8の倍数が1x・2x・3x DPRすべての画面で整数ピクセルに収まるからです。Google Material Designは4dpインクリメント、Apple Human Interface Guidelinesは8ptを採用しています。TailwindCSSも4pxベーススケールを使用しており、いずれも同じ原理に基づいています。
CSSへの適用方法
:root { --space-1: 4px; --space-2: 8px; --space-3: 16px; }のようにCSS変数で定義し、padding: var(--space-3)として使います。デザインツール（Figma・Tokens Studioなど）でも同じトークン名を使うことで、デザインから開発へのハンドオフがスムーズになります。
よくある質問
TailwindのスケールはTailwind CSSと互換性がありますか？
はい。「Tailwind互換」を選択してベースを4pxに設定するとTailwindのデフォルトスペーシング倍数（1、2、4、6、8…）と一致する値が生成されます。
スペーシングトークンにはpxとremどちらを使うべきですか？
どちらも有効です。pxはデザインツールとの整合が取りやすく、remはユーザーのフォントサイズ設定に応じてスケールされアクセシビリティが向上します。多くのチームはデザインツールではpxで定義し、CSSではremに変換しています。