refactor(ui): route hand-rolled card headers through the shared header primitives

Move the last hand-rolled tile and section headers onto TileHeader and
SectionHeading so every card speaks one header language: the vorsorge
dashboard tile, the three illness cards, the metric-correlation section,
and the custom-metric list group. The mood-chart title drops to the
primitive semibold weight and its bucket label becomes a TagChip.

Align the in-card sub-headings of the integration cards to the one
sanctioned section-label tier (muted uppercase eyebrow) instead of a
second text-sm font-semibold dialect.

Keep the onboarding and mental-health wizard hero H1s at their
deliberate semibold weight, now marked inline as an intentional
exception so a future heading sweep leaves them alone.

src/app/onboarding/[step]/page.tsx

@@ -101,6 +101,7 @@ export default async function OnboardingStepPage({ params }: PageProps) {
             aria-labelledby="onboarding-welcomeback-title"
             className="space-y-4"
           >
+            {/* Onboarding hero H1: intentionally semibold, not the app-wide bold PageHeader H1 (UI-STANDARDS §5 hero exception). Do not sweep to font-bold. */}
             <h1
               id="onboarding-welcomeback-title"
               tabIndex={-1}

src/components/charts/mood-chart.tsx

@@ -18,6 +18,7 @@ import { useEffect, useState, useMemo, useRef } from "react";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { TagChip } from "@/components/ui/tag-chip";
 import { useTranslations } from "@/lib/i18n/context";
 import { makeBucketLabelFormatters } from "@/lib/charts/bucket-label";
 import { readStoredTimezone } from "@/lib/timezone-mirror";
@@ -1033,17 +1034,15 @@ export function MoodChart({
             back to side-by-side. */}
         <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
           <div className="flex flex-wrap items-center gap-2">
-            <CardTitle className="text-base font-medium">
-              {displayTitle}
-            </CardTitle>
+            <CardTitle className="text-base">{displayTitle}</CardTitle>
             {activeBucket !== "day" && (
-              <span className="bg-muted/40 text-muted-foreground hidden rounded-md px-1.5 py-0.5 text-[10px] font-medium tracking-wide uppercase sm:inline-flex">
+              <TagChip className="hidden tracking-wide uppercase sm:inline-flex">
                 {t(
                   activeBucket === "week"
                     ? "charts.bucketWeekly"
                     : "charts.bucketMonthly",
                 )}
-              </span>
+              </TagChip>
             )}
             {/* v1.4.16 B8 — comparison caption (mood).
                 v1.4.19 A2 — hidden on mobile to free up the title row. */}

src/components/custom-metrics/custom-metric-list.tsx

@@ -11,6 +11,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { QueryErrorCard } from "@/components/ui/query-error-card";
 import { ResponsiveSheet } from "@/components/ui/responsive-sheet";
+import { SectionHeading } from "@/components/ui/section-heading";
 import { Skeleton } from "@/components/ui/skeleton";
 import { apiGet } from "@/lib/api/api-fetch";
 import { formatDate } from "@/lib/format";
@@ -63,26 +64,23 @@ export function CustomMetricList() {
       className="border-border space-y-3 border-t pt-6"
       data-slot="custom-metric-list"
     >
-      <div className="flex items-center justify-between gap-2">
-        <div className="min-w-0">
-          <h2 className="text-lg font-semibold tracking-tight">
-            {t("customMetrics.sectionTitle")}
-          </h2>
-          <p className="text-muted-foreground truncate text-xs sm:text-sm">
-            {t("customMetrics.sectionSubtitle")}
-          </p>
-        </div>
-        <Button
-          variant="outline"
-          size="sm"
-          className="min-h-11 shrink-0 sm:min-h-9"
-          onClick={() => setAddOpen(true)}
-          aria-label={t("customMetrics.add")}
-        >
-          <Plus className="h-4 w-4" />
-          <span className="hidden sm:inline">{t("customMetrics.add")}</span>
-        </Button>
-      </div>
+      <SectionHeading
+        icon={Gauge}
+        title={t("customMetrics.sectionTitle")}
+        subtitle={t("customMetrics.sectionSubtitle")}
+        action={
+          <Button
+            variant="outline"
+            size="sm"
+            className="min-h-11 shrink-0 sm:min-h-9"
+            onClick={() => setAddOpen(true)}
+            aria-label={t("customMetrics.add")}
+          >
+            <Plus className="h-4 w-4" />
+            <span className="hidden sm:inline">{t("customMetrics.add")}</span>
+          </Button>
+        }
+      />
 
       {isLoading ? (
         <Card aria-hidden="true">

src/components/illness/illness-correlation-card.tsx

@@ -12,6 +12,7 @@
 import { ArrowDown, ArrowUp, Info } from "lucide-react";
 
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { TileHeader } from "@/components/insights/tile-header";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslations } from "@/lib/i18n/context";
 
@@ -172,12 +173,11 @@ export function IllnessCorrelationCard({ episodeId }: { episodeId: string }) {
   return (
     <Card>
       <CardHeader>
-        <div className="flex items-center gap-2">
-          <Info className="text-muted-foreground h-4 w-4" aria-hidden />
-          <h2 className="text-base font-semibold">
-            {t("illness.correlation.title")}
-          </h2>
-        </div>
+        <TileHeader
+          icon={Info}
+          titleAs="h2"
+          title={t("illness.correlation.title")}
+        />
       </CardHeader>
       <CardContent>
         {isLoading ? (

src/components/illness/illness-day-timeline.tsx

@@ -14,6 +14,7 @@
  */
 import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { TileHeader } from "@/components/insights/tile-header";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -101,9 +102,7 @@ export function IllnessDayTimeline({
   return (
     <Card>
       <CardHeader>
-        <h2 className="text-base font-semibold">
-          {t("illness.timeline.title")}
-        </h2>
+        <TileHeader titleAs="h2" title={t("illness.timeline.title")} />
       </CardHeader>
       <CardContent className="space-y-3">
         {isLoading ? (

src/components/illness/illness-insights-card.tsx

@@ -15,6 +15,7 @@ import { History } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { TileHeader } from "@/components/insights/tile-header";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslations } from "@/lib/i18n/context";
 
@@ -42,12 +43,11 @@ export function IllnessInsightsCard({
   return (
     <Card>
       <CardHeader>
-        <div className="flex items-center gap-2">
-          <History className="text-muted-foreground h-4 w-4" aria-hidden />
-          <h2 className="text-base font-semibold">
-            {t("illness.insights.title")}
-          </h2>
-        </div>
+        <TileHeader
+          icon={History}
+          titleAs="h2"
+          title={t("illness.insights.title")}
+        />
       </CardHeader>
       <CardContent>
         {counts.isLoading ? (

src/components/insights/metric-correlation-card.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { Spline } from "lucide-react";
+
 import { useAnalyticsQuery } from "@/lib/queries/use-analytics-query";
 import { useFeatureFlags } from "@/hooks/use-feature-flags";
 import { useTranslations } from "@/lib/i18n/context";
@@ -8,6 +10,7 @@ import type {
   CorrelationResult,
 } from "@/lib/insights/correlations";
 import { CorrelationCard } from "@/components/insights/correlation-card";
+import { SectionHeading } from "@/components/ui/section-heading";
 
 /**
  * v1.12.0 — per-metric correlation card.
@@ -82,9 +85,10 @@ export function MetricCorrelationCard({ slug }: MetricCorrelationCardProps) {
       aria-label={t("insights.correlationRow.title")}
       className="space-y-2"
     >
-      <h2 className="text-lg font-semibold">
-        {t("insights.correlationRow.title")}
-      </h2>
+      <SectionHeading
+        icon={Spline}
+        title={t("insights.correlationRow.title")}
+      />
       <CorrelationCard result={result} />
       {/* v1.18.6 (DISC-01) — the "observational, not causal / talk to your
           doctor" disclaimer is removed; the one-time onboarding acknowledgment

src/components/measurement-reminders/vorsorge-dashboard-card.tsx

@@ -30,7 +30,8 @@ import {
 import type { EncounterKind } from "@/generated/prisma/client";
 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 { ListRow } from "@/components/ui/list-row";
 import { QueryErrorRow } from "@/components/ui/query-error-row";
 import { ResponsiveSheet } from "@/components/ui/responsive-sheet";
@@ -142,10 +143,11 @@ export function VorsorgeDashboardCard() {
   return (
     <Card data-slot="vorsorge-dashboard-card" className="h-full">
       <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-sm">
-          <CalendarClock className="h-4 w-4" aria-hidden="true" />
-          {t("measurementReminders.sectionTitle")}
-        </CardTitle>
+        <TileHeader
+          size="sm"
+          icon={CalendarClock}
+          title={t("measurementReminders.sectionTitle")}
+        />
       </CardHeader>
       <CardContent className="space-y-2">
         {showLoading ? (

src/components/mental-health/check-in-wizard.tsx

@@ -142,6 +142,7 @@ export function CheckInWizard({
       {/* In-test header — instrument title + ONE standardized explanation line.
           No disclaimer here (§2); the landing carries it. */}
       <header className="flex flex-col gap-1">
+        {/* Wizard hero H1: intentionally semibold, same hero exception as onboarding (UI-STANDARDS §5). Do not sweep to font-bold. */}
         <h1 className="text-2xl font-semibold">
           {t(`mentalHealth.instrument.${key}`)}
         </h1>

src/components/onboarding/baseline-form.tsx

@@ -188,6 +188,7 @@ export function BaselineForm() {
   return (
     <section aria-labelledby="onboarding-baseline-title" className="space-y-6">
       <header className="space-y-2">
+        {/* Onboarding hero H1: intentionally semibold, not the app-wide bold PageHeader H1 (UI-STANDARDS §5 hero exception). Do not sweep to font-bold. */}
         <h1
           id="onboarding-baseline-title"
           tabIndex={-1}

src/components/onboarding/done-screen.tsx

@@ -81,6 +81,7 @@ export function DoneScreen() {
       </span>
 
       <header className="space-y-2">
+        {/* Onboarding hero H1: intentionally semibold, not the app-wide bold PageHeader H1 (UI-STANDARDS §5 hero exception). Do not sweep to font-bold. */}
         <h1
           id="onboarding-done-title"
           tabIndex={-1}

src/components/onboarding/goals-chip-picker.tsx

@@ -139,6 +139,7 @@ export function GoalsChipPicker({ userId: _userId }: GoalsChipPickerProps) {
   return (
     <section aria-labelledby="onboarding-goals-title" className="space-y-6">
       <header className="space-y-2">
+        {/* Onboarding hero H1: intentionally semibold, not the app-wide bold PageHeader H1 (UI-STANDARDS §5 hero exception). Do not sweep to font-bold. */}
         <h1
           id="onboarding-goals-title"
           tabIndex={-1}

src/components/onboarding/source-card-grid.tsx

@@ -148,6 +148,7 @@ export function SourceCardGrid() {
   return (
     <section aria-labelledby="onboarding-source-title" className="space-y-6">
       <header className="space-y-2">
+        {/* Onboarding hero H1: intentionally semibold, not the app-wide bold PageHeader H1 (UI-STANDARDS §5 hero exception). Do not sweep to font-bold. */}
         <h1
           id="onboarding-source-title"
           tabIndex={-1}

src/components/onboarding/welcome-carousel.tsx

@@ -164,6 +164,7 @@ export function WelcomeCarousel() {
 
   return (
     <section aria-labelledby="onboarding-welcome-title" className="space-y-6">
+      {/* Onboarding hero H1: intentionally semibold, not the app-wide bold PageHeader H1 (UI-STANDARDS §5 hero exception). Do not sweep to font-bold. */}
       <h1
         id="onboarding-welcome-title"
         tabIndex={-1}

src/components/settings/integrations/apple-health-card.tsx

@@ -82,7 +82,7 @@ function DeliveryDiagnostic({
 
   return (
     <div className="space-y-2" data-testid="apple-health-delivery">
-      <h3 className="text-sm font-semibold">
+      <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
         {t("settings.appleHealth.delivery.title")}
       </h3>
       {status.lastSyncedAt ? (
@@ -181,7 +181,7 @@ export function AppleHealthCard({ enabled }: { enabled: boolean }) {
         />
 
         <div className="space-y-2">
-          <h3 className="text-sm font-semibold">
+          <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
             {t("settings.appleHealth.setupTitle")}
           </h3>
           <ol className="text-muted-foreground list-decimal space-y-2 pl-5 text-sm">

src/components/settings/integrations/fitbit-card.tsx

@@ -305,7 +305,7 @@ export function FitbitCard({
         )}
 
         <div className="space-y-3">
-          <h3 className="text-sm font-semibold">
+          <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
             {t("settings.fitbitCredentials")}
           </h3>
           {!status?.configured && (

src/components/settings/integrations/google-health-card.tsx

@@ -502,7 +502,7 @@ export function GoogleHealthCard({
         )}
 
         <div className="space-y-3">
-          <h3 className="text-sm font-semibold">
+          <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
             {t("settings.googleHealthCredentials")}
           </h3>
           <form onSubmit={handleSaveCredentials} className="space-y-3">

src/components/settings/integrations/oauth-provider-card.tsx

@@ -332,7 +332,7 @@ export function OAuthProviderCard({
 
         {credentials && (
           <div className="space-y-3" data-testid={`${provider}-credentials`}>
-            <h3 className="text-sm font-semibold">
+            <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
               {t(`${i18nPrefix}Credentials`)}
             </h3>
             {!status?.hasOwnCredentials && (

src/components/settings/integrations/whoop-card.tsx

@@ -287,7 +287,7 @@ export function WhoopCard({
         )}
 
         <div className="space-y-3">
-          <h3 className="text-sm font-semibold">
+          <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
             {t("settings.whoopCredentials")}
           </h3>
           {!status?.configured && (

src/components/settings/integrations/withings-card.tsx

@@ -326,7 +326,7 @@ export function WithingsCard({
           </p>
         )}
         <div className="space-y-3">
-          <h3 className="text-sm font-semibold">
+          <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
             {t("settings.withingsCredentials")}
           </h3>
           {!status?.configured && (