基調・信頼・集中をつくるブランド色
群青
Gunjo UI の主軸となる色です。主要操作、選択状態、フォーカス、チャートの基準系列など、プロダクト全体の方向を示す場面に使います。
主要 CTA選択中の状態フォーカスリングブランド背景
Tokens · Colors
カラー
用途別パレットと全トークンパレットを確認できます。値は現在のテーマに追従します。
用途別パレット
subtle は文字を載せる面、default はアイコン・状態・チャート、strong はボタンや強い CTA に使います。
ブランドパレット
群青と媚茶は、単なる色値ではなく Gunjo UI の印象を決める基準色です。
温度感・補助・人間味を足すブランド色
媚茶
群青だけでは硬く見える場面に、控えめな温度感を足す補助色です。注釈、編集面、空状態、ブランドの物語性を持たせたい背景に使います。
補助背景注釈や説明編集・制作系の面ブランドストーリー
プライマリ
主要操作、選択状態、フォーカス、ブランド CTA。
--primary淡色
--primary-subtle
標準
--primary
強調
--primary-strong
枠線
--primary-border
情報
補足情報、詳細確認、リンク先の案内。
--info淡色
--info-subtle
標準
--info
強調
--info-strong
枠線
--info-border
成功
完了、接続済み、肯定的な状態。
--success淡色
--success-subtle
標準
--success
強調
--success-strong
枠線
--success-border
注意
注意、公開前確認、破壊的ではない警告。
--warning淡色
--warning-subtle
標準
--warning
強調
--warning-strong
枠線
--warning-border
破壊的操作
削除、失敗、取り消せない操作。
--destructive淡色
--destructive-subtle
標準
--destructive
強調
--destructive-strong
枠線
--destructive-border
全トークンパレット
すべてのカラー CSS 変数を一覧し、hex / HSL / CSS var をコピーできます。
意味色
プライマリ subtle
プライマリ subtle foreground
プライマリ default
プライマリ foreground
プライマリ strong
プライマリ strong foreground
プライマリ border
情報 subtle
情報 subtle foreground
情報 default
情報 foreground
情報 strong
情報 strong foreground
情報 border
成功 subtle
成功 subtle foreground
成功 default
成功 foreground
成功 strong
成功 strong foreground
成功 border
注意 subtle
注意 subtle foreground
注意 default
注意 foreground
注意 strong
注意 strong foreground
注意 border
破壊的操作 subtle
破壊的操作 subtle foreground
破壊的操作 default
破壊的操作 foreground
破壊的操作 strong
破壊的操作 strong foreground
破壊的操作 border
面とニュートラル
背景
前景
カード
カード文字
ポップオーバー
ポップオーバー文字
控えめな面
控えめな文字
セカンダリ
セカンダリ文字
アクセント
アクセント文字
枠線
入力欄枠線
フォーカスリング
オーバーレイ
チャート
主要系列
情報系列
成功系列
注意系列
補助系列
リスク系列
ブランド
群青 深
群青 より深く
群青 最深
群青 明
群青 基準
群青 明彩
群青 暗
媚茶 暖
媚茶 基準
媚茶 明
媚茶 最深
純白
純黒
群青 Hue