Color Palette

デザインシステムで使用されるカラーパレットです。ライトテーマとダークテーマの両方に対応し、アクセシビリティと一貫性を重視した設計になっています。

Overview

カラーパレットは以下の3つの主要カテゴリで構成されています：

Text Colors: テキストの階層と意味を表現
Background Colors: レイアウトの階層と視覚的分離を提供
Accent Gradients: 特別な要素や装飾に使用

Text Colors

テキストの階層と意味を表現するカラーパレット

Primary

メインコンテンツや見出し

Secondary

補足情報やキャプション

Disabled

非活性状態のテキスト

Link

ハイパーリンクやクリック可能な要素

Error

エラーメッセージや警告

Success

成功状態のメッセージ

Background Colors

レイアウトの階層と視覚的分離を提供する背景色

Base

ページ全体の背景

Section

セクション区切りの背景

Content

コンテンツエリアの背景

Content Emphasis

強調されたコンテンツの背景

Accent Gradients

特別な要素や装飾に使用するグラデーション

Accent Gradient

装飾的な要素や特別な強調に使用

Design Principles

Accessibility First

すべてのカラーコンビネーションはWCAG 2.1 AA基準を満たし、十分なコントラスト比を確保しています。

Semantic Meaning

各カラーには明確な意味があり、ユーザーが直感的に理解できるよう設計されています。

Theme Consistency

ライトテーマとダークテーマ間で一貫した視覚的階層を維持しています。

Usage Guidelines

Text Colors

Primary: メインコンテンツや見出しに使用。最も高いコントラスト比を提供
Secondary: 補足情報やキャプションに使用。プライマリより控えめな印象
Disabled: 非活性状態のテキストに使用。操作不可能であることを示す
Link: ハイパーリンクやクリック可能な要素に使用。インタラクション可能であることを示す
Error: エラーメッセージや警告に使用。注意が必要であることを示す
Success: 成功状態のメッセージに使用。ポジティブな結果であることを示す

Background Colors

Base: ページ全体の背景色。最も基本的なレイヤー
Section: セクション区切りの背景色。コンテンツのグループ化に使用
Content: コンテンツエリアの背景色。メインコンテンツの読みやすさを向上
Content Emphasis: 強調されたコンテンツの背景色。重要な情報のハイライトに使用

Accent Gradients

装飾的な要素や特別な強調に使用するグラデーション。控えめに使用し、コンテンツの邪魔にならないよう注意が必要です。

Implementation

CSS Variables

カラートークンはCSS変数として定義されており、テーマ切り替えが容易です：

:root {
  --color-text-primary: #212121;
  --color-bg-base: #F3F8F6;
  /* ... */
}

Vanilla Extract

型安全なCSS-in-JSライブラリを使用して、コンパイル時にカラーの整合性を保証しています。

Best Practices

一貫性の維持: 同じ意味の要素には同じカラーを使用
コントラストの確保: テキストと背景のコントラスト比を常に確認
意味の明確化: カラーのみに依存せず、アイコンやテキストと組み合わせて使用
テーマ対応: ライトテーマとダークテーマの両方で適切に表示されることを確認