On this page

12. Pack-System & Theming

12.1 Die 10 Packs#

Slug	Visual Identity
`minimal`	Clean, light, neutral
`editorial`	Warm cream, magazine-Typografie
`bold-conversion`	Dark + hot orange CTAs
`neobrutalist`	Raw, gelb/orange, harte Schatten, kein Radius
`aurora-glass`	Glassmorphism, dunkles Lila/Teal
`obsidian-luxury`	Schwarz + Gold, premium serif
`retro-future`	Neon Magenta/Cyan auf Deep-Purple
`verdant`	Sage green + warmes Ockerocker
`enterprise-trust`	Corporate blue, konservativ
`kinetic-editorial`	Red accent, sharp edges

12.2 Token-Shape#

Jeder Pack ist ein Object mit ~25 CSS-Custom-Property-Tokens:

{
  background: "0 0% 4%",         // HSL Triple ohne 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",
  // ...
}

Im SSR wird das zu :root { --background: 0 0% 4%; ... }. Tailwind nutzt dann bg-background was zu background-color: hsl(var(--background)) expandiert. Pack ändern = nur die Variables neu setzen, kein neuer Render-Code.

12.3 Pack-Switching live#

Im Editor: Pack-Dropdown → postMessage(CHANGE_PACK) → Preview applied neue Tokens → Mermaid-Diagramme reagieren über getComputedStyle(document.documentElement) → re-init mit neuen Theme-Variables → neue Farben.