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.
Palette principale
La palette canonique — la rampe neutre slate, la rampe d'accent emerald et les
teintes sémantiques — appartient aux jetons de design définis dans
assets/design-tokens.css
(et son miroir assets/design-tokens.json). Le thème du site dans
site/app/global.css
reformule les valeurs des jetons sémantiques en OKLCH dans les variables CSS que consomme le thème
Fumadocs : les variables de fond de page, de texte, de couleur primaire, de bordure et d'anneau de focus
se résolvent exactement sur les paliers des jetons (la vérification lib/theme-tokens.test.mjs
impose ces paliers aux variables de fond, de premier plan, de couleur primaire et d'anneau). Les
rampes apothem-*, polygon-* et field-* déclarées dans le même fichier sont des approximations
dérivées des rampes de jetons, et non des copies, et ne font pas partie de la spécification. Chaque
valeur ci-dessous est un palier de la rampe slate ou emerald des jetons de design ; un nom de palier
tel que slate-600 renvoie à la valeur de cette rampe.
| Rôle | Jeton (CSS) | Mode clair | Mode sombre | Usage |
|---|---|---|---|---|
| Primaire | --apothem-text | slate-900 #0f172a | slate-50 #f8fafc | Titres, texte de navigation, surfaces de lecture principales. |
| Accent | --apothem-accent-text | emerald-700 #047857 | emerald-400 #34d399 | Liens actifs, anneaux de focus, navigation sélectionnée. |
| Texte du corps | --apothem-text-muted | slate-600 #475066 | slate-300 #c2ccda | Texte de prose par défaut. |
| Fond du corps | --apothem-surface | slate-50 #f8fafc | slate-900 #0f172a | Arrière-plan par défaut. |
| Fond de navigation | --apothem-surface-sunken | slate-100 #eef2f7 | slate-950 #080c15 | Bandes d'en-tête et de navigation. |
Palette des environnements
Les couleurs des environnements se trouvent dans Couleurs des environnements. La marque Apothem ne porte aucune couleur d'environnement ; son hexagone, son nœud central et ses nœuds terminaux sont décrits dans la section sur la marque de assets/DESIGN-SYSTEM.md. Les couleurs des environnements sont définies sur cette page-là, et non dans les jetons de design ni dans site/app/global.css, qui ne portent que la palette principale.
Usage dans la documentation
La palette est reliée via la feuille de styles globale site/app/global.css, importée par la mise en page racine. Les variantes de mode clair et sombre basculent avec l'état de la classe .dark du thème.
Mises à jour
La palette n'est mise à jour que lorsqu'une couleur principale change (slate / emerald) ou qu'un environnement ratifie un changement de couleur de marque en amont. Les changements par environnement se propagent de manière atomique à travers Couleurs des environnements et chaque master SVG concerné sous assets/src/.
Directives de marque
Discipline de nommage de la marque Apothem, variantes du logo, palette de couleurs et directives d'actifs pour une application de marque cohérente.
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.