From 3cc3829fba9e45763562fd6c4392ca0f7c068f49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Tue, 20 Oct 2026 13:49:25 +0200
Subject: [PATCH] fix(ui): card density is a Card prop, and compact is compact
 on desktop

Nineteen cards spelled the compact tier by hand as gap-2 py-3 md:py-4,
which left the base md:gap-6 in place: a compact card opened a 24 px
gap between header and body on a desktop. Card takes density="compact"
now and pins the gap on both breakpoints; every hand-written compact
card, the priority card, the document card and the sample briefing
move onto it, and a test refuses the class list on a Card.

The precision guard on the steps page now reads rendered text only:
the page header's grid template (minmax(0,1fr)) matched its pattern.
---
 .../__tests__/assessment-spine-order.test.ts  | 10 ++--
 src/app/insights/blood-pressure/page.tsx      |  2 +-
 src/app/insights/catalog/page.tsx             |  6 +--
 src/app/insights/medications/page.tsx         |  2 +-
 src/components/ai/ai-consent-request.tsx      |  2 +-
 .../body-sites/body-sites-section.tsx         |  4 +-
 src/components/daily/priority-card.tsx        |  2 +-
 src/components/day/since-last-visit.tsx       |  4 +-
 src/components/documents/document-card.tsx    |  3 +-
 .../__tests__/visits-section.test.tsx         |  4 +-
 src/components/encounters/visit-card.tsx      |  2 +-
 .../integer-metric-precision-guard.test.tsx   |  4 +-
 src/components/insights/ai-setup-hint.tsx     |  2 +-
 .../insights/derived/coach-read-strip.tsx     |  4 +-
 src/components/insights/glp1-plateau-note.tsx |  2 +-
 .../insights/insight-status-card.tsx          | 13 ++---
 src/components/insights/metric-stat-strip.tsx |  6 +--
 .../insights/metric-target-summary.tsx        |  2 +-
 .../insights/mood/mood-insights-sections.tsx  |  3 +-
 .../insights/mood/mood-prognosis-card.tsx     |  2 +-
 .../insights/workout-detail/day-context.tsx   |  2 +-
 .../onboarding/sample-briefing-card.tsx       |  3 +-
 .../practitioners/practitioner-list.tsx       |  2 +-
 src/components/timeline/readiness-card.tsx    |  2 +-
 .../timeline/timeline-chronicle.tsx           |  2 +-
 .../ui/__tests__/card-density.test.tsx        | 48 +++++++++++++++++++
 src/components/ui/card.tsx                    | 20 +++++++-
 27 files changed, 111 insertions(+), 47 deletions(-)
 create mode 100644 src/components/ui/__tests__/card-density.test.tsx

