使い方
- まず、基準色が role 色として大きくは崩れていない状態まで整えます。
- 次に、handoff 先に合わせて product UI / 記事 / docs / marketing のどれに近い命名かを選びます。
- semantic token map を見て naming が自然なら、CSS 変数や JSON をコピーして export 前の下地にします。
Wave 58 expansion
role 色から semantic 名へ進む
このページは「role 色は悪くない」からさらに一歩進み、「その role をどんな semantic token 名で渡すか」を見るためのページです。
ライトの semantic tokens
ダークの semantic tokens
CSS 変数
JSON
近いページとの使い分け
アクセシブル配色パレット は role 色を作る段階です。カラートークンプレビュー は見た目確認、カラートークン監査 は単体点検、カラートークン差分 は before / after 比較です。このページは、その次に role 色をどんな semantic token 名で渡すかを整理し、component カラートークン や最後の カラートークン出力 へつなぐ段階です。
FAQ
このページで何が作れますか？
採用済みの基準色から、product UI・記事 / docs・marketing 用の semantic token map を作り、CSS 変数と JSON を出力できます。
アクセシブル配色パレットとの違いは何ですか？
アクセシブル配色パレットは role 色を作る段階です。このページは role 色がだいたい固まったあと、semantic token 名へ割り当てる段階です。
カラートークン出力との違いは何ですか？
カラートークン出力は最終の role-token handoff に近いページです。このページは、その前に naming と mapping を整理したいときに使います。
完全なデザインシステム設計の代わりになりますか？
いいえ。軽量な naming / handoff 補助であり、広い設計レビューを置き換えるものではありません。