Skip to content
Apothem
ブランドガイドライン

ハーネスのブランドカラー

Apothem プロジェクトのウェブサイト全体とすべてのアーキテクチャ図で使用される、ハーネスごとのカラーパレット。単一の信頼できる情報源 — ハーネスごとに 1 色、1 つの apothem ハブ。

以下の正規のブランド名 × カラーコードの列挙は、パレットのカタログという目的が必要とするハーネスごとの識別子を逐語的に保持するため、text フェンスで囲まれています。

Apothem コア

トークンライトダーク用途
apothem-hub#0F172A#F1F5F9すべてのアーキテクチャ図における中央の配布ノード(「apothem」)。
shared-profile#10B981#34D399apothem コアへ供給される、信頼できる情報源としてのプロファイル。

ハーネスパレット

17 のハーネスのうち 15 は、読者が図の中でツールを見分けられるよう、それぞれの主要なブランドアイデンティティに合わせて着色されています。 Apothem のマーク自体は、パレットページにあるスレートとエメラルドの色のみを使用し、ハーネスの色は含みません。 残りの 2 つ — glm と kimi-code — には、まだ定義されたブランドカラーがありません。それらの行は、更新にある伝播ステップに従い、上流のブランドカラーが設定された時点で追加されます。

| Token             | Light     | Dark      | Source                                                                                                                                              |
|-------------------|-----------|-----------|-----------------------------------------------------------------------------------------------------------------------------------------------------|
| `antigravity`     | `#7C3AED` | `#9F67FF` | Google Antigravity deep-purple.                                                                                                                     |
| `claude-code`     | `#CC785C` | `#E89378` | Anthropic terracotta-orange.                                                                                                                        |
| `codebuddy`       | `#0052D9` | `#5E8EF7` | Tencent CodeBuddy blue.                                                                                                                             |
| `codex`           | `#10A37F` | `#19C796` | OpenAI signature teal.                                                                                                                              |
| `cursor`          | `#6E56CF` | `#9B85E3` | Cursor brand purple.                                                                                                                                |
| `gemini-cli`      | `#4285F4` | `#6BA4F7` | Google blue.                                                                                                                                        |
| `github-copilot`  | `#0A3069` | `#5B8FE3` | GitHub Mona deep-blue.                                                                                                                              |
| `hermes`          | `#71717A` | `#A1A1AA` | Community silver-grey.                                                                                                                              |
| `kiro`            | `#790ECB` | `#A862DD` | Kiro violet.                                                                                                                                        |
| `open-claw`       | `#DC2626` | `#F87171` | Community red-orange.                                                                                                                               |
| `opencode`        | `#F59E0B` | `#FBBF24` | Community amber.                                                                                                                                    |
| `qwen-code`       | `#FF6A00` | `#FF8C40` | Alibaba Qwen orange.                                                                                                                                |
| `trae`            | `#FF0066` | `#FF599C` | ByteDance Trae magenta.                                                                                                                             |
| `windsurf`        | `#0EA5E9` | `#38BDF8` | Windsurf sky-blue.                                                                                                                                  |
| `zed`             | `#084CCF` | `#5E8BE0` | Zed Industries blue.                                                                                                                                |

商標

このページおよびサイト全体に掲載されているハーネス名、製品名、ブランドカラーはそれぞれの所有者に帰属し、それぞれの所有者の商標です。 Apothem がツールの名前を挙げるのは、どのツールを設定するかを示すためだけであり、ツールの色を使うのは、図の中でそのツールを見分けるためだけです。 Apothem は独立したプロジェクトです。これらの企業やプロジェクトのいずれとも提携しておらず、いずれからも後援や推奨を受けておらず、それらのロゴを一切同梱していません。

命名の根拠

  • apothem-hub — 名前が想起させる幾何学的な中心(正多角形の辺心距は、その中心へ向かって内向きに伸びます)。
  • shared-profile — 上流のソースであり、どの単一のハーネスの色とも区別されるため、すべての図で「入力」の矢印として読み取れます。
  • ハーネスごとのトークンは、コードベース全体で使用されるハーネスのスラッグ(harnesses/<slug>/、エントリーポイントのキー、CLI の --harness <slug> 引数)を反映します。1 つの概念に 1 つの語を使い、どこでも同じ文字列を使います。

