Colors
アプリケーションに適用できる 5 つのカラーテーマと、状態表現に使うセマンティックカラーのサンプルです。 各テーマカードでライト・ダーク両モードの配色イメージを確認できます。
カラーテーマ
Ocean
Ocean
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。
視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸ コントラストと視認性のバランス
- ▸ ブランドカラーとの統一感
- ▸ アクセシビリティへの配慮
Success Warning Error Info Disabled
Ocean
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。
視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸ コントラストと視認性のバランス
- ▸ ブランドカラーとの統一感
- ▸ アクセシビリティへの配慮
Success Warning Error Info Disabled
Forest
Forest
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。
視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸ コントラストと視認性のバランス
- ▸ ブランドカラーとの統一感
- ▸ アクセシビリティへの配慮
Success Warning Error Info Disabled
Forest
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。
視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸ コントラストと視認性のバランス
- ▸ ブランドカラーとの統一感
- ▸ アクセシビリティへの配慮
Success Warning Error Info Disabled
Sunset
Sunset
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。
視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸ コントラストと視認性のバランス
- ▸ ブランドカラーとの統一感
- ▸ アクセシビリティへの配慮
Success Warning Error Info Disabled
Sunset
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。
視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸ コントラストと視認性のバランス
- ▸ ブランドカラーとの統一感
- ▸ アクセシビリティへの配慮
Success Warning Error Info Disabled
Midnight
Midnight
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。
視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸ コントラストと視認性のバランス
- ▸ ブランドカラーとの統一感
- ▸ アクセシビリティへの配慮
Success Warning Error Info Disabled
Midnight
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。
視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸ コントラストと視認性のバランス
- ▸ ブランドカラーとの統一感
- ▸ アクセシビリティへの配慮
Success Warning Error Info Disabled
Sand
Sand
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。
視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸ コントラストと視認性のバランス
- ▸ ブランドカラーとの統一感
- ▸ アクセシビリティへの配慮
Success Warning Error Info Disabled
Sand
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。
視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸ コントラストと視認性のバランス
- ▸ ブランドカラーとの統一感
- ▸ アクセシビリティへの配慮
Success Warning Error Info Disabled