Colors
アプリケーションに適用できる 5 つのカラーテーマと、状態表現に使うセマンティックカラーのサンプルです。 各テーマカードでライト・ダーク両モードの配色イメージを確認できます。 各テーマにはプライマリカラーに加え、セカンダリ／アクセントカラーを用意し、HEXコードも表示しています。
Ocean
セクション「Ocean」Light
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸コントラストと視認性のバランス
- ▸ブランドカラーとの統一感
- ▸アクセシビリティへの配慮
Dark
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸コントラストと視認性のバランス
- ▸ブランドカラーとの統一感
- ▸アクセシビリティへの配慮
Forest
セクション「Forest」Light
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸コントラストと視認性のバランス
- ▸ブランドカラーとの統一感
- ▸アクセシビリティへの配慮
Dark
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸コントラストと視認性のバランス
- ▸ブランドカラーとの統一感
- ▸アクセシビリティへの配慮
Sunset
セクション「Sunset」Light
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸コントラストと視認性のバランス
- ▸ブランドカラーとの統一感
- ▸アクセシビリティへの配慮
Dark
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸コントラストと視認性のバランス
- ▸ブランドカラーとの統一感
- ▸アクセシビリティへの配慮
Midnight
セクション「Midnight」Light
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸コントラストと視認性のバランス
- ▸ブランドカラーとの統一感
- ▸アクセシビリティへの配慮
Dark
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸コントラストと視認性のバランス
- ▸ブランドカラーとの統一感
- ▸アクセシビリティへの配慮
Sand
セクション「Sand」Light
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸コントラストと視認性のバランス
- ▸ブランドカラーとの統一感
- ▸アクセシビリティへの配慮
Dark
見出しタイトル
サブタイトルのテキスト
本文テキストが入ります。配色によって与える印象は大きく変わります。視認性・ブランド感・感情への訴求、どれを重視するかがテーマ選定の鍵です。
- ▸コントラストと視認性のバランス
- ▸ブランドカラーとの統一感
- ▸アクセシビリティへの配慮
セマンティックカラー
セクション「セマンティックカラー」上記の Primary・アクセントカラーはテーマごとに異なりますが、Success・Warning・ Error・Info・Disabled の状態表現色はどのテーマを選んでも変化しない共通のシステム カラーです。全テーマで共通のため、テーマカードには含めずここに 1 箇所だけ掲載 しています。
Light
Success#15803D
Warning#B45309
Error#BE123C
Info#0E7490
Disabled#9CA3AF
Dark
Success#86EFAC
Warning#FCD34D
Error#FDA4AF
Info#67E8F9
Disabled#6B7280