カラーシステム
Misora Design Systemのカラーパレットは、ブランドの「信頼性」「先進性」「クリーンさ」を 表現するために厳選されています。全てのカラーはライトモードとダークモードの両方に対応しています。
💡 ヒント：カラースウォッチをクリックすると、カラーコードがクリップボードにコピーされます。
ブランドカラー（ライトモード）
ミソラコネクトのアイデンティティを表現する主要カラーです。 キー要素、重要な見出し、CTAボタンに使用します。
使用ガイドライン
- ミソラブルー：ブランドの主要色。ロゴ、重要な見出し、リンク、セカンダリボタンに使用
- ミソラレッド：CTA（Call to Action）、重要なお知らせ、強調要素に使用
ダークモードカラー
ダークモードでは目の負担を軽減しつつ、ブランドカラーの視認性を確保するため、明度を調整したカラーパレットを使用します。 テーマ切り替えボタンでダークモードに切り替えて、実際のカラーを確認できます。
背景カラー
テキストカラー
ステータスカラー
ダークモードの特徴
- 明度調整：ブランドカラーは視認性向上のため明度を上げています（ライトモードより明るく）
- 目に優しい黒：純黒（#000000）は避け、#0F0F0Fを使用することで目の疲労を軽減
- コントラスト比：WCAG AA基準を満たすテキストと背景のコントラスト比を確保
- 自動切り替え：システムの設定（prefers-color-scheme）で自動的にダークモードに切り替わります
ベースカラー
背景、サーフェス、ボーダーなどの基本要素に使用するカラーです。
テキストカラー
テキストの重要度と階層を表現するカラーです。可読性を最優先して選定されています。
グレースケール
UIデザインで汎用的に使用できる10段階のグレースケールパレットです。 背景、ボーダー、テキストなど様々な用途に対応しています。
ステータスカラー
ユーザーへのフィードバック（成功、警告、エラー、情報）を明確に伝えるためのステータスカラーです。 ライトモード・ダークモード両方で適切なコントラスト比（WCAG AA基準）を確保しています。
使用ガイドライン
- Success（成功）：フォーム送信完了、保存成功など、完了状態の表示
- Warning（警告）：入力内容の確認、非推奨機能の通知など、注意喚起
- Error（エラー）：バリデーションエラー、処理失敗など、エラーメッセージ
- Info（情報）：ツールチップ、ガイダンス、補足説明など、情報提供
使用上の注意
ステータスカラーを使用する際は、以下の点に配慮してください：
- 色だけでなくアイコンやテキストと併用し、色覚特性に配慮する
- エラーメッセージは具体的な修正方法を示し、建設的な表現を心がける
- 成功メッセージは控えめに表示し、ユーザーのフローを妨げない
詳細はデザインガイドラインを参照してください。
セマンティックカラー
UI要素のカテゴリ分け、タグ、バッジ、チャートなどで使用できる追加のセマンティックカラーです。 各カラーにはライト（背景用）とダーク（強調用）のバリエーションがあります。
Purple（パープル）
Pink（ピンク）
Orange（オレンジ）
Teal（ティール）
Indigo（インディゴ）
Cyan（シアン）
使用例
- Purple：クリエイティブ、プレミアム機能、AI関連
- Pink：マーケティング、女性向けコンテンツ、バレンタイン
- Orange：注意喚起（警告より弱め）、期間限定、セール
- Teal：ヘルスケア、エコ、新機能
- Indigo：エンタープライズ、ビジネス機能
- Cyan：テクノロジー、データ、分析
使用方法
CSS変数を使用する（推奨）
すべてのカラーはCSS変数として定義されています。直接カラーコードを使用せず、 CSS変数を使用することで、テーマの一貫性を保ち、ダークモード対応も簡単になります。
.my-button {
background-color: var(--color-primary);
color: var(--color-text-inverse);
}
.my-button:hover {
background-color: var(--color-primary-hover);
}利用可能なCSS変数
/* ブランドカラー */
--color-primary: #43C6FA;
--color-primary-hover: #2DB5EA;
--color-primary-light: #E0F7FF;
--color-primary-dark: #1E90D6;
--color-accent: #DA3241;
--color-accent-hover: #C12030;
--color-accent-light: #FDEDEF;
--color-accent-dark: #B01F2D;
/* ベースカラー */
--color-background: #FFFFFF;
--color-background-alt: #F8F9FA;
--color-surface: #FFFFFF;
/* テキストカラー */
--color-text-primary: #333333;
--color-text-secondary: #666666;
--color-text-tertiary: #999999;
--color-text-inverse: #FFFFFF;
/* ボーダー */
--color-border: #E0E0E0;
--color-border-light: #F0F0F0;
/* グレースケール */
--color-gray-50: #F9FAFB;
--color-gray-100: #F3F4F6;
--color-gray-200: #E5E7EB;
--color-gray-300: #D1D5DB;
--color-gray-400: #9CA3AF;
--color-gray-500: #6B7280;
--color-gray-600: #4B5563;
--color-gray-700: #374151;
--color-gray-800: #1F2937;
--color-gray-900: #111827;
/* ステータスカラー */
--color-success: #28A745;
--color-success-light: #D4EDDA;
--color-success-dark: #1E7E34;
--color-warning: #FFC107;
--color-warning-light: #FFF3CD;
--color-warning-dark: #D39E00;
--color-error: #DA3241;
--color-error-light: #FDEDEF;
--color-error-dark: #B01F2D;
--color-info: #43C6FA;
--color-info-light: #E0F7FF;
--color-info-dark: #1E90D6;
/* セマンティックカラー */
--color-purple: #8B5CF6;
--color-purple-light: #EDE9FE;
--color-purple-dark: #6D28D9;
--color-pink: #EC4899;
--color-pink-light: #FCE7F3;
--color-pink-dark: #BE185D;
--color-orange: #F97316;
--color-orange-light: #FFEDD5;
--color-orange-dark: #C2410C;
--color-teal: #14B8A6;
--color-teal-light: #CCFBF1;
--color-teal-dark: #0D9488;
--color-indigo: #6366F1;
--color-indigo-light: #E0E7FF;
--color-indigo-dark: #4338CA;
--color-cyan: #06B6D4;
--color-cyan-light: #CFFAFE;
--color-cyan-dark: #0891B2;アクセシビリティ
すべてのテキストカラーは、背景色とのコントラスト比がWCAG 2.1 AA基準（4.5:1以上）を 満たすように設計されています。
- 白背景上の
#333333テキスト：コントラスト比 12.6:1 ✓ - 白背景上の
#666666テキスト：コントラスト比 5.7:1 ✓ - ミソラブルー背景上の白テキスト：コントラスト比 2.9:1（大きいテキスト用）