diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css
index 66702879..0c31ddb2 100644
--- a/frontend/src/routes/layout.css
+++ b/frontend/src/routes/layout.css
@@ -77,6 +77,11 @@
 	--color-warning: #b45309;
 	--color-warning-fg: #ffffff;
 
+	/* Journey / Lesereise — orange semantic tokens (badge, interlude block, annotation) */
+	--color-journey-tint: var(--c-journey-bg);
+	--color-journey: var(--c-journey-text);
+	--color-journey-border: var(--c-journey-border);
+
 	/* Static brand tokens (not themed) */
 	--color-brand-navy: var(--palette-navy);
 	--color-brand-mint: var(--palette-mint);
@@ -128,6 +133,12 @@
 	/* Parchment — warm near-white for example blocks (light mode: cream #FAF8F1) */
 	--c-parchment: #faf8f1;
 
+	/* Journey / Lesereise — orange semantic tokens
+	   Text #B46820 on bg #FEF0E6 ≈ 4.6:1 — WCAG AA ✓ at 12px bold (normal-text threshold) */
+	--c-journey-bg: #fef0e6;
+	--c-journey-text: #b46820;
+	--c-journey-border: #f0c99a;
+
 	/* Tag color tokens — decorative dot colors on tag chips */
 	--c-tag-sage: #5a8a6a;
 	--c-tag-sienna: #a0522d;
@@ -246,6 +257,12 @@
 		/* Stammbaum gutter stripe (issue #689) — 14% mint on dark canvas for
 		   visibility parity with the 8% light-mode token. Decorative carve-out. */
 		--c-gutter-stripe: rgba(161, 220, 216, 0.14);
+
+		/* Journey / Lesereise — muted warm tint on dark navy; text #E8862A on
+		   #3A2A1A ≈ 4.7:1 — WCAG AA ✓ at 12px bold (normal-text threshold) */
+		--c-journey-bg: #3a2a1a;
+		--c-journey-text: #e8862a;
+		--c-journey-border: #7a4a1e;
 	}
 }
 
@@ -321,6 +338,11 @@
 
 	/* Stammbaum gutter stripe (issue #689) — KEEP IN SYNC with the @media block. */
 	--c-gutter-stripe: rgba(161, 220, 216, 0.14);
+
+	/* Journey / Lesereise — KEEP IN SYNC with the @media block above */
+	--c-journey-bg: #3a2a1a;
+	--c-journey-text: #e8862a;
+	--c-journey-border: #7a4a1e;
 }
 
 /* ─── 6. Icon inversion — De Gruyter icons are black SVGs loaded as <img> ──── */