Colors
Primitive Colorが基本パレットを、Semantic Colorがテーマ対応の配色を提供する2層構造。CSS変数ベースでフレームワーク非依存です。
Primitive Colors
基礎となるカラーパレット。これらの値はSemantic Tokenから参照されます。
gray
primary
secondary
blue
green
yellow
red
Semantic Colors
ライトモードとダークモード間で自動的に適応するテーマ対応カラー。同じCSS変数が各モードで異なる値を持ちます。
💡ダークモード背景は
dark.* プリミティブ（base / raised / overlay）を参照。grayスケールとは独立。トークン形式
Tailwind Class — 開発者がコードで直接使用するクラス
◻️
Background
ページやカードの背景色。4階層で深度を表現
Light
Dark
▢
Border
区切り線、入力フィールドの枠線
Light
Dark
📝
Text
テキストの階層（本文、補足、リンクなど）
Light
Dark
🎯
Primary
主要なアクションボタン、リンク、強調
Light
Dark
◐
Secondary
セカンダリボタン、補助的なUI要素
Light
Dark
●
Status
成功・警告・エラー・情報の状態表示
Light
Dark