Skip to content

Colors

This content is not available in your language yet.

アプリケーションに適用できる 5 つのカラーテーマと、状態表現に使うセマンティックカラーのサンプルです。 各テーマカードでライト・ダーク両モードの配色イメージを確認できます。

Light
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。 視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
  • コントラストと視認性のバランス
  • ブランドカラーとの統一感
  • アクセシビリティへの配慮
Success Warning Error Info Disabled
Dark
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。 視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
  • コントラストと視認性のバランス
  • ブランドカラーとの統一感
  • アクセシビリティへの配慮
Success Warning Error Info Disabled
Light
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。 視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
  • コントラストと視認性のバランス
  • ブランドカラーとの統一感
  • アクセシビリティへの配慮
Success Warning Error Info Disabled
Dark
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。 視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
  • コントラストと視認性のバランス
  • ブランドカラーとの統一感
  • アクセシビリティへの配慮
Success Warning Error Info Disabled
Light
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。 視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
  • コントラストと視認性のバランス
  • ブランドカラーとの統一感
  • アクセシビリティへの配慮
Success Warning Error Info Disabled
Dark
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。 視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
  • コントラストと視認性のバランス
  • ブランドカラーとの統一感
  • アクセシビリティへの配慮
Success Warning Error Info Disabled
Light
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。 視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
  • コントラストと視認性のバランス
  • ブランドカラーとの統一感
  • アクセシビリティへの配慮
Success Warning Error Info Disabled
Dark
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。 視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
  • コントラストと視認性のバランス
  • ブランドカラーとの統一感
  • アクセシビリティへの配慮
Success Warning Error Info Disabled
Light
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。 視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
  • コントラストと視認性のバランス
  • ブランドカラーとの統一感
  • アクセシビリティへの配慮
Success Warning Error Info Disabled
Dark
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。 視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
  • コントラストと視認性のバランス
  • ブランドカラーとの統一感
  • アクセシビリティへの配慮
Success Warning Error Info Disabled