Markenpalette
Apothem-Kernmarkenfarben und die fünfzehn Harness-Markenfarben, die auf der Seite „Harness-Farben“ definiert sind. Die einzige Quelle der Wahrheit für die Kernfarben 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
gibt die semantischen Token-Werte als OKLCH in den CSS-Variablen wieder, die das Fumadocs-Theme
konsumiert: Die Variablen für Seitenhintergrund, Text, Primärfarbe, Rahmen und Fokusring lösen
sich in die exakten Token-Schritte auf (die Prüfung lib/theme-tokens.test.mjs bindet die
Variablen für Hintergrund, Vordergrund, Primärfarbe und Ring an sie). Die in derselben Datei
deklarierten Rampen apothem-*, polygon-* und field-* sind abgeleitete Näherungen der
Token-Rampen, keine Kopien, und nicht Teil der Spezifikation. Jeder Wert unten ist ein Schritt
der Slate- oder Emerald-Rampe in den Design-Tokens; ein Schrittname wie slate-600 bezeichnet den
Wert dieser Rampe.
| Rolle | Token (CSS) | Heller Modus | Dunkler Modus | Verwendung |
|---|---|---|---|---|
| Primär | --apothem-text | slate-900 #0f172a | slate-50 #f8fafc | Überschriften, Navigationstext, primäre Leseflächen. |
| Akzent | --apothem-accent-text | emerald-700 #047857 | emerald-400 #34d399 | Aktive Links, Fokusringe, ausgewählte Navigation. |
| Fließtext | --apothem-text-muted | slate-600 #475066 | slate-300 #c2ccda | Standard-Fließtext. |
| Textgrund | --apothem-surface | slate-50 #f8fafc | slate-900 #0f172a | Standardhintergrund. |
| Navigationsgrund | --apothem-surface-sunken | slate-100 #eef2f7 | slate-950 #080c15 | Kopfzeilen- und Navigationsbänder. |
Harness-Palette
Die Harness-Farben befinden sich unter Harness-Farben. Die Apothem-Bildmarke trägt keine Harness-Farbe; ihr Sechseck, ihr Mittelknoten und ihre Endknoten sind im Markenabschnitt von assets/DESIGN-SYSTEM.md beschrieben. Die Harness-Farben sind auf jener Seite definiert, nicht in den Design-Tokens und nicht in site/app/global.css, die nur die Kernpalette enthalten.
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 vorgelagert eine Markenfarbenänderung ratifiziert. Änderungen je Harness propagieren atomar über 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
Farbpalette je Harness, die auf der gesamten Apothem-Projektwebsite und in jedem Architekturdiagramm verwendet wird. Eine einzige Quelle der Wahrheit: eine Farbe je Harness, ein apothem-Hub.