色
システムは3つのアンカーカラーで構成されています。チャコールはデフォルトのページ背景色であり、モードではありません。シグナルオレンジは主要なアクセントカラーです。ユーカリはプラットフォーム上の重要な場面で使用される二次的なアクセントカラーです。シグナルオレンジとユーカリを同じビューポートで混在させないでください。
同じビューポート内でo400とe400を混在させないでください。セクションごとに1つのアクセントカラーを選択してください。
木炭(濃いベース)
デフォルトのページ背景。表面、境界線、テキストはすべてこのスケールに基づいて作成されます。
シグナルオレンジ
CTA(行動喚起)ボタン、眉毛、ブランドロゴ、サーマルモーションなどの主要なアクセント。
ユーカリ
プラットフォームやデータイベントの補助的なアクセント。明暗反転セクションで使用されます。
クールグレー(ライトベース)
ユーカリが主役となる、逆転したセクション。
意味的ステータスの色
機能レイヤーはブランドとは切り離して配置します。すべてのステータスにはアイコンとラベルを組み合わせ、色だけを使うことは避けます。成功にはユーカリの色を再利用し、エラー、警告、情報、進捗状況、レビューにはそれぞれ専用の色を使用します。
トークン名で参照してください。16進数で参照しないでください。トークンは、@theme 内の src/app/globals.css で宣言されています。