Colores de marca de los entornos
Paleta de colores de marca por entorno usada en todo el sitio web del proyecto Apothem, en el logotipo de Apothem y en cada diagrama de arquitectura. Una única fuente de verdad: diecisiete colores de marca, un concentrador apothem.
Las enumeraciones canónicas de nombre-de-marca × código-de-color de abajo están envueltas en una valla text para preservar los identificadores literales por entorno que requiere el propósito de catálogo de la paleta.
Núcleo de Apothem
| Token | Claro | Oscuro | Uso |
|---|---|---|---|
apothem-hub | #0F172A | #F1F5F9 | El nodo central de distribución ("apothem") en cada diagrama de arquitectura y el concentrador central del logotipo de Apothem. |
shared-profile | #10B981 | #34D399 | El perfil fuente-de-verdad que 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. 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 en
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 (primary); the Apothem mark renders the node with all four Google brand hues `#4285F4` / `#34A853` / `#FBBC04` / `#EA4335`. |
| `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. |Justificación de los nombres
apothem-hub: el centro geométrico que evoca el nombre (el apotema de un polígono regular apunta hacia 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.- Tokens por entorno que 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 de 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:#FFFFFFAccesibilidad
Cada token de modo claro cumple el contraste WCAG 2.2 AA frente a texto blanco (≥4,5 : 1) donde el contraste lo permite sin distorsionar el color de marca. Cuando el color de marca nativo de un entorno cae por debajo del umbral AA frente a texto blanco por sí solo (en especial la familia ámbar / naranja y la familia azul cielo / verde azulado de tokens enumerada arriba), los diagramas que necesitan contraste WCAG AA de texto-sobre-color usan la variante de modo oscuro (el tono elevado) como relleno del diagrama para que el texto blanco se lea con claridad. La columna de modo oscuro está calibrada para este fin: cada token de modo oscuro supera el AA frente a texto blanco.
Actualizaciones
La paleta se actualiza solo cuando un entorno ratifica un cambio de marca aguas arriba. Los cambios de marca por entorno se propagan de forma atómica a través de site/app/global.css, esta página y cada máster SVG afectado bajo assets/src/.
Paleta de marca
Colores de marca centrales de Apothem y los diecisiete colores de marca de los entornos. La única fuente de verdad 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.