Brand palette
Apothem core brand colors and the fifteen harness brand colors, which are defined on the Harness colors page. The single source of truth for the core colors is the canonical design tokens at assets/design-tokens.css; the site mirrors those values.
Core palette
The canonical palette — the slate neutral ramp, the emerald accent ramp, and
the semantic hues — is owned by the design tokens at
assets/design-tokens.css
(and its assets/design-tokens.json mirror). The site theme at
site/app/global.css
restates the semantic token values as OKLCH in the CSS variables the Fumadocs theme consumes: the
page background, text, primary, border and focus-ring variables resolve to the exact token steps (the
lib/theme-tokens.test.mjs check holds the background, foreground, primary and ring variables to
them). The apothem-*, polygon-* and field-* ramps declared in the same file are derived
approximations of the token ramps, not copies, and are not part of the specification. Every value
below is a step of the slate or emerald ramp in the design tokens; a step name such as slate-600
refers to that ramp's value.
| Role | Token (CSS) | Light mode | Dark mode | Use |
|---|---|---|---|---|
| Primary | --apothem-text | slate-900 #0f172a | slate-50 #f8fafc | Headings, navigation text, primary reading surfaces. |
| Accent | --apothem-accent-text | emerald-700 #047857 | emerald-400 #34d399 | Active links, focus rings, selected navigation. |
| Body text | --apothem-text-muted | slate-600 #475066 | slate-300 #c2ccda | Default prose text. |
| Body ground | --apothem-surface | slate-50 #f8fafc | slate-900 #0f172a | Default background. |
| Navigation ground | --apothem-surface-sunken | slate-100 #eef2f7 | slate-950 #080c15 | Header and navigation bands. |
Harness palette
The harness colors live at Harness colors. The Apothem mark carries no harness color; its hexagon, center node and terminus nodes are described in the mark section of assets/DESIGN-SYSTEM.md. The harness colors are defined on that page, not in the design tokens or in site/app/global.css, which carry the core palette only.
Usage in documentation
The palette is wired through the global stylesheet site/app/global.css, imported by the root layout. Light and dark mode variants switch with the theme's .dark class state.
Updates
The palette updates only when a core color shifts (slate / emerald) or a harness ratifies a brand-color change upstream. Per-harness changes propagate atomically across Harness colors and every affected SVG master under assets/src/.
Brand Guidelines
Apothem brand naming discipline, logo variants, color palette, and asset guidelines for consistent brand application.
Harness brand colors
Per-harness color palette used across the Apothem project website and every architectural diagram. One source of truth: one color per harness, one apothem hub.