Redesign book interior: Illuminated Nocturne aesthetic

Replaces Georgia + per-story color theming with a unified premium
fairytale look: Cormorant Garamond (display/titles) + Lora (body),
warm cream text pages (#faf8f2 with paper noise texture), deep ink
typography (#1e1b18) throughout — no per-story text color variation.

- fonts/: committed WOFF2 files via @fontsource packages; auto-copied
  by scripts/setup-fonts.js (runs as postinstall)
- Typography: story number in small caps, hairline rule, ❧ ornament
- Layout: cream background replaces per-story bg, radial glow on title
- build.js: passes frontMatter (author, year) to templates
- Templates: author byline on title page, cleaner imprint page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

content/00-front-matter.md

@@ -2,6 +2,6 @@
 type: front-matter
 title: "Das Kaleidoskop der Schlummerwelten"
 subtitle: "Zwölf magische Geschichten für die Nacht"
-author: ""
+author: "Sebastian Krüger"
-year: "2025"
+year: "2026"
 ---

package.json

@@ -4,6 +4,8 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "postinstall": "node scripts/setup-fonts.js",
+    "setup-fonts": "node scripts/setup-fonts.js",
     "build": "node scripts/build.js",
     "pdf": "node scripts/pdf.js",
     "cover": "node scripts/cover.js",
@@ -12,9 +14,13 @@
     "watch": "node --watch scripts/build.js"
   },
   "pnpm": {
-    "onlyBuiltDependencies": ["puppeteer"]
+    "onlyBuiltDependencies": [
+      "puppeteer"
+    ]
   },
   "dependencies": {
+    "@fontsource/cormorant-garamond": "^5.2.11",
+    "@fontsource/lora": "^5.2.8",
     "gray-matter": "^4.0.3",
     "marked": "^12.0.0",
     "nunjucks": "^3.2.4",

pnpm-lock.yaml

@@ -8,6 +8,12 @@ importers:
 
   .:
     dependencies:
+      '@fontsource/cormorant-garamond':
+        specifier: ^5.2.11
+        version: 5.2.11
+      '@fontsource/lora':
+        specifier: ^5.2.8
+        version: 5.2.8
       gray-matter:
         specifier: ^4.0.3
         version: 4.0.3
@@ -31,6 +37,12 @@ packages:
     resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
+  '@fontsource/cormorant-garamond@5.2.11':
+    resolution: {integrity: sha512-5JjpN023lhA5soijgVT0BdRGzmlijm402ppjccMd6h+vRE0mX2lJnE+41UPfnlidrkV9/rCo1mf58WZlHnB0CA==}
+
+  '@fontsource/lora@5.2.8':
+    resolution: {integrity: sha512-AQlfsHw4TP1x/eb2IZ6VjQ70ctKa39m9JN9A4zlvDOeKYLrCs+GaYIEQ86Y6YfSPGHn01bErXkRcyktOW0LOPQ==}
+
   '@puppeteer/browsers@2.13.0':
     resolution: {integrity: sha512-46BZJYJjc/WwmKjsvDFykHtXrtomsCIrwYQPOP7VfMJoZY2bsDF9oROBABR3paDjDcmkUye1Pb1BqdcdiipaWA==}
     engines: {node: '>=18'}
@@ -498,6 +510,10 @@ snapshots:
 
   '@babel/helper-validator-identifier@7.28.5': {}
 
+  '@fontsource/cormorant-garamond@5.2.11': {}
+
+  '@fontsource/lora@5.2.8': {}
+
   '@puppeteer/browsers@2.13.0':
     dependencies:
       debug: 4.4.3

scripts/build.js

@@ -56,10 +56,15 @@ async function loadStories() {
   return { stories, finale: finale || {} };
 }
 
-async function build() {
+async function loadFrontMatter() {
-  const { stories, finale } = await loadStories();
+  const raw = await readFile(join(root, 'content', '00-front-matter.md'), 'utf-8');
+  return matter(raw).data;
+}
 
-  const html = env.render('book.html', { stories, finale });
+async function build() {
+  const [{ stories, finale }, frontMatter] = await Promise.all([loadStories(), loadFrontMatter()]);
+
+  const html = env.render('book.html', { stories, finale, frontMatter });
 
   const outPath = join(root, 'output', 'book.html');
   await writeFile(outPath, html, 'utf-8');

scripts/setup-fonts.js

@@ -0,0 +1,26 @@
+import { copyFile, mkdir } from 'fs/promises';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dir = dirname(fileURLToPath(import.meta.url));
+const root  = resolve(__dir, '..');
+const dest  = resolve(root, 'fonts');
+const nm    = resolve(root, 'node_modules');
+
+const files = [
+  ['@fontsource/cormorant-garamond/files/cormorant-garamond-latin-300-italic.woff2', 'cormorant-garamond-300-italic.woff2'],
+  ['@fontsource/cormorant-garamond/files/cormorant-garamond-latin-400-normal.woff2', 'cormorant-garamond-400-normal.woff2'],
+  ['@fontsource/cormorant-garamond/files/cormorant-garamond-latin-400-italic.woff2', 'cormorant-garamond-400-italic.woff2'],
+  ['@fontsource/cormorant-garamond/files/cormorant-garamond-latin-600-italic.woff2', 'cormorant-garamond-600-italic.woff2'],
+  ['@fontsource/lora/files/lora-latin-400-normal.woff2',  'lora-400-normal.woff2'],
+  ['@fontsource/lora/files/lora-latin-400-italic.woff2',  'lora-400-italic.woff2'],
+  ['@fontsource/lora/files/lora-latin-500-normal.woff2',  'lora-500-normal.woff2'],
+];
+
+await mkdir(dest, { recursive: true });
+
+for (const [src, name] of files) {
+  await copyFile(resolve(nm, src), resolve(dest, name));
+}
+
+console.log(`Fonts copied to fonts/ (${files.length} files)`);

styles/layout.css

@@ -10,14 +10,13 @@
   display: block;
 }
 
-/* Placeholder when image not yet available */
+/* Placeholder shown when image not yet available */
 .placeholder-image {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  opacity: 0.8;
 }
 
 .placeholder-label {
@@ -25,28 +24,33 @@
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
-  color: rgba(255,255,255,0.9);
+  color: rgba(255, 255, 255, 0.75);
   text-align: center;
-  padding: 2rem;
+  padding: 1.5rem 2.5rem;
-  border: 2px dashed rgba(255,255,255,0.4);
+  border: 1px dashed rgba(255, 255, 255, 0.25);
-  border-radius: 12px;
+  border-radius: 4px;
 }
 
 .placeholder-story {
-  font-size: 0.9rem;
+  font-size: 0.75rem;
   text-transform: uppercase;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.15em;
-  opacity: 0.7;
+  opacity: 0.6;
 }
 
 .placeholder-scene {
-  font-size: 1.4rem;
+  font-size: 1.15rem;
-  font-weight: 600;
+  font-weight: 500;
+  line-height: 1.4;
 }
 
 /* ── Text pages ── */
 .page--text {
-  background: var(--color-bg, #fafafa);
+  background: var(--cream, #faf8f2);
+  /* Subtle paper texture via SVG noise */
+  background-image:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
+  background-repeat: repeat;
   display: flex;
   align-items: center;
 }
@@ -55,41 +59,40 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 1.2rem;
+  gap: 0;
 }
 
 .scene-ornament {
-  font-size: 1.5rem;
-  color: var(--color-secondary, #ccc);
-  text-align: center;
   margin-top: auto;
 }
 
-/* ── Front matter pages ── */
+/* ── Title page ── */
 .page--title {
-  background: #1a1a3e;
+  background: var(--midnight, #0d0d2b);
+  /* Radial glow toward center */
+  background-image: radial-gradient(ellipse at 50% 45%, #1a1a4a 0%, #0d0d2b 65%);
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
 }
 
+.title-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* ── Imprint page ── */
 .page--imprint {
-  background: #fafafa;
+  background: var(--cream, #faf8f2);
   display: flex;
   align-items: flex-end;
 }
 
-.imprint-content {
-  width: 100%;
-  font-size: 0.75rem;
-  color: #666;
-  line-height: 1.8;
-}
-
 /* ── Table of contents ── */
 .page--toc {
-  background: #fafafa;
+  background: var(--cream, #faf8f2);
   display: flex;
   flex-direction: column;
   gap: 2rem;
@@ -100,28 +103,25 @@
   counter-reset: toc;
   display: flex;
   flex-direction: column;
-  gap: 0.8rem;
+  gap: 0.7rem;
 }
 
 .toc-list li {
   counter-increment: toc;
   display: flex;
   align-items: baseline;
-  gap: 0.75rem;
+  gap: 0.8rem;
-  font-size: 1rem;
-  color: #2a2a4a;
 }
 
 .toc-list li::before {
   content: counter(toc, decimal-leading-zero);
-  font-size: 0.8rem;
+  min-width: 2.2rem;
-  color: #aaa;
+  flex-shrink: 0;
-  min-width: 2rem;
 }
 
 /* ── Finale page ── */
 .page--finale {
-  background: #1a1a2e;
+  background: var(--midnight, #0d0d2b);
   position: relative;
 }
 
@@ -139,7 +139,6 @@
   align-items: center;
   justify-content: flex-end;
   padding-bottom: 1in;
-  color: white;
   text-align: center;
-  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
+  background: linear-gradient(to top, rgba(13, 13, 43, 0.75) 0%, transparent 55%);
 }

styles/print.css

@@ -24,11 +24,10 @@ html, body {
   break-after: page;
 }
 
-/* Safe zone: content that must not be cut stays 0.25in from bleed edge */
+/* Safe zone: 0.125in bleed + 0.675in margin = 0.8in from PDF edge */
 .page--text .text-page-inner,
 .page--title .title-content,
 .page--toc,
 .page--imprint .imprint-content {
-  /* 0.125in bleed + 0.25in safety margin = 0.375in from PDF edge */
+  padding: 0.8in;
-  padding: 0.75in;
 }

styles/typography.css

@@ -1,58 +1,185 @@
-/* ── Base typography ── */
+/* ── Cormorant Garamond — display, titles, ornaments ── */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/cormorant-garamond-400-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: italic;
+  font-weight: 300;
+  src: url('../fonts/cormorant-garamond-300-italic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: italic;
+  font-weight: 400;
+  src: url('../fonts/cormorant-garamond-400-italic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: italic;
+  font-weight: 600;
+  src: url('../fonts/cormorant-garamond-600-italic.woff2') format('woff2');
+}
+
+/* ── Lora — body text ── */
+@font-face {
+  font-family: 'Lora';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/lora-400-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Lora';
+  font-style: italic;
+  font-weight: 400;
+  src: url('../fonts/lora-400-italic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Lora';
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/lora-500-normal.woff2') format('woff2');
+}
+
+/* ── Design tokens ── */
+:root {
+  --ink:          #1e1b18;
+  --ink-muted:    rgba(30, 27, 24, 0.38);
+  --ink-rule:     rgba(30, 27, 24, 0.18);
+  --cream:        #faf8f2;
+  --midnight:     #0d0d2b;
+  --gold:         #b89a4e;
+
+  --font-display: 'Cormorant Garamond', Georgia, serif;
+  --font-body:    'Lora', Georgia, serif;
+}
+
+/* ── Base ── */
 body {
-  font-family: Georgia, 'Times New Roman', serif;
+  font-family: var(--font-body);
+  color: var(--ink);
   -webkit-print-color-adjust: exact;
   print-color-adjust: exact;
 }
 
 /* ── Title page ── */
 .title-eyebrow {
-  font-size: 0.85rem;
+  font-family: var(--font-display);
-  letter-spacing: 0.2em;
+  font-style: italic;
+  font-weight: 300;
+  font-size: 0.9rem;
+  letter-spacing: 0.22em;
   text-transform: uppercase;
-  color: rgba(255,255,255,0.6);
+  color: rgba(255, 255, 255, 0.5);
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.8rem;
 }
 
 .title-main {
-  font-size: 3rem;
+  font-family: var(--font-display);
-  line-height: 1.2;
-  color: white;
-  margin-bottom: 1.5rem;
   font-style: italic;
+  font-weight: 300;
+  font-size: 3.4rem;
+  line-height: 1.15;
+  color: #ffffff;
+  margin-bottom: 1.6rem;
+  letter-spacing: 0.01em;
+}
+
+.title-author {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-weight: 400;
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.65);
+  letter-spacing: 0.12em;
+  margin-bottom: 0.5rem;
 }
 
 .title-sub {
-  font-size: 1.1rem;
+  font-family: var(--font-display);
-  color: rgba(255,255,255,0.8);
+  font-style: italic;
-  letter-spacing: 0.05em;
+  font-weight: 300;
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.45);
+  letter-spacing: 0.08em;
+}
+
+.title-rule {
+  width: 3rem;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.25);
+  margin: 1.4rem auto;
+}
+
+/* ── Imprint page ── */
+.imprint-content {
+  font-family: var(--font-body);
+  font-size: 0.72rem;
+  color: var(--ink-muted);
+  line-height: 2;
 }
 
 /* ── Table of contents ── */
 .toc-title {
-  font-size: 1.6rem;
+  font-family: var(--font-display);
-  color: #1a1a3e;
   font-style: italic;
-  border-bottom: 1px solid #ddd;
+  font-weight: 300;
-  padding-bottom: 0.5rem;
+  font-size: 1.9rem;
+  color: var(--ink);
+  padding-bottom: 0.6rem;
+  border-bottom: 1px solid var(--ink-rule);
+  margin-bottom: 0.2rem;
 }
 
-/* ── Story title (first scene right page) ── */
+.toc-list li {
-.story-title {
+  font-family: var(--font-body);
-  font-size: 1.6rem;
+  font-size: 0.95rem;
-  color: var(--color-primary);
+  color: var(--ink);
+  line-height: 1.5;
+}
+
+.toc-list li::before {
+  font-family: var(--font-display);
   font-style: italic;
-  line-height: 1.3;
+  font-size: 0.8rem;
-  border-bottom: 2px solid var(--color-secondary);
+  color: var(--ink-muted);
-  padding-bottom: 0.5rem;
+}
-  margin-bottom: 0.5rem;
+
+/* ── Story number label ── */
+.story-number {
+  display: block;
+  font-family: var(--font-display);
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.7rem;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+  margin-bottom: 0.55rem;
+}
+
+/* ── Story title ── */
+.story-title {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-weight: 300;
+  font-size: 1.85rem;
+  line-height: 1.25;
+  color: var(--ink);
+  padding-bottom: 0.6rem;
+  border-bottom: 1px solid var(--ink-rule);
+  margin-bottom: 1rem;
 }
 
 /* ── Scene text ── */
 .scene-text {
-  font-size: 1.05rem;
+  font-family: var(--font-body);
-  line-height: 1.85;
+  font-size: 1.02rem;
-  color: var(--color-text, #1a1a2e);
+  line-height: 1.9;
+  color: var(--ink);
 }
 
 .scene-text p {
@@ -67,31 +194,32 @@ body {
   font-style: italic;
 }
 
-/* Story 9 has dark background — invert text page */
+/* ── Scene ornament ── */
-[data-story="9"].page--text {
+.scene-ornament {
-  background: #0a0a2a;
+  font-family: var(--font-display);
+  font-size: 1.4rem;
+  color: var(--ink-muted);
+  text-align: center;
+  margin-top: auto;
+  padding-top: 0.5rem;
 }
 
-[data-story="9"] .scene-text,
+/* ── Finale overlay ── */
-[data-story="9"] .story-title {
-  color: #ffffff;
-}
-
-[data-story="9"] .story-title {
-  border-color: #ff1493;
-}
-
-/* ── Finale ── */
 .finale-overlay h2 {
-  font-size: 2.5rem;
+  font-family: var(--font-display);
-  color: white;
   font-style: italic;
-  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
+  font-weight: 300;
+  font-size: 2.6rem;
+  color: white;
+  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
+  letter-spacing: 0.02em;
 }
 
 .finale-overlay p {
-  font-size: 1rem;
+  font-family: var(--font-display);
-  color: rgba(255,255,255,0.8);
+  font-style: italic;
-  letter-spacing: 0.1em;
+  font-size: 0.95rem;
-  margin-top: 0.5rem;
+  color: rgba(255, 255, 255, 0.7);
+  letter-spacing: 0.12em;
+  margin-top: 0.6rem;
 }

templates/book.html

@@ -2,7 +2,6 @@
 <html lang="de">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Das Kaleidoskop der Schlummerwelten</title>
   <link rel="stylesheet" href="../styles/print.css">
   <link rel="stylesheet" href="../styles/layout.css">
@@ -14,16 +13,22 @@
   <div class="page page--title">
     <div class="title-content">
       <p class="title-eyebrow">Eine Sammlung von</p>
+      <div class="title-rule"></div>
       <h1 class="title-main">Das Kaleidoskop<br>der Schlummerwelten</h1>
+      <div class="title-rule"></div>
       <p class="title-sub">Zwölf magische Geschichten für die Nacht</p>
+      {% if frontMatter.author %}
+        <p class="title-author">{{ frontMatter.author }}</p>
+      {% endif %}
     </div>
   </div>
 
   {# ── Copyright / imprint page ── #}
   <div class="page page--imprint">
     <div class="imprint-content">
-      <p>Erste Ausgabe</p>
+      <p>{{ frontMatter.title or 'Das Kaleidoskop der Schlummerwelten' }}</p>
-      <p>Alle Rechte vorbehalten.</p>
+      <p>{% if frontMatter.author %}{{ frontMatter.author }}{% endif %}{% if frontMatter.year %}, {{ frontMatter.year }}{% endif %}</p>
+      <p>Erste Ausgabe · Alle Rechte vorbehalten.</p>
       <p>Illustrationen: KI-generiert (Dreamy Watercolor / Whimsical Storybook)</p>
     </div>
   </div>
@@ -33,20 +38,14 @@
     <h2 class="toc-title">Die zwölf Welten</h2>
     <ol class="toc-list">
       {% for story in stories %}
-        {% if story.type != 'front-matter' and story.type != 'finale' %}
         <li>{{ story.title }}</li>
-        {% endif %}
       {% endfor %}
     </ol>
   </div>
 
   {# ── Stories ── #}
   {% for story in stories %}
-    {% if story.type == 'front-matter' or story.type == 'finale' %}
-      {# skip — handled separately #}
-    {% else %}
     {% include "story-spread.html" %}
-    {% endif %}
   {% endfor %}
 
   {# ── Finale page ── #}
@@ -54,8 +53,10 @@
     {% if finale.image %}
       <img class="finale-image" src="{{ finale.image }}" alt="Das Kaleidoskop – alle zwölf Welten">
     {% else %}
-      <div class="placeholder-image placeholder-image--finale">
+      <div class="placeholder-image" style="background: #0d0d2b; width:100%; height:100%;">
-        <span>Finale-Illustration (alle 12 Welten)</span>
+        <div class="placeholder-label">
+          <span class="placeholder-scene">Finale-Illustration (alle 12 Welten)</span>
+        </div>
       </div>
     {% endif %}
     <div class="finale-overlay">

templates/story-spread.html

@@ -1,17 +1,8 @@
 {% for scene in story.scenes %}
 {# ── Left page: full-bleed illustration ── #}
-<div class="page page--image" data-story="{{ story.number }}" style="
+<div class="page page--image" data-story="{{ story.number }}" style="--color-primary: {{ story.palette.primary }};">
-  --color-primary: {{ story.palette.primary }};
-  --color-secondary: {{ story.palette.secondary }};
-  --color-text: {{ story.palette.text }};
-  --color-bg: {{ story.palette.background }};
-">
   {% if scene.imageExists %}
-    <img
+    <img class="scene-image" src="{{ scene.image }}" alt="{{ scene.alt }}">
-      class="scene-image"
-      src="{{ scene.image }}"
-      alt="{{ scene.alt }}"
-    >
   {% else %}
     <div class="placeholder-image" style="background: {{ story.palette.primary }};">
       <div class="placeholder-label">
@@ -23,18 +14,14 @@
 </div>
 
 {# ── Right page: story text ── #}
-<div class="page page--text" data-story="{{ story.number }}" style="
+<div class="page page--text" data-story="{{ story.number }}">
-  --color-primary: {{ story.palette.primary }};
-  --color-secondary: {{ story.palette.secondary }};
-  --color-text: {{ story.palette.text }};
-  --color-bg: {{ story.palette.background }};
-">
   <div class="text-page-inner">
     {% if loop.first %}
+      <span class="story-number">Geschichte {% if story.number < 10 %}0{{ story.number }}{% else %}{{ story.number }}{% endif %}</span>
       <h2 class="story-title">{{ story.title }}</h2>
     {% endif %}
     <div class="scene-text">{{ scene.html | safe }}</div>
-    <div class="scene-ornament">✦</div>
+    <div class="scene-ornament">❧</div>
   </div>
 </div>
 {% endfor %}