On this page

12. Pack System & Theming

12.1 The 10 Packs#

Slug	Visual Identity
`minimal`	Clean, light, neutral
`editorial`	Warm cream, magazine typography
`bold-conversion`	Dark + hot orange CTAs
`neobrutalist`	Raw, yellow/orange, hard shadows, no radius
`aurora-glass`	Glassmorphism, dark purple/teal
`obsidian-luxury`	Black + Gold, premium serif
`retro-future`	Neon Magenta/Cyan on Deep-Purple
`verdant`	Sage green + warm ochre
`enterprise-trust`	Corporate blue, conservative
`kinetic-editorial`	Red accent, sharp edges

12.2 Token Shape#

Each Pack is an object with ~25 CSS custom property tokens:

{
  background: "0 0% 4%",         // HSL triple without hsl() wrapper
  foreground: "0 0% 96%",
  muted: "0 0% 12%",
  primary: "25 95% 53%",          // bold-conversion: hot orange
  border: "0 0% 16%",
  card: "0 0% 12%",
  "font-sans": "Sora, system-ui, sans-serif",
  "font-display": "Sora, ...",
  radius: "0.5rem",
  // ...
}

In SSR, this becomes :root { --background: 0 0% 4%; ... }. Tailwind then uses bg-background which expands to background-color: hsl(var(--background)). Changing a Pack = just resetting the variables, no new render code.

12.3 Live Pack Switching#

In the editor: Pack dropdown → `postMessage(CHANGE_PACK)` → Preview applies new tokens → Mermaid diagrams react via `getComputedStyle(document.documentElement)` → re-init with new theme variables → new colors.#