デザイントークンの基本

デザイントークンは、色、サイズ、フォントなどのデザイン値を一元管理するための仕組みです。

CSS変数での実装

:root {
  /* カラートークン */
  --c--main: #0066cc;
  --color-secondary: #6c757d;
  --color-success: #28a745;

  /* スペーシングトークン */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
}

使用例

.button {
  background: var(--c--main);
  padding: var(--space-sm) var(--space-md);
}

デザイントークンを導入することで、一貫性のあるUIを効率的に構築できます。