Mermaid での使用

graph LR
    P["shared profile"]:::shared-profile --> A["apothem"]:::apothem-hub
    A --> AG["Antigravity"]:::antigravity
    A --> CC["Claude Code"]:::claude-code
    A --> CB["CodeBuddy"]:::codebuddy
    A --> CO["Codex"]:::codex
    A --> CU["Cursor"]:::cursor
    A --> GE["Gemini CLI"]:::gemini-cli
    A --> GC["GitHub Copilot"]:::github-copilot
    A --> HE["Hermes"]:::hermes
    A --> KI["Kiro"]:::kiro
    A --> OW["Open-Claw"]:::open-claw
    A --> OC["OpenCode"]:::opencode
    A --> QW["Qwen Code"]:::qwen-code
    A --> TR["Trae"]:::trae
    A --> WI["Windsurf"]:::windsurf
    A --> ZE["Zed"]:::zed

    classDef apothem-hub fill:#0F172A,stroke:#0F172A,color:#FFFFFF
    classDef shared-profile fill:#10B981,stroke:#10B981,color:#FFFFFF
    classDef antigravity fill:#7C3AED,stroke:#7C3AED,color:#FFFFFF
    classDef claude-code fill:#CC785C,stroke:#CC785C,color:#FFFFFF
    classDef codebuddy fill:#0052D9,stroke:#0052D9,color:#FFFFFF
    classDef codex fill:#10A37F,stroke:#10A37F,color:#FFFFFF
    classDef cursor fill:#6E56CF,stroke:#6E56CF,color:#FFFFFF
    classDef gemini-cli fill:#4285F4,stroke:#4285F4,color:#FFFFFF
    classDef github-copilot fill:#0A3069,stroke:#0A3069,color:#FFFFFF
    classDef hermes fill:#71717A,stroke:#71717A,color:#FFFFFF
    classDef kiro fill:#790ECB,stroke:#790ECB,color:#FFFFFF
    classDef open-claw fill:#DC2626,stroke:#DC2626,color:#FFFFFF
    classDef opencode fill:#F59E0B,stroke:#F59E0B,color:#FFFFFF
    classDef qwen-code fill:#FF6A00,stroke:#FF6A00,color:#FFFFFF
    classDef trae fill:#FF0066,stroke:#FF0066,color:#FFFFFF
    classDef windsurf fill:#0EA5E9,stroke:#0EA5E9,color:#FFFFFF
    classDef zed fill:#084CCF,stroke:#084CCF,color:#FFFFFF

アクセシビリティ

このページの各ライトモードトークンは、コアのものもハーネスのものも、ブランドカラーを歪めずに保っているため、そのうち 8 つは、白色テキストに対する WCAG 2.2 AA のコントラスト(≥4.5 : 1)を下回ります。残りのライトモードトークンは、これを満たします。その 8 つと、白に対するコントラストは次のとおりです。

shared-profile   2.54 : 1
claude-code      3.28 : 1
codex            3.20 : 1
gemini-cli       3.56 : 1
opencode         2.15 : 1
qwen-code        2.87 : 1
trae             3.86 : 1
windsurf         2.77 : 1

ダークモードの列はダーク背景で使用するためのものであり、そのトークンはいずれも白色テキストに対して 4.5 : 1 に達しません。上の Mermaid の例ではすべての塗りつぶしに白色テキストを設定しているため、これら 8 つの塗りつぶしの上のラベルは 4.5 : 1 に達しません。これら 8 つの塗りつぶしの上で WCAG AA の文字色コントラストを必要とする図は、白の代わりに暗い色のテキスト(#0F172A。これらの上で 4.63 : 1 から 8.31 : 1 を示します)を使用しなければなりません(MUST)。

更新

パレットが更新されるのは、ハーネスが上流でブランド変更を正式に承認したときだけです。ハーネスの色は、assets/design-tokens.css や site/app/global.css ではなく、このページで定義されます。ハーネスごとのブランド変更は、このページと assets/src/ 配下の影響を受けるすべての SVG マスターにわたって、アトミックに伝播します。

On this page