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