Skip to content
Apothem
Directives de marque

Couleurs de marque des environnements

Palette de couleurs par environnement utilisée sur tout le site web du projet Apothem et dans chaque diagramme d'architecture. Une source de vérité unique : une couleur par environnement, un concentrateur apothem.

Les énumérations canoniques nom de marque × code couleur ci-dessous sont placées dans un bloc délimité text afin de préserver à l'identique les identifiants par environnement qu'exige la fonction de catalogue de la palette.

Cœur d'Apothem

JetonClairSombreUsage
apothem-hub#0F172A#F1F5F9Le nœud de distribution central (« apothem ») dans chaque diagramme d'architecture.
shared-profile#10B981#34D399Le profil source de vérité qui alimente le cœur d'apothem.

Palette des environnements

Quinze des dix-sept environnements sont colorés selon leur identité de marque principale, afin qu'un lecteur puisse distinguer les outils dans un diagramme. La marque Apothem elle-même n'utilise que les couleurs ardoise et émeraude de la page palette ; elle ne porte aucune couleur d'environnement. Les deux restants — glm et kimi-code — n'ont pas encore de couleur de marque définie ; leurs lignes sont ajoutées une fois la couleur de marque amont fixée, selon l'étape de propagation décrite sous Mises à jour.

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

Marques commerciales

Les noms d'environnements, les noms de produits et les couleurs de marque figurant sur cette page et sur l'ensemble du site appartiennent à leurs propriétaires et sont des marques de leurs propriétaires respectifs. Apothem ne nomme un outil que pour indiquer lequel il configure, et n'utilise la couleur d'un outil que pour le distinguer dans un diagramme. Apothem est un projet indépendant ; il n'est affilié à aucune de ces entreprises ni à aucun de ces projets, n'est ni parrainé ni approuvé par eux, et ne distribue aucun de leurs logos.

Justification des noms

  • apothem-hub — le centre géométrique qu'évoque le nom (l'apothème d'un polygone régulier pointe vers l'intérieur, vers son centre).
  • shared-profile — la source amont, distincte de la couleur de tout environnement particulier afin qu'elle se lise comme la flèche d'« entrée » dans chaque diagramme.
  • Les jetons par environnement reprennent le slug d'environnement utilisé dans toute la base de code (harnesses/<slug>/, la clé du point d'entrée, l'argument --harness <slug> de la CLI). Un mot par concept ; la même chaîne partout.

Utilisation dans 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

Accessibilité

Chaque jeton du mode clair de cette page, qu'il appartienne au cœur ou aux environnements, conserve sa couleur de marque sans la déformer ; huit d'entre eux se situent donc sous le contraste WCAG 2.2 AA face à un texte blanc (≥4.5 : 1). Les autres jetons du mode clair l'atteignent. Les huit, avec leur contraste face au blanc :

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 colonne du mode sombre est destinée à être utilisée sur des fonds sombres, et aucun de ses jetons n'atteint 4.5 : 1 face à un texte blanc. L'exemple Mermaid ci-dessus définit un texte blanc sur chaque remplissage ; ses libellés sur ces huit remplissages n'atteignent donc pas 4.5 : 1. Un diagramme qui exige un contraste WCAG AA du texte sur la couleur pour l'un de ces huit remplissages DOIT utiliser un texte sombre (#0F172A, qui mesure de 4.63 : 1 à 8.31 : 1 sur ceux-ci) au lieu du blanc.

Mises à jour

La palette n'est mise à jour que lorsqu'un environnement ratifie un changement de marque en amont. Les couleurs des environnements sont définies sur cette page, et non dans assets/design-tokens.css ni dans site/app/global.css. Les changements de marque d'un environnement se propagent de manière atomique dans cette page et dans chaque master SVG concerné sous assets/src/.

Palette de marque

Couleurs de marque principales d'Apothem et les quinze couleurs de marque des environnements, qui sont définies sur la page Couleurs des environnements. La source unique de vérité pour les couleurs principales est constituée des jetons de design canoniques dans assets/design-tokens.css ; le site reflète ces valeurs.

Utilisation du logo

Règles d'utilisation du logo, incluant les variantes, les tailles raster, les exigences d'espace de protection et les applications autorisées face aux interdites.

On this page

Cœur d'ApothemPalette des environnementsMarques commercialesJustification des nomsUtilisation dans MermaidAccessibilitéMises à jour