Skip to content
Apothem
Diretrizes de marca

Cores de marca dos harnesses

Paleta de cores por harness usada em todo o site do projeto Apothem e em cada diagrama de arquitetura. Uma única fonte da verdade: uma cor por harness, um hub apothem.

As enumerações canônicas de nome de marca × código de cor abaixo estão envoltas em um bloco cercado text para preservar literalmente os identificadores por harness exigidos pelo propósito de catálogo da paleta.

Núcleo do Apothem

TokenClaroEscuroUso
apothem-hub#0F172A#F1F5F9O nó central de distribuição ("apothem") em cada diagrama de arquitetura.
shared-profile#10B981#34D399O perfil que é a fonte da verdade e alimenta o núcleo do apothem.

Paleta dos harnesses

Quinze dos dezessete harnesses são coloridos para combinar com sua identidade de marca principal, de modo que o leitor consiga distinguir as ferramentas em um diagrama. A própria marca Apothem usa apenas as cores ardósia e esmeralda da página de paleta; ela não carrega nenhuma cor de harness. Os dois restantes — glm e kimi-code — ainda não têm uma cor de marca definida; suas linhas são adicionadas assim que a cor de marca a montante for definida, conforme a etapa de propagação em Atualizações.

| 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.                                                                                                                                |

Marcas comerciais

Os nomes de harness, os nomes de produtos e as cores de marca nesta página e em todo o site pertencem aos seus proprietários e são marcas comerciais de seus respectivos proprietários. O Apothem nomeia uma ferramenta apenas para dizer qual delas ele configura e usa a cor de uma ferramenta apenas para distingui-la em um diagrama. O Apothem é um projeto independente; ele não é afiliado a, patrocinado por nem endossado por nenhuma dessas empresas ou projetos, e não distribui nenhum dos seus logotipos.

Justificativa dos nomes

  • apothem-hub — o centro geométrico que o nome evoca (o apótema de um polígono regular aponta para dentro, em direção ao seu núcleo).
  • shared-profile — a fonte a montante, distinta da cor de qualquer harness isolado, para que se leia como a seta de "entrada" em cada diagrama.
  • Tokens por harness espelham o slug do harness usado em toda a base de código (harnesses/<slug>/, a chave do ponto de entrada, o argumento --harness <slug> da CLI). Uma palavra por conceito; a mesma string em todos os lugares.

Uso no 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

Acessibilidade

Cada token de modo claro desta página, tanto os centrais quanto os de harness, mantém sua cor de marca sem distorção, de modo que oito deles ficam abaixo do contraste WCAG 2.2 AA contra texto branco (≥4.5 : 1). Os demais tokens de modo claro o atendem. Os oito, com o contraste de cada um contra o branco:

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

A coluna de modo escuro é para uso em fundos escuros, e nenhum dos seus tokens atinge 4.5 : 1 contra texto branco. O exemplo de Mermaid acima define texto branco em todos os preenchimentos, de modo que seus rótulos nesses oito preenchimentos não atingem 4.5 : 1. Um diagrama que precisa de contraste WCAG AA de texto sobre cor em um desses oito preenchimentos DEVE usar texto escuro (#0F172A, que mede de 4.63 : 1 a 8.31 : 1 sobre eles) em vez de branco.

Atualizações

A paleta é atualizada somente quando um harness ratifica uma mudança de marca a montante. As cores dos harnesses são definidas nesta página, não em assets/design-tokens.css nem em site/app/global.css. As mudanças de marca por harness se propagam atomicamente por esta página e por cada SVG mestre afetado em assets/src/.

Paleta de marca

Cores de marca centrais do Apothem e as quinze cores de marca dos harnesses, que são definidas na página Cores dos harnesses. Os tokens de design canônicos em assets/design-tokens.css são a única fonte da verdade para as cores centrais; o site espelha esses valores.

Uso do logo

Regras de uso do logo, incluindo variantes, tamanhos de raster, requisitos de espaço livre e aplicações permitidas versus proibidas.

On this page

Núcleo do ApothemPaleta dos harnessesMarcas comerciaisJustificativa dos nomesUso no MermaidAcessibilidadeAtualizações