デザイントークン階層 — プリミティブ、セマンティック、コンポーネント

3層トークン階層

本番のデザインシステムでは多くの場合、3層のトークンを使用します。各層が具体性を追加し、決定のスコープを狭めます。

レイヤー1: プリミティブトークン

意味が付与されていない生のカラー値：

:root {
  --blue-50:  #eff6ff;
  --blue-500: #3b82f6;
  --blue-900: #1e3a5f;
  --gray-50:  #fafafa;
  --gray-800: #27272a;
  --gray-950: #0a0a0b;
}

レイヤー2: セマンティックトークン

プリミティブを参照する抽象的なロール：

:root {
  --bg:          var(--gray-50);
  --text:        var(--gray-950);
  --primary:     var(--blue-500);
  --border:      var(--gray-200);
}

html.dark {
  --bg:          var(--gray-950);
  --text:        var(--gray-50);
  --primary:     var(--blue-400);
  --border:      var(--gray-800);
}

レイヤー3: コンポーネントトークン

特定のコンポーネント用のスコープ付き変数：

:root {
  --button-bg:      var(--primary);
  --button-text:    white;
  --button-radius:  0.375rem;
  --card-bg:        var(--bg);
  --card-border:    var(--border);
  --input-bg:       var(--bg);
  --input-border:   var(--border);
}

各レイヤーの使用場面

決定	レイヤー
「この青は何？」	プリミティブ
「このカラーの役割は？」	セマンティック
「このコンポーネントの外観は？」	コンポーネント

メンテナンスの利点

マーケティングが「青をもっとウォームに」と言えば、1つのプリミティブトークンを変更します。デザインが「エラー状態をもっとソフトに」と言えば、1つのセマンティックトークンを再マップします。エンジニアリングが「ボタンにもっと丸みを」と言えば、1つのコンポーネントトークンを更新します。各関心事が分離されています。

ツール

CSS変数ジェネレーターはレイヤー1（プリミティブ）とレイヤー2（セマンティック）のトークンを出力します。レイヤー3のトークンは通常、開発中にコンポーネントごとに追加されます。