ブランドパレット
Apothem のコアブランドカラーと、15 のハーネスブランドカラー（ハーネスの色ページで定義されています）。コアカラーの信頼できる唯一の情報源は、assets/design-tokens.css にある正規のデザイントークンで、サイトはそれらの値をミラーします。
コアパレット
正規のパレット — スレートのニュートラルランプ、エメラルドのアクセントランプ、セマンティックな色相 — は、
assets/design-tokens.css
（およびそのミラーである assets/design-tokens.json）にあるデザイントークンが所有します。
site/app/global.css
にあるサイトテーマは、セマンティックなトークン値を、Fumadocs テーマが使用する CSS 変数の中で OKLCH として再記述します。
ページの背景、テキスト、プライマリ、ボーダー、フォーカスリングの各変数は、トークンの正確なステップに解決されます（
lib/theme-tokens.test.mjs のチェックが、背景、前景、プライマリ、リングの各変数をそれらに一致させます）。同じファイルで宣言されている
apothem-*、polygon-*、field-* のランプは、トークンランプから導出した近似値であってコピーではなく、仕様の一部ではありません。以下のすべての値は、
デザイントークンにおけるスレートまたはエメラルドのランプのステップです。slate-600 のようなステップ名は、そのランプの値を指します。
| 役割 | トークン（CSS） | ライトモード | ダークモード | 用途 |
|---|---|---|---|---|
| プライマリ | --apothem-text | slate-900 #0f172a | slate-50 #f8fafc | 見出し、ナビゲーションのテキスト、主要な閲覧面。 |
| アクセント | --apothem-accent-text | emerald-700 #047857 | emerald-400 #34d399 | アクティブなリンク、フォーカスリング、選択中のナビゲーション。 |
| 本文テキスト | --apothem-text-muted | slate-600 #475066 | slate-300 #c2ccda | デフォルトの本文テキスト。 |
| 本文の地色 | --apothem-surface | slate-50 #f8fafc | slate-900 #0f172a | デフォルトの背景。 |
| ナビゲーションの地色 | --apothem-surface-sunken | slate-100 #eef2f7 | slate-950 #080c15 | ヘッダーとナビゲーションの帯。 |
ハーネスパレット
ハーネスの色はハーネスの色にあります。Apothem のマークはハーネスの色を持ちません。その六角形、中心ノード、終端ノードについては、assets/DESIGN-SYSTEM.md のマークのセクションで説明されています。ハーネスの色はそのページで定義されており、デザイントークンや site/app/global.css では定義されません。これらはコアパレットのみを保持します。
ドキュメントでの使用
パレットは、ルートレイアウトによってインポートされるグローバルスタイルシート site/app/global.css を通じて配線されています。ライトモードとダークモードのバリアントは、テーマの .dark クラスの状態に応じて切り替わります。
更新
パレットが更新されるのは、コアカラー（slate / emerald）が変化したとき、またはハーネスが上流でブランドカラーの変更を正式に承認したときだけです。ハーネスごとの変更は、ハーネスの色と、assets/src/ 配下の影響を受けるすべての SVG マスターにわたって、アトミックに伝播します。