カラーパレットガイドライン

概要

Aether Design Systemのカラーパレットは、ブランドアイデンティティを表現し、ユーザビリティとアクセシビリティを両立させるよう設計されています。

プライマリカラー

ブランドカラー

• Primary: #0077C7 - メインアクション、リンク
• Primary Light: #3399D8 - ホバー状態
• Primary Dark: #005A9B - アクティブ状態

セカンダリカラー

• Secondary: #FF6B35 - 重要なアクセント
• Secondary Light: #FF8A5C - ホバー状態
• Secondary Dark: #E5551F - アクティブ状態

ニュートラルカラー

グレースケール

• Gray 900: #1A1A1A - 最も濃いテキスト
• Gray 800: #333333 - 見出し
• Gray 700: #4A4A4A - 標準テキスト
• Gray 600: #666666 - 補助テキスト
• Gray 500: #888888 - プレースホルダー
• Gray 400: #CCCCCC - ボーダー
• Gray 300: #E5E5E5 - 背景ボーダー
• Gray 200: #F2F2F2 - 軽い背景
• Gray 100: #F8F8F8 - 最も軽い背景
• White: #FFFFFF - 背景

ステータスカラー

成功・エラー・警告

• Success: #28A745 - 成功状態
• Success Light: #D4F8DB - 成功背景
• Error: #DC3545 - エラー状態
• Error Light: #F8D7DA - エラー背景
• Warning: #FFC107 - 警告状態
• Warning Light: #FFF3CD - 警告背景
• Info: #17A2B8 - 情報状態
• Info Light: #D7F3F8 - 情報背景

使用ガイドライン

テキストカラー

/* 主要テキスト */
color: #333333;

/* 補助テキスト */  
color: #666666;

/* 無効状態 */
color: #888888;

背景カラー

/* メイン背景 */
background-color: #FFFFFF;

/* セクション背景 */
background-color: #F8F8F8;

/* カード背景 */
background-color: #F2F2F2;

ボタンカラー

/* プライマリボタン */
.btn-primary {
  background-color: #0077C7;
  color: #FFFFFF;
}

/* セカンダリボタン */
.btn-secondary {
  background-color: #FF6B35;
  color: #FFFFFF;
}

/* 無効ボタン */
.btn-disabled {
  background-color: #CCCCCC;
  color: #888888;
}

アクセシビリティ

コントラスト比

• AAレベル: 最低4.5:1（小さなテキスト）、3:1（大きなテキスト）
• AAAレベル: 最低7:1（小さなテキスト）、4.5:1（大きなテキスト）

推奨組み合わせ

• 白背景 + グレー700テキスト（コントラスト比: 9.74:1）
• プライマリブル + 白テキスト（コントラスト比: 5.93:1）
• エラーレッド + 白テキスト（コントラスト比: 5.78:1）

ダークモード対応

ダークパレット

• Background: #1A1A1A
• Surface: #2D2D2D
• Text Primary: #FFFFFF
• Text Secondary: #CCCCCC
• Border: #404040

実装例

CSS Variables

:root {
  --color-primary: #0077C7;
  --color-secondary: #FF6B35;
  --color-text: #333333;
  --color-text-light: #666666;
  --color-background: #FFFFFF;
  --color-border: #E5E5E5;
}

[data-theme="dark"] {
  --color-text: #FFFFFF;
  --color-text-light: #CCCCCC;
  --color-background: #1A1A1A;
  --color-border: #404040;
}

Tailwind設定例

module.exports = {
  theme: {
    colors: {
      primary: {
        DEFAULT: '#0077C7',
        light: '#3399D8',
        dark: '#005A9B'
      },
      gray: {
        50: '#F8F8F8',
        100: '#F2F2F2',
        200: '#E5E5E5',
        300: '#CCCCCC',
        400: '#888888',
        500: '#666666',
        600: '#4A4A4A',
        700: '#333333',
        800: '#1A1A1A'
      }
    }
  }
}