1. コア3色
バナーのロゴから起こした。この3色で「AI BRIDGE KUMAMOTO 2026」が成立する。
--brand-navy#1B3A8F
ロゴ「AI BRIDGE」の濃紺見出し・帯・表ヘッダ--brand-violet#7B4FD6
「KU」側の紫グラデーションの起点・強調--brand-cyan#29A8E0
「2026」側の水色グラデーションの終点2. 支持色
コア3色だけでは組めない場面で使う。暗背景には sky / lilac を当てる。
--brand-deep#12305C
濃紺の沈み本文の見出し・表ヘッダ--brand-blue#2A6FB0
中間の青リンク・タグライン--brand-sky#5AA8FF
明るい水色暗背景でのアクセント--brand-lilac#A07BFF
明るい紫暗背景でのアクセント--brand-mint#3FBFA8
バッジ右端のミント差し色・1画面に1箇所まで3. グラデーション
向きは必ず左＝紫、右＝水色。ロゴの流れと揃える。
--grad-logoロゴまわり・見出しの強調。紫 → 水色
--grad-badgeボタン・バッジ。濃紺 → 水色
--grad-light明るいページの地。転換スライドと同じ
4. 中立色
--ink#16202B
本文--ink-sub#5F6B7A
補足--line#DFE4EA
罫線--paper#FFFFFF
カード地--paper-bg#F5F8FB
ページ地（明）5. 部品の見え方
NEXT SESSION
AI発信者が集う2DAYS
DAY1
差し色
6. 使い分け
| 用途 | 使う色 |
|---|---|
| 見出し・帯・表ヘッダ | --brand-navy / --brand-deep |
| ロゴまわりのグラデーション | --grad-logo（紫→水色） |
| ボタン・バッジ | --grad-badge（濃紺→水色） |
| 明るいページの地 | --grad-light |
| リンク・Xハンドル | --brand-blue |
| 差し色 | --brand-mint（1画面に1箇所まで） |
7. やらないこと
この4つは守る。
- 赤・オレンジを使わない。災害・警告の色に見える。復興支援イベントでは避ける
- 緑を面で使わない。ミントは差し色まで
- グラデーションの向きを逆にしない。左＝紫、右＝水色でロゴと揃える
- 濃紺を黒に置き換えない。
#12305cより暗くすると冷たくなる
8. 反映先
| サイト | 状態 |
|---|---|
| timetable.keitro-aigc.com | 反映済み |
| timetable.keitro-aigc.com/slides/（転換スライド） | 反映済み |
| speakers.keitro-aigc.com | 反映済み（オレンジ→紫に差し替え） |
| bgm.keitro-aigc.com | 反映済み（暗背景版） |
9. コピーして使う
:root{
--brand-navy:#1b3a8f; --brand-violet:#7b4fd6; --brand-cyan:#29a8e0;
--brand-deep:#12305c; --brand-blue:#2a6fb0;
--brand-sky:#5aa8ff; --brand-lilac:#a07bff; --brand-mint:#3fbfa8;
--grad-logo:linear-gradient(96deg,#7b4fd6,#29a8e0);
--grad-badge:linear-gradient(96deg,#1b3f8f,#3aa0d8);
--grad-light:linear-gradient(160deg,#f2f9ff,#e2f1ff 32%,#dce9ff 58%,#e6dcff 82%,#f4ecff);
}