diff --git a/src/app/insights/__tests__/assessment-spine-order.test.ts b/src/app/insights/__tests__/assessment-spine-order.test.ts
index 49f601778..e71f3cabc 100644
--- a/src/app/insights/__tests__/assessment-spine-order.test.ts
+++ b/src/app/insights/__tests__/assessment-spine-order.test.ts
@@ -181,13 +181,11 @@ describe("assessment presentation contract", () => {
       "utf8",
     );
 
-    expect(cardSource).toContain(
-      'className="animate-insight-in gap-2 py-3 md:py-4"',
-    );
+    expect(cardSource).toContain('density="compact"');
+    expect(cardSource).toContain('className="animate-insight-in"');
     expect(cardSource).toContain('className="text-foreground text-sm"');
-    expect(moodSource).toContain(
-      'className="animate-insight-in gap-2 py-3 md:py-4"',
-    );
+    expect(moodSource).toContain('density="compact"');
+    expect(moodSource).toContain('className="animate-insight-in"');
     expect(moodSource).toContain('data-slot="insight-assessment"');
     expect(moodBodySource).toContain(
       'className="text-foreground mb-2 text-sm"',
diff --git a/src/app/insights/blood-pressure/page.tsx b/src/app/insights/blood-pressure/page.tsx
index a6772ce9c..43186b0a4 100644
--- a/src/app/insights/blood-pressure/page.tsx
+++ b/src/app/insights/blood-pressure/page.tsx
@@ -204,7 +204,7 @@ export default function InsightsBlutdruckPage() {
           // edge, ~16–24 px left of every neighbouring card's text) — and
           // foreground, not muted: multi-sentence explainer prose is
           // content, muted stays reserved for meta.
-          <Card data-slot="bp-derived-caption" className="gap-2 py-3 md:py-4">
+          <Card data-slot="bp-derived-caption" density="compact">
             <CardContent>
               <p className="text-sm leading-relaxed">
                 {t("insights.subPage.bpDerived.pulsePressure", {
diff --git a/src/app/insights/catalog/page.tsx b/src/app/insights/catalog/page.tsx
index 88425d5f7..805a7bdfe 100644
--- a/src/app/insights/catalog/page.tsx
+++ b/src/app/insights/catalog/page.tsx
@@ -351,11 +351,7 @@ export default function MetricCatalogPage() {
           // it ever probes for rows, so a module-off account never saw
           // the in-context enable CTA; this row is the fix).
           return (
-            <Card
-              key={group}
-              data-slot="catalog-group"
-              className="gap-2 py-3 md:py-4"
-            >
+            <Card key={group} data-slot="catalog-group" density="compact">
               <CardHeader>
                 <TileHeader
                   icon={Icon}
diff --git a/src/app/insights/medications/page.tsx b/src/app/insights/medications/page.tsx
index 21864bbef..d017986c9 100644
--- a/src/app/insights/medications/page.tsx
+++ b/src/app/insights/medications/page.tsx
@@ -248,7 +248,7 @@ export default function InsightsMedikamentePage() {
             med.categoryLabel,
           );
           return (
-            <Card key={med.id} className="gap-2 py-3 md:py-4">
+            <Card key={med.id} density="compact">
               <CardHeader>
                 <TileHeader icon={Pill} title={med.name} />
                 <div className="text-muted-foreground mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
diff --git a/src/components/ai/ai-consent-request.tsx b/src/components/ai/ai-consent-request.tsx
index 81d5d24fe..09f26ba45 100644
--- a/src/components/ai/ai-consent-request.tsx
+++ b/src/components/ai/ai-consent-request.tsx
@@ -138,7 +138,7 @@ export function AiConsentRequest({
   };
 
   return (
-    <Card data-slot="ai-consent-request" className="gap-2 py-3 md:py-4">
+    <Card data-slot="ai-consent-request" density="compact">
       <CardHeader>
         <TileHeader
           icon={ShieldCheck}
diff --git a/src/components/body-sites/body-sites-section.tsx b/src/components/body-sites/body-sites-section.tsx
index dbd6b7b35..7109182ec 100644
--- a/src/components/body-sites/body-sites-section.tsx
+++ b/src/components/body-sites/body-sites-section.tsx
@@ -268,7 +268,7 @@ function VisitRow({ t, visit }: { t: Translate; visit: EncounterDTO }) {
   const site = bodySiteText(t, visit.bodySite, visit.laterality);
   return (
     <Card
-      className="gap-2 py-3 md:py-4"
+      density="compact"
       data-slot="body-site-visit"
       data-encounter-id={visit.id}
     >
@@ -326,7 +326,7 @@ function ConditionRow({
   const site = bodySiteText(t, condition.bodySite, condition.laterality);
   return (
     <Card
-      className="gap-2 py-3 md:py-4"
+      density="compact"
       data-slot="body-site-condition"
       data-episode-id={condition.id}
     >
diff --git a/src/components/daily/priority-card.tsx b/src/components/daily/priority-card.tsx
index e958ee956..6f47ec2c1 100644
--- a/src/components/daily/priority-card.tsx
+++ b/src/components/daily/priority-card.tsx
@@ -163,9 +163,9 @@ export function PriorityCard({
     <Card
       data-slot="priority-card"
       data-kind={item.kind}
+      density="compact"
       className={cn(
         isMilestone ? "milestone-reached" : "animate-insight-in",
-        "gap-2 py-3 md:gap-2 md:py-4",
         item.status ? STATUS_WASH[item.status] : null,
         hue ? "metric-accent" : null,
         className,
diff --git a/src/components/day/since-last-visit.tsx b/src/components/day/since-last-visit.tsx
index 6a0aff03f..08f0cf5b6 100644
--- a/src/components/day/since-last-visit.tsx
+++ b/src/components/day/since-last-visit.tsx
@@ -200,7 +200,7 @@ export function SinceLastVisit({
   // and the reader still sees what could not be loaded.
   if (window.isError && rows.length === 0) {
     return (
-      <Card className="gap-2 py-3 md:py-4">
+      <Card density="compact">
         <CardHeader>
           <TileHeader
             size="sm"
@@ -229,7 +229,7 @@ export function SinceLastVisit({
   const nextDay = dateKeyOfInstant(next.occurredAt, timeZone);
 
   return (
-    <Card className="gap-2 py-3 md:py-4">
+    <Card density="compact">
       <CardHeader>
         <TileHeader
           size="sm"
diff --git a/src/components/documents/document-card.tsx b/src/components/documents/document-card.tsx
index 807e551b0..62af84843 100644
--- a/src/components/documents/document-card.tsx
+++ b/src/components/documents/document-card.tsx
@@ -217,8 +217,9 @@ export function DocumentCard({
       data-slot="document-card"
       data-variant={variant}
       data-document-id={document.id}
+      density="compact"
       className={cn(
-        "group relative h-full gap-2 py-3 transition-shadow md:py-4",
+        "group relative h-full transition-shadow",
         "hover:shadow-sm",
         highlighted && "ring-primary ring-2",
       )}
diff --git a/src/components/encounters/__tests__/visits-section.test.tsx b/src/components/encounters/__tests__/visits-section.test.tsx
index d8c54ca80..31f95b25f 100644
--- a/src/components/encounters/__tests__/visits-section.test.tsx
+++ b/src/components/encounters/__tests__/visits-section.test.tsx
@@ -308,9 +308,7 @@ describe("<VisitsSection> since the last visit", () => {
         html.indexOf("since-last-visit-"),
       ),
     );
-    expect(card).toMatch(
-      /^<div data-slot="card" class="[^"]*gap-2 py-3 md:py-4/,
-    );
+    expect(card).toMatch(/^<div data-slot="card" data-density="compact"/);
     expect(card).toContain('data-slot="tile-header"');
     expect(card).toMatch(
       /<h3 id="since-last-visit-[^"]+" data-slot="card-title" class="[^"]*text-sm/,
diff --git a/src/components/encounters/visit-card.tsx b/src/components/encounters/visit-card.tsx
index b8b662be6..da3e9b999 100644
--- a/src/components/encounters/visit-card.tsx
+++ b/src/components/encounters/visit-card.tsx
@@ -94,7 +94,7 @@ export function VisitCard({
     <Card
       data-slot="visit-card"
       data-encounter-id={encounter.id}
-      className="gap-2 py-3 md:py-4"
+      density="compact"
     >
       <CardContent className="space-y-2">
         <Body onOpen={onOpen} encounter={encounter}>
diff --git a/src/components/insights/__tests__/integer-metric-precision-guard.test.tsx b/src/components/insights/__tests__/integer-metric-precision-guard.test.tsx
index 1e56b9872..a7e4ad6c6 100644
--- a/src/components/insights/__tests__/integer-metric-precision-guard.test.tsx
+++ b/src/components/insights/__tests__/integer-metric-precision-guard.test.tsx
@@ -173,7 +173,9 @@ describe("integer-metric precision guard", () => {
     const html = render(<InsightsStepsPage />);
 
     expect(html).toContain('data-slot="metric-stat-strip"');
-    expect(html).not.toMatch(FRACTIONAL_GERMAN);
+    // Class lists carry grid templates such as `minmax(0,1fr)`; only the
+    // rendered text is under test.
+    expect(html.replace(/class="[^"]*"/g, "")).not.toMatch(FRACTIONAL_GERMAN);
     // The numbers themselves survive, thousands-grouped and whole.
     expect(html).toContain("11.762");
     expect(html).toContain("104");
diff --git a/src/components/insights/ai-setup-hint.tsx b/src/components/insights/ai-setup-hint.tsx
index cf4f3e008..89bdb7a9b 100644
--- a/src/components/insights/ai-setup-hint.tsx
+++ b/src/components/insights/ai-setup-hint.tsx
@@ -101,7 +101,7 @@ export function AiSetupHint({
   }
 
   return (
-    <Card data-slot="ai-setup-hint" className="gap-2 py-3 md:py-4">
+    <Card data-slot="ai-setup-hint" density="compact">
       <CardHeader>
         <TileHeader
           icon={Sparkles}
diff --git a/src/components/insights/derived/coach-read-strip.tsx b/src/components/insights/derived/coach-read-strip.tsx
index f5983b58a..9af8420dc 100644
--- a/src/components/insights/derived/coach-read-strip.tsx
+++ b/src/components/insights/derived/coach-read-strip.tsx
@@ -118,7 +118,7 @@ export function CoachReadStrip({
         data-slot="coach-read-strip"
         data-state={isError ? "error" : "loading"}
         aria-busy={isError ? undefined : "true"}
-        className="gap-2 py-3 md:py-4"
+        density="compact"
       >
         <CardHeader>
           <TileHeader
@@ -243,7 +243,7 @@ export function CoachReadStrip({
   // text edge ~8 px left of the card norm on md+. Body prose in the
   // regular foreground; muted stays reserved for meta lines.
   return (
-    <Card data-slot="coach-read-strip" className="gap-2 py-3 md:py-4">
+    <Card data-slot="coach-read-strip" density="compact">
       <CardHeader>
         <TileHeader
           icon={Sparkles}
diff --git a/src/components/insights/glp1-plateau-note.tsx b/src/components/insights/glp1-plateau-note.tsx
index 28bc1ee29..ae99108a2 100644
--- a/src/components/insights/glp1-plateau-note.tsx
+++ b/src/components/insights/glp1-plateau-note.tsx
@@ -57,7 +57,7 @@ export function Glp1PlateauNote() {
   const dose = `${plateau.drug} ${plateau.doseValue} ${plateau.doseUnit}`;
 
   return (
-    <Card className="gap-2 py-3 md:py-4" data-slot="glp1-plateau-note">
+    <Card density="compact" data-slot="glp1-plateau-note">
       <CardHeader>
         <TileHeader
           size="sm"
diff --git a/src/components/insights/insight-status-card.tsx b/src/components/insights/insight-status-card.tsx
index 13c307e8f..43a1c3af7 100644
--- a/src/components/insights/insight-status-card.tsx
+++ b/src/components/insights/insight-status-card.tsx
@@ -136,7 +136,7 @@ export function InsightStatusCard({
         aria-busy="true"
         aria-live="polite"
         data-testid="insight-status-card-preparing"
-        className="gap-2 py-3 md:py-4"
+        density="compact"
       >
         <CardHeader>
           <TileHeader icon={nodeIcon(icon)} title={title} />
@@ -172,7 +172,7 @@ export function InsightStatusCard({
         // Compact card density — the same tier the populated / preparing /
         // empty states use, so the heading and the first skeleton line sit
         // on the same baseline across every assessment-card state.
-        className="gap-2 py-3 md:py-4"
+        density="compact"
       >
         <CardHeader>
           <div className="flex items-center gap-2">
@@ -209,7 +209,7 @@ export function InsightStatusCard({
         aria-live="polite"
         role="status"
         data-testid={`insight-status-card-${terminalKind}`}
-        className="gap-2 py-3 md:py-4"
+        density="compact"
       >
         <CardHeader>
           <TileHeader icon={nodeIcon(icon)} title={title} />
@@ -223,7 +223,7 @@ export function InsightStatusCard({
 
   if (!displayText) {
     return (
-      <Card className="gap-2 py-3 md:py-4">
+      <Card density="compact">
         <CardHeader>
           <TileHeader icon={nodeIcon(icon)} title={title} />
         </CardHeader>
@@ -247,7 +247,7 @@ export function InsightStatusCard({
       // v1.12.2 — stable hook for the spine guard test, which asserts the
       // assessment is the LAST content block on every bespoke metric page.
       data-slot="insight-assessment"
-      // Compact card density (`gap-2 py-3 md:py-4`) — the sanctioned tight
+      // Compact card density — the sanctioned tight
       // tier, so the assessment shares one header→body rhythm with the
       // target summary, the read strip, and the stat strip on the same
       // spine. Earlier bespoke values (`gap-1.5` + `md:py-5`) predate the
@@ -255,7 +255,8 @@ export function InsightStatusCard({
       // lands on every status variant so the gap is consistent across
       // states. (The one-time purple left accent stays dropped — the plain
       // card border carries enough separation.)
-      className="animate-insight-in gap-2 py-3 md:py-4"
+      density="compact"
+      className="animate-insight-in"
     >
       <CardHeader>
         {/* v1.11.5 — the top-right "cached" label was removed: it surfaced
diff --git a/src/components/insights/metric-stat-strip.tsx b/src/components/insights/metric-stat-strip.tsx
index 0a36f349b..34d3142b3 100644
--- a/src/components/insights/metric-stat-strip.tsx
+++ b/src/components/insights/metric-stat-strip.tsx
@@ -286,7 +286,7 @@ export function MetricStatStrip({
         data-multi-series="true"
         role="group"
         aria-label={groupLabel ?? t("insights.subPage.stats.label")}
-        className="gap-2 py-3 md:py-4"
+        density="compact"
       >
         <CardContent>
           <div className="grid grid-cols-1 gap-x-6 gap-y-4 md:grid-cols-2">
@@ -319,7 +319,7 @@ export function MetricStatStrip({
           ? `${t("insights.subPage.stats.label")}: ${seriesLabel}`
           : t("insights.subPage.stats.label")
       }
-      className="gap-2 py-3 md:py-4"
+      density="compact"
     >
       <CardContent>
         <SeriesBlock
@@ -356,7 +356,7 @@ export function MetricStatStripSkeleton({
     <Card
       data-slot="metric-stat-strip-skeleton"
       aria-hidden="true"
-      className="gap-2 py-3 md:py-4"
+      density="compact"
     >
       <CardContent>
         <div
diff --git a/src/components/insights/metric-target-summary.tsx b/src/components/insights/metric-target-summary.tsx
index bc2b2f748..872632957 100644
--- a/src/components/insights/metric-target-summary.tsx
+++ b/src/components/insights/metric-target-summary.tsx
@@ -333,7 +333,7 @@ function TargetReferencePanel({
     <Card
       data-slot="metric-target-summary"
       data-target-type={target.type}
-      className="gap-2 py-3 md:py-4"
+      density="compact"
     >
       {/* Row 1: the canonical tile header — a single-word "Ziel" / "Target"
           heading (the range numbers live on the range bar below, so the
diff --git a/src/components/insights/mood/mood-insights-sections.tsx b/src/components/insights/mood/mood-insights-sections.tsx
index f1d49ed7c..cf7c36f0f 100644
--- a/src/components/insights/mood/mood-insights-sections.tsx
+++ b/src/components/insights/mood/mood-insights-sections.tsx
@@ -205,7 +205,8 @@ export function MoodInsightsSections({
         // v1.13.1 — match the canonical `gap-2` + `pb-1` heading-to-body
         // rhythm the other assessment cards use, so the heading sits tight
         // above its body instead of floating ~16-24 px above it.
-        className="animate-insight-in gap-2 py-3 md:py-4"
+        density="compact"
+        className="animate-insight-in"
       >
         <CardHeader>
           <TileHeader
diff --git a/src/components/insights/mood/mood-prognosis-card.tsx b/src/components/insights/mood/mood-prognosis-card.tsx
index b3e213a0e..8772241f3 100644
--- a/src/components/insights/mood/mood-prognosis-card.tsx
+++ b/src/components/insights/mood/mood-prognosis-card.tsx
@@ -106,7 +106,7 @@ export function MoodPrognosisView({ reading }: { reading: PrognosisReading }) {
   if (!data.present && data.reason === "no-output-yet") return null;
 
   return (
-    <Card data-slot="mood-prognosis" className="gap-2 py-3 md:py-4">
+    <Card data-slot="mood-prognosis" density="compact">
       <CardHeader>
         <TileHeader icon={Compass} title={t("insights.mood.prognosis.title")} />
       </CardHeader>
diff --git a/src/components/insights/workout-detail/day-context.tsx b/src/components/insights/workout-detail/day-context.tsx
index d262f13d3..2f90448e9 100644
--- a/src/components/insights/workout-detail/day-context.tsx
+++ b/src/components/insights/workout-detail/day-context.tsx
@@ -107,7 +107,7 @@ export function WorkoutDetailDayContext({
         initialDateKey={workout.dayKey}
       />
 
-      <Card className="gap-2 py-3 md:py-4" data-slot="workout-detail-day-card">
+      <Card density="compact" data-slot="workout-detail-day-card">
         <CardContent>
           <div className="divide-border divide-y">
             {sleepEnabled ? (
diff --git a/src/components/onboarding/sample-briefing-card.tsx b/src/components/onboarding/sample-briefing-card.tsx
index 6316420d3..29075092e 100644
--- a/src/components/onboarding/sample-briefing-card.tsx
+++ b/src/components/onboarding/sample-briefing-card.tsx
@@ -31,7 +31,8 @@ export function SampleBriefingCard({ className }: { className?: string }) {
     <Card
       data-slot="sample-briefing-card"
       aria-label={t("onboarding.ai.sampleAriaLabel")}
-      className={cn("bg-muted/30 gap-2 py-3 md:py-4", className)}
+      density="compact"
+      className={cn("bg-muted/30", className)}
     >
       <CardHeader>
         <TileHeader
diff --git a/src/components/practitioners/practitioner-list.tsx b/src/components/practitioners/practitioner-list.tsx
index 4a06ecf1d..43f9ec817 100644
--- a/src/components/practitioners/practitioner-list.tsx
+++ b/src/components/practitioners/practitioner-list.tsx
@@ -170,7 +170,7 @@ export function PractitionerList({ enabled = true }: { enabled?: boolean }) {
               <ul className="space-y-2">
                 {groupRows.map((row) => (
                   <li key={row.id}>
-                    <Card className="gap-2 py-3 md:py-4">
+                    <Card density="compact">
                       <CardContent className="flex items-center gap-3">
                         <div className="min-w-0 flex-1">
                           <p className="text-foreground truncate text-sm font-medium">
diff --git a/src/components/timeline/readiness-card.tsx b/src/components/timeline/readiness-card.tsx
index 447312685..566285005 100644
--- a/src/components/timeline/readiness-card.tsx
+++ b/src/components/timeline/readiness-card.tsx
@@ -41,7 +41,7 @@ export function ReadinessCard({
     : t("timeline.readiness.meter", { carrying, total });
 
   return (
-    <Card className="gap-2 py-3 md:py-4" data-slot="timeline-readiness-card">
+    <Card density="compact" data-slot="timeline-readiness-card">
       <CardHeader>
         <TileHeader
           size="sm"
diff --git a/src/components/timeline/timeline-chronicle.tsx b/src/components/timeline/timeline-chronicle.tsx
index 9974295fc..f8c1ee212 100644
--- a/src/components/timeline/timeline-chronicle.tsx
+++ b/src/components/timeline/timeline-chronicle.tsx
@@ -222,7 +222,7 @@ export function TimelineChronicle({
   return (
     <div className="space-y-4" data-slot="timeline-chronicle">
       {chips.length > 0 && (
-        <Card className="gap-2 py-3" data-slot="timeline-standing">
+        <Card density="compact" data-slot="timeline-standing">
           <button
             type="button"
             aria-expanded={standingOpen}
diff --git a/src/components/ui/__tests__/card-density.test.tsx b/src/components/ui/__tests__/card-density.test.tsx
new file mode 100644
index 000000000..fae11d68e
--- /dev/null
+++ b/src/components/ui/__tests__/card-density.test.tsx
@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import { Card } from "../card";
+
+function classes(html: string): string[] {
+  return (html.match(/class="([^"]*)"/)?.[1] ?? "").split(" ");
+}
+
+describe("<Card density>", () => {
+  it("ships the default rhythm", () => {
+    const c = classes(renderToStaticMarkup(<Card />));
+    expect(c).toEqual(
+      expect.arrayContaining(["gap-4", "py-4", "md:gap-6", "md:py-6"]),
+    );
+  });
+
+  it("pins the compact gap on both breakpoints", () => {
+    const html = renderToStaticMarkup(<Card density="compact" />);
+    const c = classes(html);
+    expect(c).toEqual(
+      expect.arrayContaining(["gap-2", "py-3", "md:gap-2", "md:py-4"]),
+    );
+    // The hand-written tier kept the base desktop gap; the prop must not.
+    expect(c).not.toContain("md:gap-6");
+    expect(c).not.toContain("md:py-6");
+    expect(html).toContain('data-density="compact"');
+  });
+});
+
+describe("compact density is the prop, not a class list", () => {
+  it("leaves no hand-written compact tier on a Card", async () => {
+    const { readFileSync } = await import("node:fs");
+    const { join } = await import("node:path");
+    const { walkSourceFiles } =
+      await import("@/__tests__/helpers/source-files");
+    const src = join(__dirname, "../../..");
+    const hits = walkSourceFiles(src, { floor: 2500 })
+      .filter((p) => p.endsWith(".tsx") && !p.includes("__tests__/"))
+      .filter((p) => !p.startsWith("components/ui/"))
+      .filter((p) =>
+        /<Card\b[^>]*className=(?:"[^"]*|\{cn\([^)]*)\bgap-2 py-3\b/.test(
+          readFileSync(join(src, p), "utf8"),
+        ),
+      );
+    expect(hits).toEqual([]);
+  });
+});
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 7be6f4b05..60f98110b 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -15,12 +15,30 @@ import { cn } from "@/lib/utils";
  *
  * Refs `.planning/round-v1433-audit-polish.md` §4.1 + Win 4.
  */
-function Card({ className, ...props }: React.ComponentProps<"div">) {
+/**
+ * The two card densities (UI standards §1) live here, not at the call site:
+ * `default` is the card as shipped, `compact` is the stat-strip and
+ * small-tile rhythm. Spelled by hand as `gap-2 py-3 md:py-4`, the compact
+ * tier kept the base `md:gap-6`, so nineteen "compact" cards opened a 24 px
+ * gap between header and body on a desktop. The prop pins both breakpoints.
+ */
+const CARD_DENSITY = {
+  default: "",
+  compact: "gap-2 py-3 md:gap-2 md:py-4",
+} as const;
+
+function Card({
+  className,
+  density = "default",
+  ...props
+}: React.ComponentProps<"div"> & { density?: keyof typeof CARD_DENSITY }) {
   return (
     <div
       data-slot="card"
+      data-density={density === "default" ? undefined : density}
       className={cn(
         "bg-card text-card-foreground flex flex-col gap-4 rounded-xl border py-4 shadow-sm md:gap-6 md:py-6",
+        CARD_DENSITY[density],
         className,
       )}
       {...props}