diff --git a/src/app/components/WeekTimeline.tsx b/src/app/components/WeekTimeline.tsx
index e968bb0..7fe3afa 100644
--- a/src/app/components/WeekTimeline.tsx
+++ b/src/app/components/WeekTimeline.tsx
@@ -145,13 +145,13 @@ function WeekCard({ week, isLeft }: { week: Week; isLeft: boolean }) {
{/* Body */}
{week.body}
{/* Vorlagen */}
-
+
{week.vorlagen}
{/* Result */}
-
-
+
+
{week.result}
diff --git a/src/app/globals.css b/src/app/globals.css
index ea251c4..993116f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,6 +3,12 @@
:root {
--background: #f8f7ff;
--foreground: #0f172a;
+
+ /* ── Typography color system (3 tones only) ── */
+ --text-head: #0f172a; /* h1–h4, bold labels */
+ --text-body: #475569; /* all running paragraphs */
+ --text-muted: #94a3b8; /* meta, dates, secondary */
+ /* Accent #6366f1 — ONLY badges, icons, CTAs. Never in body copy. */
}
@theme inline {
@@ -14,11 +20,21 @@
body {
background: linear-gradient(160deg, #f5f4ff, #f8f7ff 40%, #f4f7fa);
- color: var(--foreground);
+ color: var(--text-body);
font-family: var(--font-geist-sans, Arial, Helvetica, sans-serif);
min-height: 100vh;
}
+/* ── Heading font: Urbanist (Croogla-equivalent) ── */
+h1, h2, h3, h4 {
+ font-family: var(--font-urbanist, var(--font-geist-sans));
+ color: var(--text-head);
+}
+
+p {
+ color: var(--text-body);
+}
+
.mc-card {
background: #ffffff;
border: 1px solid #eae8f8;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 32f71a6..ed3443c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,8 +1,13 @@
import type { Metadata } from "next";
-import { Geist } from "next/font/google";
+import { Geist, Urbanist } from "next/font/google";
import "./globals.css";
const geist = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
+const urbanist = Urbanist({
+ variable: "--font-urbanist",
+ subsets: ["latin"],
+ weight: ["600", "700", "800", "900"],
+});
export const metadata: Metadata = {
title: "Das 8-Wochen Kundengewinnungs-System für Selbstständige | Market Compass",
@@ -11,7 +16,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
-
+
{children}
);
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 62b9fe5..e0b2f37 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -33,7 +33,7 @@ function Pill({ children }: { children: React.ReactNode }) {
function IconCard({ icon, title, sub }: { icon: React.ReactNode; title: string; sub: string }) {
return (
-
+
{icon}
@@ -285,7 +285,7 @@ export default function Home() {
- {name}
+ {name}
— {role}
({weeks})