| 分類 | 名 | 使用箇所例 | default | hover | disable | |||||
|---|---|---|---|---|---|---|---|---|---|---|
| 背景 | 通常背景色 | color-white | #FFFFFF | - | - | - | - | |||
| Primaryカラー（システム共通色） | ヘッダー |  |
color-primary | #327CAB | - | - | - | - | ||
| Primaryカラーアクセント | SideRail |  |
color-primary-sub | #4294C8 | - | - | - | - | ||
| Primaryカラー薄 | 検索項目 |  |
color-primary-light | #E3EFF7 | - | - | - | - | ||
| Primaryカラー薄透過 | 詳細オーバーレイ表示 |  |
color-primary-light-op95 | #E3EFF70D | - | - | - | - | ||
| Table th指定色 | 表の項目行（thead） |  |
color-secondary | #D2E4EE | - | - | - | - | ||
| Table tr指定色 | 表の内容行（tr） |  |
交互 | color-natural-lightest | #F8F8F8 | color-primary-light | #E3EFF7 | - | - | |
| color-white | #FFFFFF | |||||||||
| ボタン | メイン動線ボタン | 確定、検索 |  |
bg | color-primary | #327CAB | color-primary-hovered | #29688E | bg-color-disabled | #E6E6E6 |
| border | なし | なし | なし | なし | なし | なし | ||||
| txt/icon | color-white | #FFFFFF | color-white | #FFFFFF | color-disabled | #B1B1B1 | ||||
| 補助動線ボタン | キャンセル、編集 |  |
bg | color-primary | #327CAB | color-primary-hovered | #29688E | bg-color-disabled | #E6E6E6 | |
| border | なし | なし | なし | なし | なし | なし | ||||
| txt/icon | color-white | #FFFFFF | color-white | #FFFFFF | color-disabled | #B1B1B1 | ||||
| 後戻りのできないアクションボタン （使用機会低） |
完全削除、退出 |  |
bg | color-danger | #F75C46 | color-danger-hovered | #D14936 | bg-color-disabled | #E6E6E6 | |
| border | なし | なし | なし | なし | なし | なし | ||||
| txt/icon | color-white | #FFFFFF | color-white | #FFFFFF | color-disabled | #B1B1B1 | ||||
| アイコン | 通常アイコン | 通常背景、Primary薄上配置アイコン |  |
color-primary | #327CAB | - | - | - | - | |
| システム共通青色上のアイコン | Primaryカラー上配置アイコン |  |
color-white | #FFFFFF | - | - | - | - | ||
| ポジティブな状態を示すアイコン/タグ | 成功、完了、対応済 |  |
color-success | #15A46E | - | - | - | - | ||
| 注意喚起を促すアイコン | 要確認、納期近 |  |
color-warning | #FFA037 | - | - | - | - | ||
| 警告を伝えるアイコン | エラー、異常、禁止 |  |
color-danger | #F75C46 | - | - | - | - | ||
| テキスト | 通常テキスト | text |  |
color-main | #111111 | - | - | - | - | |
| 通常Linkテキスト | text |  |
color-primary | #327CAB | color-primary-hovered | #29688E | - | - | ||
| システム共通青色上のテキスト | text |  |
color-white | #FFFFFF | - | - | - | - | ||
| システム共通青色上のLinkテキスト | color-white＋下線 | #FFFFFF | color-primary-light＋下線 | #E3EFF7 | - | - | ||||
| 補助テキスト | placeholder、補足 |  |
color-light | #6d6d6d | - | - | - | - | ||
| 警告/注意喚起テキスト色 | エラー、異常、禁止、要確認 |  |
color-danger | #F75C46 | - | - | - | - | ||
| ポジティブテキスト色 | 完了、OK | color-success | #15A46E | - | - | - | - | |||