スペーシングスケールシステム — 一貫したマージンとパディングトークン

スペーシングスケールの構築

よく設計されたスペーシングスケールは、コードベースから任意のピクセル値を排除します。ギャップが12pxか14pxかを議論する代わりに、チームは調和のとれた値の定義済みセットから選択します。

リニアスケール（4pxベース）

最もシンプルなアプローチはベースユニットを乗算します：

:root {
  --spacing-0: 0;
  --spacing-1: 4px;    /* 0.25rem */
  --spacing-2: 8px;    /* 0.5rem */
  --spacing-3: 12px;   /* 0.75rem */
  --spacing-4: 16px;   /* 1rem */
  --spacing-6: 24px;   /* 1.5rem */
  --spacing-8: 32px;   /* 2rem */
  --spacing-12: 48px;  /* 3rem */
  --spacing-16: 64px;  /* 4rem */
}

Tシャツサイズスケール

名前付きサイズはデザイナーにとってより直感的です。

ジオメトリックスケール

幾何学的進行はより自然な視覚的リズムを作り出します。

各アプローチの使い分け

• リニア： 最も柔軟、汎用デザインシステムに最適
• Tシャツ： チームコミュニケーションとFigma統合に最適
• ジオメトリック： 光学的スペーシングが重要なタイポグラフィレイアウトに最適