Skip to content
Apothem
Directrices de marca

Colores de marca de los entornos

Paleta de colores por entorno usada en el sitio web del proyecto Apothem y en cada diagrama de arquitectura. Una única fuente de verdad: un color por entorno, un concentrador apothem.

Las enumeraciones canónicas de nombre de marca × código de color de abajo están envueltas en un bloque delimitado text para preservar los identificadores literales por entorno que requiere el propósito de catálogo de la paleta.

Núcleo de Apothem

TokenClaroOscuroUso
apothem-hub#0F172A#F1F5F9El nodo central de distribución («apothem») en cada diagrama de arquitectura.
shared-profile#10B981#34D399El perfil que es la fuente de verdad y alimenta el núcleo de apothem.

Paleta de entornos

Quince de los diecisiete entornos están coloreados para coincidir con su identidad de marca principal, de modo que un lector pueda distinguir las herramientas en un diagrama. La propia marca de Apothem usa solo los colores pizarra y esmeralda de la página de paleta; no lleva ningún color de entorno. Los dos restantes — glm y kimi-code — aún no tienen un color de marca definido; sus filas se añaden una vez que se fija el color de marca aguas arriba, según el paso de propagación de Actualizaciones.

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

Los nombres de los entornos, los nombres de productos y los colores de marca de esta página y de todo el sitio pertenecen a sus propietarios y son marcas comerciales de sus respectivos propietarios. Apothem nombra una herramienta solo para indicar cuál configura, y usa el color de una herramienta solo para distinguirla en un diagrama. Apothem es un proyecto independiente; no está afiliado a ninguna de estas empresas o proyectos, ni patrocinado ni respaldado por ellos, y no distribuye ninguno de sus logotipos.

Justificación de los nombres

  • apothem-hub — el centro geométrico que evoca el nombre (la apotema de un polígono regular apunta hacia dentro, a su núcleo).
  • shared-profile — la fuente aguas arriba, distinta de cualquier color de un único entorno para que se lea como la flecha de «entrada» en cada diagrama.
  • Los tokens por entorno reflejan el slug del entorno usado en toda la base de código (harnesses/<slug>/, la clave del punto de entrada, el argumento --harness <slug> de la CLI). Una palabra por concepto; la misma cadena en todas partes.

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

Accesibilidad

Cada token de modo claro de esta página, tanto del núcleo como de los entornos, conserva su color de marca sin distorsionarlo, por lo que ocho de ellos quedan por debajo del contraste WCAG 2.2 AA frente a texto blanco (≥4.5 : 1). Los demás tokens de modo claro lo cumplen. Los ocho, con su contraste frente al blanco:

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

La columna de modo oscuro es para usarse sobre fondos oscuros, y ninguno de sus tokens alcanza 4.5 : 1 frente a texto blanco. El ejemplo de Mermaid anterior establece texto blanco en cada relleno, por lo que sus etiquetas sobre esos ocho rellenos no alcanzan 4.5 : 1. Un diagrama que necesite un contraste WCAG AA de texto sobre color en uno de esos ocho rellenos DEBE usar texto oscuro (#0F172A, que mide de 4.63 : 1 a 8.31 : 1 sobre ellos) en lugar de blanco.

Actualizaciones

La paleta se actualiza solo cuando un entorno ratifica un cambio de marca aguas arriba. Los colores de los entornos se definen en esta página, no en assets/design-tokens.css ni en site/app/global.css. Los cambios de marca por entorno se propagan de forma atómica a esta página y a cada SVG maestro afectado bajo assets/src/.

Paleta de marca

Colores de marca centrales de Apothem y los quince colores de marca de los entornos, que se definen en la página Colores de entornos. La única fuente de verdad de los colores centrales son los tokens de diseño canónicos en assets/design-tokens.css; el sitio refleja esos valores.

Uso del logo

Reglas de uso del logo, incluidas variantes, tamaños de ráster, requisitos de espacio libre y aplicaciones permitidas frente a prohibidas.

On this page

Núcleo de ApothemPaleta de entornosMarcas comercialesJustificación de los nombresUso en MermaidAccesibilidadActualizaciones