Markenpalette
Apothem-Kernmarkenfarben und die siebzehn Harness-Markenfarben. Die einzige Quelle der Wahrheit sind die kanonischen Design-Tokens in assets/design-tokens.css; die Website spiegelt diese Werte.
Kernpalette
Die kanonische Palette — die neutrale Slate-Rampe, die Emerald-Akzentrampe und die
semantischen Farbtöne — gehört zu den Design-Tokens in
assets/design-tokens.css
(und ihrem Spiegel assets/design-tokens.json). Das Website-Theme in
site/app/global.css
spiegelt diese Token-Werte in die CSS-Variablen, die das Fumadocs-Theme konsumiert. Jeder
Wert unten lässt sich auf einen kanonischen Rampenschritt zurückführen.
| Rolle | Token (CSS) | Heller Modus | Dunkler Modus | Verwendung |
|---|---|---|---|---|
| Primär | --brand-text | slate-900 #0f172a | slate-50 #f8fafc | Überschriften, Navigationstext, primäre Leseflächen. |
| Akzent | --sl-color-accent | emerald-600 #059669 | emerald-400 #34d399 | Aktive Links, Fokusringe, ausgewählte Navigation. |
| Fließtext | --brand-muted | slate-600 #475066 | slate-300 #c2ccda | Standard-Fließtext. |
| Textgrund | --brand-surface | white #ffffff | slate-900 #0f172a | Standardhintergrund. |
| Navigationsgrund | --brand-surface-muted | slate-50 #f8fafc | slate-950 #080c15 | Kopfzeilen- und Navigationsbänder. |
| Codegrund | --brand-code-bg | slate-900 #0f172a | slate-950 #080c15 | Inline-/Block-Code-Oberflächen. |
Harness-Palette
Die Harness-Farben befinden sich unter Harness-Farben. Die
geometrische Abbildung auf das Sechseck der Apothem-Bildmarke — ihren Mittelknoten und
ihren Endknoten — ist in den Markenabschnitt eingebettet. Die CSS-Quelle der Wahrheit in
site/app/global.css
verdrahtet jedes Token mit seiner CSS-Variablen.
Verwendung in der Dokumentation
Die Palette ist über das globale Stylesheet site/app/global.css verdrahtet, das vom
Root-Layout importiert wird. Die Varianten für hellen und dunklen Modus wechseln mit dem
Zustand der .dark-Klasse des Themes.
Aktualisierungen
Die Palette wird nur aktualisiert, wenn sich eine Kernfarbe ändert (slate / emerald) oder
ein Harness eine Markenfarbenänderung stromaufwärts ratifiziert. Änderungen je Harness
propagieren atomar über site/app/global.css,
Harness-Farben und jeden betroffenen SVG-Master unter
assets/src/.
Markenrichtlinien
Apothem-Markennamensdisziplin, Logo-Varianten, Farbpalette und Asset-Richtlinien für eine konsistente Markenanwendung.
Harness-Markenfarben
Markenfarbpalette je Harness, die auf der gesamten Apothem-Projektwebsite, in der Apothem-Bildmarke und in jedem Architekturdiagramm verwendet wird. Eine einzige Quelle der Wahrheit — siebzehn Markenfarben, ein apothem-Hub.