anti-purple-ui

Anti-Purple UI

このスキルでは、**厳格な「モノクロ＋1色のアクセント」**という色のルールを徹底します。これは、紫のグラデーション、青紫のグロー、ティールからインディゴへのグラデーション、色味を加えたフロストガラス、「ミニマル」を装った多色パレットなど、AI／SaaSにありがちな見た目を排除するためのものです。

---

ルール

どこでもグレースケール。アクセントは1色。例外なし。

UI全体をニュートラルなグレースケールで構成します。慎重に選び、控えめに使う1色のアクセントで、コントラストと強調をすべて担います。それ以外はすべて黒、白、またはグレーです。

---

カラーシステム

グレースケール（CSS変数 — 必ず定義してください）

:root {
  --color-bg:        #0a0a0a;  /* near-black background */
  --color-surface:   #141414;  /* card / panel surface */
  --color-border:    #2a2a2a;  /* subtle dividers */
  --color-muted:     #555555;  /* disabled, placeholder */
  --color-secondary: #888888;  /* secondary text */
  --color-primary:   #e0e0e0;  /* primary text */
  --color-white:     #f5f5f5;  /* headings, high-emphasis */

  /* For light-mode variants, invert the scale: */
  /* --color-bg: #f5f5f5; --color-white: #0a0a0a; etc. */
}

アクセント

アクセントカラーを1色定義します。状況や意図する雰囲気に合わせて選んでください。適当に選ばず、意図が感じられる色にしましょう。

:root {
  --color-accent: /* ONE color only */;
  --color-accent-dim: /* same hue, lower saturation/lightness for hover states */;
}

雰囲気ごとのおすすめアクセントカラー：

雰囲気／コンテキスト	アクセント
無骨／工業的	#ff3300（生の赤）
技術的／ターミナル	#00ff41（蛍光グリーン）
金融／堅実	#f0b429（アンバーゴールド）
エディトリアル／印刷物	#e8113a（インクレッド）
冷淡／臨床的	#00bfff（アイスブルー）
高級／ミニマル	#c9a84c（ウォームゴールド）
警告／緊急	#ff6b00（シグナルオレンジ）
科学的	#7fff00（シャルトルーズ）

禁止するアクセントカラー（これらはAIらしい見た目そのものです）：

• ❌ 紫（#7c3aed、#6366f1、#8b5cf6、その他あらゆるバイオレット）
• ❌ 青紫、インディゴ、ラベンダー
• ❌ ティールからインディゴへのグラデーション
• ❌ 「ブランドブルー」（#3b82f6、#2563eb）
• ❌ パステルカラー全般
• ❌ 複数のアクセントカラー（「2色目のアクセントを少しだけ」も不可）

---

使用ルール

アクセントは強調にのみ使用する

アクセントを使うのは、次の要素に限ります。

• 最も重要なインタラクティブ要素1つ（プライマリCTAボタン）
• アクティブ／選択状態のインジケーター
• 目立たせる必要がある主要なデータポイントまたは指標1つ
• フォーカスされた入力欄の枠線
• 進捗／読み込みインジケーター

アクセントを使わない要素：

• 背景（小さなバッジやピルを除く）
• 広い面積を占めるサーフェス
• 装飾要素
• 表示されるUI全体の約10％を超える範囲

グラデーションは禁止。以上。

/* ❌ Never */
background: linear-gradient(135deg, #667eea, #764ba2);
background: linear-gradient(to right, var(--color-accent), purple);

/* ✅ Always */
background: var(--color-surface);
border-left: 3px solid var(--color-accent); /* accent as line, not fill */

色付きのシャドウやグローは禁止

/* ❌ Never */
box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
text-shadow: 0 0 10px #7c3aed;

/* ✅ If shadows, always neutral */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);

色味を加えたフロストガラスは禁止

/* ❌ Never */
background: rgba(99, 102, 241, 0.1);
backdrop-filter: blur(12px);

/* ✅ If glass effect, neutral only */
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(8px);
border: 1px solid var(--color-border);

---

コントラストとアクセシビリティ

モノクロのシステムでは、コントラストは色相ではなく明度で確保する必要があります。次の点を確認してください。

• 本文テキスト（--color-primary）が、--color-bgに対してWCAG AAの基準を満たしている
• 暗い背景上のアクセントカラーがWCAG AAの基準を満たしている（テキストは4.5:1、UIコンポーネントは3:1）
• 状態の伝達を色だけに頼らず、アイコン、ラベル、太さの変更なども使う

---

コンポーネントのパターン

ボタン

/* Primary — the ONE place accent lives prominently */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);  /* or --color-white depending on accent lightness */
  border: none;
}

/* Secondary — monochrome only */
.btn-secondary {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}
.btn-secondary:hover {
  border-color: var(--color-primary);
}

カード／サーフェス

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  /* Optional: accent left-border for featured/highlighted card */
}
.card--featured {
  border-left: 3px solid var(--color-accent);
}

データ／統計

/* Accent only on the ONE metric that matters most */
.stat-value--primary { color: var(--color-accent); }
.stat-value--secondary { color: var(--color-white); }
.stat-label { color: var(--color-secondary); }

---

ライトモードのバリエーション

明度のスケールを反転し、同じアクセントのルールを適用します。

:root[data-theme="light"] {
  --color-bg:        #f8f8f8;
  --color-surface:   #ffffff;
  --color-border:    #e0e0e0;
  --color-muted:     #b0b0b0;
  --color-secondary: #666666;
  --color-primary:   #1a1a1a;
  --color-white:     #0a0a0a;
  /* --color-accent stays the same */
}

---

提出前のチェックリスト

このスキルに従って作成したUIを仕上げる前に、次の点を確認してください。

• 紫、バイオレット、インディゴ、またはティールから紫へのグラデーションが一切ない
• アクセントカラーがちょうど1色定義され、使用されている
• アクセントが視覚領域全体の10％以下を占めている
• 色付きのシャドウやグローがない
• 複数の色変化を含むグラデーションがない（サーフェスで不透明度を下げた単色の色味は可）
• すべてのインタラクティブな状態が、新しい色ではなく明度や太さの変更で表現されている
• 背景色とサーフェス色が、ニュートラルなグレー／黒／白のみである
• フロストガラスを使う場合、色味が加わっていない

---

frontend-designスキルとの併用

このスキルは、frontend-designの色に関するセクションに優先して適用されます。frontend-designのその他の要素（タイポグラフィ、レイアウト、モーション、空間構成）は引き続き適用されます。両方が有効な場合：

1. 全体的なクリエイティブの方向性を把握するため、frontend-designを読む
2. このスキルのカラーシステムを厳格な制約として適用する
3. アクセントカラーは、選んだ美的トーンに合わせて選ぶ（例：ブルータリストなレイアウトには生の赤、エディトリアルなレイアウトにはインクレッドまたはアンバーがよく合います）