COLOR
明るい白ベースに、青を主役、赤・黄・緑を小さく添える。情報整理、検索、比較、一覧向き。
Claude
温かい紙色ベースに、深いブラウンと橙を合わせる。思考、執筆、戦略、ナレッジ整理向き。
Codex
黒に近いベースへ、白文字とグリーンを効かせる。実装、検証、開発プロセス、技術資料向き。
Markdown source
COLOR Markdown
# COLOR
## SHIFT AI
SHIFT AI 配色ガイドライン。
配色以外のデザインルールは `global.md` を参照する。
# カラーパレット
## Brand Color
- `#a51e6d`
- `#ae357c`
- `#b74b8a`
- `#c06299`
- `#c978a7`
- `#d28fb6`
- `#dba5c5`
- `#e4bcd3`
- `#edd2e2`
- `#f6e9f0`
## Black
- `#333333`
- `#474747`
- `#5c5c5c`
- `#707070`
- `#858585`
- `#999999`
- `#adadad`
- `#c2c2c2`
- `#d6d6d6`
- `#ebebeb`
## Sub Color
- `#039578`
- `#1ca086`
- `#35aa93`
- `#4fb5a1`
- `#68bfae`
- `#81cabc`
- `#9ad5c9`
- `#b3dfd7`
- `#cdeae4`
- `#e6f4f2`
## Gradient
- ロゴと同じ: `#e6033d` to `#673ba0`
- ブランドカラーA: `#ff5757` to `#8c52ff`
- ブランドカラーB: `#c06299` to `#a51e6d`
- サブカラー: `#32bed2` to `#039578`(色数が必要な時のみ使用)
# 配色運用
## 色・コントラスト
- 1枚に使う色は ブランドカラー + ブラック + 1アクセント の3系統まで
- サブカラー(緑系)は色数が必要な時のみ使う。混在時はブランドカラーを必ず主、サブカラーを従にする
- メインコピーと背景のコントラスト比 4.5:1 以上
- 背景がブランドカラーグラデーションの場合、文字色は白 or `#333333` のみ
- 重要要素は背景から明快に分離させる。同系色の重ね置き禁止
- グラデーションは規定の組み合わせ以外を作らない
- 同じ役割の要素は色を揃える
## 写真・加工・仕上げ
- 人物・モックアップの色温度・明度は1枚内で統一
- 過度な彩度上げは禁止
## Hard Fail(即不採用)
- 規定外の色 / グラデーションが混入している
- 重要要素と背景のコントラストが不足している
## Google
- base: `#ffffff`
- main: `#1a73e8`
- accent: `#ea4335`
- accent: `#fbbc04`
- accent: `#34a853`
- gradient: `#1a73e8` to `#34a853` to `#fbbc04` to `#ea4335`
- soft gradient: `#ffffff` to `#e8f0fe` to `#e6f4ea`
## Claude
- base: `#f7f0e8`
- main: `#3d342f`
- accent: `#d97745`
- accent: `#8a5a44`
- gradient: `#f7f0e8` to `#d97745` to `#3d342f`
- soft gradient: `#fffaf4` to `#f3dfcc` to `#d97745`
## Codex
- base: `#111318`
- main: `#f4f7fb`
- accent: `#10a37f`
- accent: `#5b8cff`
- gradient: `#c7b8ff` to `#7f74ff` to `#2348ff`
- soft gradient: `#ffffff` to `#c9d2ff` to `#5369ff`