diff --git a/src/components/cycle/bbt-chart.tsx b/src/components/cycle/bbt-chart.tsx
index ed0555b4d..4f7f81656 100644
--- a/src/components/cycle/bbt-chart.tsx
+++ b/src/components/cycle/bbt-chart.tsx
@@ -35,7 +35,8 @@ import {
   YAxis,
 } from "recharts";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { TileHeader } from "@/components/insights/tile-header";
 import { useTranslations, useFormatters } from "@/lib/i18n/context";
 import { prefersReducedMotion } from "@/lib/charts/reduced-motion";
 import { cn } from "@/lib/utils";
@@ -150,10 +151,7 @@ export function BbtChart({
   return (
     <Card data-slot="cycle-bbt-chart">
       <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-base">
-          <Thermometer className="text-primary h-4 w-4" aria-hidden="true" />
-          {t("cycle.bbt.title")}
-        </CardTitle>
+        <TileHeader icon={Thermometer} title={t("cycle.bbt.title")} />
       </CardHeader>
       <CardContent>
         {!hasCurve ? (
diff --git a/src/components/cycle/cycle-symptom-patterns.tsx b/src/components/cycle/cycle-symptom-patterns.tsx
index 84a4e2a2a..a9d0ee94f 100644
--- a/src/components/cycle/cycle-symptom-patterns.tsx
+++ b/src/components/cycle/cycle-symptom-patterns.tsx
@@ -3,7 +3,8 @@
 import { useMemo } from "react";
 import { Activity } from "lucide-react";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { TileHeader } from "@/components/insights/tile-header";
 import { useTranslations } from "@/lib/i18n/context";
 import { CYCLE_SYMPTOM_CATALOG } from "./symptom-catalog";
 import { PHASE_HUE } from "./phase-tokens";
@@ -56,10 +57,10 @@ export function CycleSymptomPatterns({ rows }: CycleSymptomPatternsProps) {
   return (
     <Card data-slot="cycle-symptom-patterns">
       <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-base">
-          <Activity className="text-primary h-4 w-4" aria-hidden="true" />
-          {t("cycle.insights.symptomPatternsTitle")}
-        </CardTitle>
+        <TileHeader
+          icon={Activity}
+          title={t("cycle.insights.symptomPatternsTitle")}
+        />
       </CardHeader>
       <CardContent>
         {rows.length === 0 ? (
diff --git a/src/components/cycle/predictions-panel.tsx b/src/components/cycle/predictions-panel.tsx
index cb24978a5..f7175c2c8 100644
--- a/src/components/cycle/predictions-panel.tsx
+++ b/src/components/cycle/predictions-panel.tsx
@@ -10,6 +10,7 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { TileHeader } from "@/components/insights/tile-header";
 import { useTranslations } from "@/lib/i18n/context";
 import { FERTILE_HUE, FLOW_HUE, OVULATION_HUE } from "./phase-tokens";
 import type { CyclePrediction, CycleHistoryResponse } from "./types";
@@ -64,10 +65,7 @@ export function PredictionsPanel({
     <div className="space-y-4">
       <Card>
         <CardHeader>
-          <CardTitle className="flex items-center gap-2 text-base">
-            <Sparkles className="text-primary h-4 w-4" aria-hidden="true" />
-            {t("cycle.predictions.title")}
-          </CardTitle>
+          <TileHeader icon={Sparkles} title={t("cycle.predictions.title")} />
         </CardHeader>
         <CardContent className="space-y-4">
           {rawChartMode ? (
diff --git a/src/components/insights/correlation-card.tsx b/src/components/insights/correlation-card.tsx
index e79a44e58..8229a2e47 100644
--- a/src/components/insights/correlation-card.tsx
+++ b/src/components/insights/correlation-card.tsx
@@ -4,7 +4,8 @@ import dynamic from "next/dynamic";
 import { Activity, Sparkles } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { TileHeader } from "@/components/insights/tile-header";
 import { EmptyState } from "@/components/ui/empty-state";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslations } from "@/lib/i18n/context";
@@ -116,23 +117,26 @@ export function CorrelationCard({ result }: CorrelationCardProps) {
         )}
       />
       <CardHeader>
-        <div className="flex items-start justify-between gap-2">
-          <div className="space-y-0.5">
-            <CardTitle className="text-sm font-semibold">{title}</CardTitle>
-            <p className="text-muted-foreground text-xs">{subtitle}</p>
-          </div>
-          {result.status === "ok" && (
-            <Badge
-              data-slot="correlation-card-confidence"
-              variant="outline"
-              className={cn(
-                "shrink-0 text-xs",
-                CONFIDENCE_BADGE_CLASS[result.confidenceBand.label],
-              )}
-            >
-              {t(CONFIDENCE_LABEL_KEY[result.confidenceBand.label])}
-            </Badge>
-          )}
+        <div className="space-y-0.5">
+          <TileHeader
+            size="sm"
+            title={title}
+            right={
+              result.status === "ok" ? (
+                <Badge
+                  data-slot="correlation-card-confidence"
+                  variant="outline"
+                  className={cn(
+                    "shrink-0 text-xs",
+                    CONFIDENCE_BADGE_CLASS[result.confidenceBand.label],
+                  )}
+                >
+                  {t(CONFIDENCE_LABEL_KEY[result.confidenceBand.label])}
+                </Badge>
+              ) : undefined
+            }
+          />
+          <p className="text-muted-foreground text-xs">{subtitle}</p>
         </div>
       </CardHeader>
       <CardContent className="space-y-3">
diff --git a/src/components/insights/glucose/glucose-clinical-panel.tsx b/src/components/insights/glucose/glucose-clinical-panel.tsx
index 4958f36d1..6a0214972 100644
--- a/src/components/insights/glucose/glucose-clinical-panel.tsx
+++ b/src/components/insights/glucose/glucose-clinical-panel.tsx
@@ -4,7 +4,8 @@ import Link from "next/link";
 import { Activity, Droplet, FlaskConical, TrendingUp } from "lucide-react";
 
 import { Badge } from "@/components/ui/badge";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { TileHeader } from "@/components/insights/tile-header";
 import { InfoHint } from "@/components/ui/info-hint";
 import { LearningGate } from "@/components/ui/learning-gate";
 import { LearnMoreLink } from "@/components/ui/learn-more-link";
@@ -97,10 +98,10 @@ export function GlucoseClinicalPanel() {
     return (
       <Card data-slot="glucose-clinical-panel" data-state="learning">
         <CardHeader>
-          <CardTitle className="flex items-center gap-2 text-base font-semibold">
-            <Droplet className="h-4 w-4" aria-hidden="true" />
-            {t("insights.bloodGlucose.clinical.learningTitle")}
-          </CardTitle>
+          <TileHeader
+            icon={Droplet}
+            title={t("insights.bloodGlucose.clinical.learningTitle")}
+          />
         </CardHeader>
         <CardContent>
           <LearningGate
@@ -134,10 +135,10 @@ export function GlucoseClinicalPanel() {
     <Card data-slot="glucose-clinical-panel" data-state="asserted">
       <CardHeader>
         <div className="flex flex-col gap-0.5">
-          <CardTitle className="flex items-center gap-2 text-base font-semibold">
-            <Droplet className="h-4 w-4" aria-hidden="true" />
-            {t("insights.bloodGlucose.clinical.title")}
-          </CardTitle>
+          <TileHeader
+            icon={Droplet}
+            title={t("insights.bloodGlucose.clinical.title")}
+          />
           <span className="text-muted-foreground text-xs">
             {t("insights.bloodGlucose.clinical.subtitle", {
               days: Math.max(1, Math.round(clinical.actualSpanDays)),
diff --git a/src/components/insights/mood/mood-correlation-cards.tsx b/src/components/insights/mood/mood-correlation-cards.tsx
index 187ec34cf..4efb3f351 100644
--- a/src/components/insights/mood/mood-correlation-cards.tsx
+++ b/src/components/insights/mood/mood-correlation-cards.tsx
@@ -4,7 +4,8 @@ import dynamic from "next/dynamic";
 import { Activity } from "lucide-react";
 
 import { Badge } from "@/components/ui/badge";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { TileHeader } from "@/components/insights/tile-header";
 import { EmptyState } from "@/components/ui/empty-state";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslations } from "@/lib/i18n/context";
@@ -99,28 +100,29 @@ function MoodCorrelationCard({
       className={className}
     >
       <CardHeader>
-        <div className="flex items-start justify-between gap-2">
-          <CardTitle className="text-sm font-semibold">
-            {t(TITLE_KEY[kind])}
-          </CardTitle>
-          {hasResult && data.result && (
-            <div className="flex shrink-0 items-center gap-1.5">
-              <Badge variant="outline" className="text-[10px]">
-                {t(STRENGTH_KEY[data.result.strength])}
-              </Badge>
-              {/* v1.12.4 (C4) — the "{n} paired days · r" line sat under the
-                  scatter as a half-empty row. Move it into an explainer icon
-                  in the header so the card footprint stays tight. */}
-              <MoodExplainerIcon
-                label={t("insights.mood.correlation.sourceLabel")}
-                detail={t("insights.mood.correlation.source", {
-                  n: data.n,
-                  r: data.result.r.toFixed(2),
-                })}
-              />
-            </div>
-          )}
-        </div>
+        <TileHeader
+          size="sm"
+          title={t(TITLE_KEY[kind])}
+          right={
+            hasResult && data.result ? (
+              <div className="flex shrink-0 items-center gap-1.5">
+                <Badge variant="outline" className="text-[10px]">
+                  {t(STRENGTH_KEY[data.result.strength])}
+                </Badge>
+                {/* v1.12.4 (C4) — the "{n} paired days · r" line sat under the
+                    scatter as a half-empty row. Move it into an explainer icon
+                    in the header so the card footprint stays tight. */}
+                <MoodExplainerIcon
+                  label={t("insights.mood.correlation.sourceLabel")}
+                  detail={t("insights.mood.correlation.source", {
+                    n: data.n,
+                    r: data.result.r.toFixed(2),
+                  })}
+                />
+              </div>
+            ) : undefined
+          }
+        />
       </CardHeader>
       <CardContent className="space-y-3">
         {hasResult && data.result ? (
diff --git a/src/components/insights/sleep-hypnogram.tsx b/src/components/insights/sleep-hypnogram.tsx
index 29106ce2f..fed7b4ec0 100644
--- a/src/components/insights/sleep-hypnogram.tsx
+++ b/src/components/insights/sleep-hypnogram.tsx
@@ -10,7 +10,8 @@ import {
   YAxis,
 } from "recharts";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { TileHeader } from "@/components/insights/tile-header";
 import { useTranslations, useTimeFormatPreference } from "@/lib/i18n/context";
 import { hourCycleOptions } from "@/lib/format-locale";
 import { STAGE_COLORS } from "./sleep-stage-stacked-bar";
@@ -249,9 +250,7 @@ export function SleepHypnogram({ session }: SleepHypnogramProps) {
     <Card data-slot="sleep-hypnogram" className="gap-3 md:gap-3">
       <CardHeader>
         <div className="flex flex-col gap-0.5">
-          <CardTitle className="text-base font-semibold">
-            {t("insights.sleep.hypnogram.title")}
-          </CardTitle>
+          <TileHeader title={t("insights.sleep.hypnogram.title")} />
           <span className="text-muted-foreground text-xs">
             {t("insights.sleep.hypnogram.subtitle", {
               asleep: formatMinutes(session.asleepMinutes, locale),
diff --git a/src/components/insights/sleep/__tests__/sleep-rhythm-cards.test.tsx b/src/components/insights/sleep/__tests__/sleep-rhythm-cards.test.tsx
index 8638beae8..282214646 100644
--- a/src/components/insights/sleep/__tests__/sleep-rhythm-cards.test.tsx
+++ b/src/components/insights/sleep/__tests__/sleep-rhythm-cards.test.tsx
@@ -80,8 +80,10 @@ describe("<SleepDebtCard>", () => {
     for (const html of [partial, ready]) {
       expect(html).not.toContain("gap-2 py-4 md:gap-2 md:py-4");
       expect(html).toContain("md:py-6");
-      // Semantic info token, not the raw Dracula cyan.
-      expect(html).toContain("text-info");
+      // Header rides the canonical TileHeader (foreground icon), never a
+      // hand-rolled accent-coloured row or the raw Dracula cyan.
+      expect(html).toContain('data-slot="tile-header"');
+      expect(html).not.toContain("text-info");
       expect(html).not.toContain("text-dracula-cyan");
     }
   });
@@ -123,11 +125,12 @@ describe("<ChronotypeCard>", () => {
     expect(html).toContain("text-2xl");
   });
 
-  it("uses the semantic info token, never the raw Dracula cyan", () => {
+  it("renders the canonical TileHeader, never the raw Dracula cyan", () => {
     const learning = render(<ChronotypeCard chronotype={LEARNING_CHRONO} />);
     const ready = render(<ChronotypeCard chronotype={READY_CHRONO} />);
     for (const html of [learning, ready]) {
-      expect(html).toContain("text-info");
+      expect(html).toContain('data-slot="tile-header"');
+      expect(html).not.toContain("text-info");
       expect(html).not.toContain("text-dracula-cyan");
     }
   });
diff --git a/src/components/insights/sleep/average-sleep-card.tsx b/src/components/insights/sleep/average-sleep-card.tsx
index 8093f3c51..2071624e0 100644
--- a/src/components/insights/sleep/average-sleep-card.tsx
+++ b/src/components/insights/sleep/average-sleep-card.tsx
@@ -3,8 +3,9 @@
 import { BedDouble } from "lucide-react";
 
 import { useTranslations } from "@/lib/i18n/context";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { LearningGate } from "@/components/ui/learning-gate";
+import { TileHeader } from "@/components/insights/tile-header";
 import type { AverageSleepDto } from "./use-sleep-rhythm";
 
 /** Whole hours + minutes from a minute total, for the headline figure. */
@@ -35,12 +36,10 @@ export function AverageSleepCard({ average }: { average: AverageSleepDto }) {
     return (
       <Card data-slot="average-sleep-card">
         <CardHeader>
-          <div className="flex items-center gap-2">
-            <BedDouble className="text-info h-4 w-4" />
-            <CardTitle className="text-base font-semibold">
-              {t("insights.sleep.average.title")}
-            </CardTitle>
-          </div>
+          <TileHeader
+            icon={BedDouble}
+            title={t("insights.sleep.average.title")}
+          />
         </CardHeader>
         <CardContent>
           <LearningGate
@@ -59,12 +58,10 @@ export function AverageSleepCard({ average }: { average: AverageSleepDto }) {
   return (
     <Card data-slot="average-sleep-card">
       <CardHeader>
-        <div className="flex items-center gap-2">
-          <BedDouble className="text-info h-4 w-4" />
-          <CardTitle className="text-base font-semibold">
-            {t("insights.sleep.average.title")}
-          </CardTitle>
-        </div>
+        <TileHeader
+          icon={BedDouble}
+          title={t("insights.sleep.average.title")}
+        />
       </CardHeader>
       <CardContent>
         <div className="space-y-0.5">
diff --git a/src/components/insights/sleep/chronotype-card.tsx b/src/components/insights/sleep/chronotype-card.tsx
index 7f805a4c1..14c0e66be 100644
--- a/src/components/insights/sleep/chronotype-card.tsx
+++ b/src/components/insights/sleep/chronotype-card.tsx
@@ -4,8 +4,9 @@ import { useState } from "react";
 import { Clock, ChevronDown, ChevronUp } from "lucide-react";
 
 import { useTranslations } from "@/lib/i18n/context";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { LearningGate } from "@/components/ui/learning-gate";
+import { TileHeader } from "@/components/insights/tile-header";
 import type { ChronotypeDto } from "./use-sleep-rhythm";
 
 /** Minutes-of-day → "HH:MM" wall-clock label (24 h, zero-padded). */
@@ -48,12 +49,10 @@ export function ChronotypeCard({ chronotype }: { chronotype: ChronotypeDto }) {
     return (
       <Card data-slot="chronotype-card">
         <CardHeader>
-          <div className="flex items-center gap-2">
-            <Clock className="text-info h-4 w-4" />
-            <CardTitle className="text-base font-semibold">
-              {t("insights.sleep.chronotype.title")}
-            </CardTitle>
-          </div>
+          <TileHeader
+            icon={Clock}
+            title={t("insights.sleep.chronotype.title")}
+          />
         </CardHeader>
         <CardContent>
           <LearningGate
@@ -74,12 +73,7 @@ export function ChronotypeCard({ chronotype }: { chronotype: ChronotypeDto }) {
   return (
     <Card data-slot="chronotype-card">
       <CardHeader>
-        <div className="flex items-center gap-2">
-          <Clock className="text-info h-4 w-4" />
-          <CardTitle className="text-base font-semibold">
-            {t("insights.sleep.chronotype.title")}
-          </CardTitle>
-        </div>
+        <TileHeader icon={Clock} title={t("insights.sleep.chronotype.title")} />
       </CardHeader>
       <CardContent className="space-y-4">
         {/* Uniform with the sleep-debt tile: a bold primary value (the band) at
diff --git a/src/components/insights/sleep/sleep-debt-card.tsx b/src/components/insights/sleep/sleep-debt-card.tsx
index 66989458b..8799ad0e2 100644
--- a/src/components/insights/sleep/sleep-debt-card.tsx
+++ b/src/components/insights/sleep/sleep-debt-card.tsx
@@ -3,8 +3,9 @@
 import { Moon } from "lucide-react";
 
 import { useTranslations } from "@/lib/i18n/context";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { InfoHint } from "@/components/ui/info-hint";
+import { TileHeader } from "@/components/insights/tile-header";
 import { LearningGate } from "@/components/ui/learning-gate";
 import type { SleepDebtDto } from "./use-sleep-rhythm";
 
@@ -33,19 +34,19 @@ export function SleepDebtCard({ debt }: { debt: SleepDebtDto }) {
     return (
       <Card>
         <CardHeader>
-          <div className="flex items-center gap-2">
-            <Moon className="text-info h-4 w-4" />
-            <CardTitle className="text-base font-semibold">
-              {t("insights.sleep.debt.title")}
-            </CardTitle>
-            {/* v1.25.0 — when the active source on the user's sleep-debt ladder
-                is our own COMPUTED engine (every user today, until a provider
-                ships a native debt), explain what the figure means and that it
-                differs from a wearable's native number. */}
-            {debt.source === "COMPUTED" ? (
-              <InfoHint label={t("insights.sleep.debt.computedInfo")} />
-            ) : null}
-          </div>
+          {/* v1.25.0 — when the active source on the user's sleep-debt ladder
+              is our own COMPUTED engine (every user today, until a provider
+              ships a native debt), explain what the figure means and that it
+              differs from a wearable's native number. */}
+          <TileHeader
+            icon={Moon}
+            title={t("insights.sleep.debt.title")}
+            right={
+              debt.source === "COMPUTED" ? (
+                <InfoHint label={t("insights.sleep.debt.computedInfo")} />
+              ) : undefined
+            }
+          />
         </CardHeader>
         <CardContent>
           <LearningGate
@@ -65,19 +66,19 @@ export function SleepDebtCard({ debt }: { debt: SleepDebtDto }) {
   return (
     <Card>
       <CardHeader>
-        <div className="flex items-center gap-2">
-          <Moon className="text-info h-4 w-4" />
-          <CardTitle className="text-base font-semibold">
-            {t("insights.sleep.debt.title")}
-          </CardTitle>
-          {/* v1.25.0 — the resolved full-debt card is the common case and the
-              place the figure most needs context: explain the COMPUTED engine
-              and that it differs from a wearable's native number here too, not
-              only in the still-learning `partial` state above. */}
-          {debt.source === "COMPUTED" ? (
-            <InfoHint label={t("insights.sleep.debt.computedInfo")} />
-          ) : null}
-        </div>
+        {/* v1.25.0 — the resolved full-debt card is the common case and the
+            place the figure most needs context: explain the COMPUTED engine
+            and that it differs from a wearable's native number here too, not
+            only in the still-learning `partial` state above. */}
+        <TileHeader
+          icon={Moon}
+          title={t("insights.sleep.debt.title")}
+          right={
+            debt.source === "COMPUTED" ? (
+              <InfoHint label={t("insights.sleep.debt.computedInfo")} />
+            ) : undefined
+          }
+        />
       </CardHeader>
       <CardContent>
         <div className="space-y-0.5">
diff --git a/src/components/insights/tile-header.tsx b/src/components/insights/tile-header.tsx
index 5d0428e64..e31c032ed 100644
--- a/src/components/insights/tile-header.tsx
+++ b/src/components/insights/tile-header.tsx
@@ -30,13 +30,23 @@ interface TileHeaderProps {
    * Leading glyph. Accepts a Lucide icon component (or any component that
    * takes a `className`) so the caller passes the component itself
    * (`icon={Target}`), not a pre-sized node — `TileHeader` owns the size
-   * and colour so every tile header matches.
+   * and colour so every tile header matches. Optional: a text-only tile
+   * header (chart cards whose title needs no glyph) omits it and still
+   * gets the canonical row + `CardTitle` treatment.
    */
-  icon: ComponentType<{ className?: string }>;
+  icon?: ComponentType<{ className?: string }>;
   /** Heading text (or node). Rendered inside a `CardTitle` at `text-base`. */
   title: ReactNode;
   /** Optional trailing affordance pinned to the right edge of the row. */
   right?: ReactNode;
+  /**
+   * The ONE sanctioned compact variant: icon `h-4 w-4`, title `text-sm` —
+   * for dense correlation/stat tiles that sit several to a row where the
+   * full `text-base` header visually overpowers the tile body. Everything
+   * else stays on the default; do not express a third size via
+   * `titleClassName`.
+   */
+  size?: "default" | "sm";
   className?: string;
   titleClassName?: string;
   /** Optional id on the `CardTitle`, e.g. for an `aria-labelledby` link. */
@@ -47,6 +57,7 @@ export function TileHeader({
   icon: Icon,
   title,
   right,
+  size = "default",
   className,
   titleClassName,
   id,
@@ -58,8 +69,19 @@ export function TileHeader({
     >
       {/* Icon and heading share the foreground colour — the calm,
           high-contrast read the "Einschätzung" card established. */}
-      <Icon className="text-foreground h-5 w-5 shrink-0" aria-hidden="true" />
-      <CardTitle id={id} className={cn("text-base", titleClassName)}>
+      {Icon ? (
+        <Icon
+          className={cn(
+            "text-foreground shrink-0",
+            size === "sm" ? "h-4 w-4" : "h-5 w-5",
+          )}
+          aria-hidden="true"
+        />
+      ) : null}
+      <CardTitle
+        id={id}
+        className={cn(size === "sm" ? "text-sm" : "text-base", titleClassName)}
+      >
         {title}
       </CardTitle>
       {right ? <div className="ml-auto flex items-center">{right}</div> : null}