From 3170cfda18625023d72ec54fc4432d0ae6df9d8e Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Sun, 19 Apr 2026 17:17:15 +0200
Subject: [PATCH] Refine Dusk system layer and card spacing

---
 app/check-in/loading.tsx                      |   6 +-
 app/check-in/page.tsx                         |   4 +-
 app/dashboard/loading.tsx                     |   2 +-
 app/dashboard/page.tsx                        |  16 +-
 app/globals.css                               | 164 +++++++++++++++++-
 app/page.tsx                                  |  14 +-
 app/planning/loading.tsx                      |  10 +-
 app/planning/page.tsx                         |   4 +-
 app/settings/page.tsx                         |   4 +-
 components/auth/auth-panel.tsx                |   2 +-
 components/check-in/check-in-card.tsx         |   2 +-
 components/check-in/check-in-form.tsx         |   2 +-
 .../onboarding/onboarding-step-intro.tsx      |   4 +-
 .../onboarding-step-preferences.tsx           |   6 +-
 components/planning/activity-form.tsx         |   4 +-
 components/planning/ad-hoc-activity-form.tsx  |   4 +-
 components/planning/day-overview-card.tsx     |  12 +-
 components/planning/energy-meter-card.tsx     |   2 +-
 components/planning/today-activities-list.tsx |   2 +-
 components/settings/settings-form.tsx         |  20 +--
 components/ui/alert.tsx                       |   8 +-
 components/ui/button.tsx                      |   6 +-
 components/ui/card.tsx                        |  12 +-
 components/wizard/test-wizard-flow.tsx        |   2 +-
 24 files changed, 237 insertions(+), 75 deletions(-)

diff --git a/app/check-in/loading.tsx b/app/check-in/loading.tsx
index 7057309..1aee940 100644
--- a/app/check-in/loading.tsx
+++ b/app/check-in/loading.tsx
@@ -21,7 +21,7 @@ export default function CheckInLoading() {
           </div>
 
           <div className="grid gap-5 lg:grid-cols-[1.1fr_0.9fr]">
-            <Card className="py-0">
+            <Card className="pb-0">
               <CardContent className="space-y-5 pb-6 pt-4">
                 <Skeleton className="h-4 w-32" />
                 <Skeleton className="h-8 w-full" />
@@ -36,7 +36,7 @@ export default function CheckInLoading() {
             </Card>
 
             <div className="space-y-5">
-              <Card className="py-0">
+              <Card className="pb-0">
                 <CardHeader className="pb-0">
                   <Skeleton className="h-3 w-16" />
                   <Skeleton className="mt-1 h-5 w-48" />
@@ -46,7 +46,7 @@ export default function CheckInLoading() {
                   <Skeleton className="mt-1.5 h-4 w-3/4" />
                 </CardContent>
               </Card>
-              <Card className="py-0">
+              <Card className="pb-0">
                 <CardHeader className="pb-0">
                   <Skeleton className="h-3 w-24" />
                 </CardHeader>
diff --git a/app/check-in/page.tsx b/app/check-in/page.tsx
index 1458b9b..ca846bc 100644
--- a/app/check-in/page.tsx
+++ b/app/check-in/page.tsx
@@ -76,7 +76,7 @@ export default async function CheckInPage({ searchParams }: CheckInPageProps) {
           <CheckInForm todayCheckIn={checkInStatus?.todayCheckIn ?? null} />
 
           <aside className="space-y-5">
-            <Card className="py-0">
+            <Card className="pb-0">
               <CardHeader className="pb-0">
                 <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
                   Vandaag
@@ -100,7 +100,7 @@ export default async function CheckInPage({ searchParams }: CheckInPageProps) {
               </CardContent>
             </Card>
 
-            <Card tone="primary" elevation="raised" className="py-0">
+            <Card tone="primary" elevation="raised" className="pb-0">
               <CardHeader className="pb-0">
                 <p className="text-xs font-semibold uppercase tracking-[0.24em] text-primary-foreground/75">
                   Bewuste grens
diff --git a/app/dashboard/loading.tsx b/app/dashboard/loading.tsx
index 6393480..95a2b3b 100644
--- a/app/dashboard/loading.tsx
+++ b/app/dashboard/loading.tsx
@@ -22,7 +22,7 @@ export default function DashboardLoading() {
 
           <div className="grid gap-5 md:grid-cols-3">
             {Array.from({ length: 6 }).map((_, i) => (
-              <Card key={i} className="py-0">
+              <Card key={i} className="pb-0">
                 <CardHeader className="pb-0">
                   <Skeleton className="h-3 w-14" />
                   <Skeleton className="mt-1 h-5 w-40" />
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index ced66d8..a20c911 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -98,7 +98,7 @@ export default async function DashboardPage({ searchParams }: DashboardPageProps
         />
 
         <section className="grid gap-5 md:grid-cols-3">
-          <Card className="py-0">
+          <Card className="pb-0">
             <CardHeader className="pb-0">
               <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
                 Auth
@@ -112,7 +112,7 @@ export default async function DashboardPage({ searchParams }: DashboardPageProps
             </CardContent>
           </Card>
 
-          <Card className="py-0">
+          <Card className="pb-0">
             <CardHeader className="pb-0">
               <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
                 Profiel
@@ -145,7 +145,7 @@ export default async function DashboardPage({ searchParams }: DashboardPageProps
             </CardContent>
           </Card>
 
-          <Card className="py-0">
+          <Card className="pb-0">
             <CardHeader className="pb-0">
               <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
                 Onboarding
@@ -160,7 +160,7 @@ export default async function DashboardPage({ searchParams }: DashboardPageProps
             </CardContent>
           </Card>
 
-          <Card className="py-0">
+          <Card className="pb-0">
             <CardHeader className="pb-0">
               <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
                 Instellingen
@@ -179,7 +179,7 @@ export default async function DashboardPage({ searchParams }: DashboardPageProps
 
           <CheckInCard todayCheckIn={checkInStatus?.todayCheckIn ?? null} />
 
-          <Card className="py-0">
+          <Card className="pb-0">
             <CardHeader className="pb-0">
               <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
                 Dagplanning
@@ -205,7 +205,7 @@ export default async function DashboardPage({ searchParams }: DashboardPageProps
           <EnergyMeterCard meter={planningMeter} tone="subtle" />
 
           {isTestWizardEnabled() ? (
-            <Card className="py-0">
+            <Card className="pb-0">
               <CardHeader className="pb-0">
                 <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
                   Wizard core
@@ -222,7 +222,7 @@ export default async function DashboardPage({ searchParams }: DashboardPageProps
         </section>
 
         {!profile.onboardingCompleted ? (
-          <Card className="border-warning/32 bg-warning/16 py-0 text-foreground shadow-[var(--shadow-1)]">
+          <Card className="border-warning/32 bg-warning/16 pb-0 text-foreground shadow-[var(--shadow-1)]">
             <CardContent className="flex flex-col gap-4 px-6 py-5 sm:flex-row sm:items-center sm:justify-between">
               <div>
                 <p className="font-semibold">Je onboarding is nog niet afgerond.</p>
@@ -237,7 +237,7 @@ export default async function DashboardPage({ searchParams }: DashboardPageProps
             </CardContent>
           </Card>
         ) : (
-          <Card tone="primary" elevation="raised" className="py-0">
+          <Card tone="primary" elevation="raised" className="pb-0">
             <CardContent className="flex flex-col gap-4 px-6 py-5 sm:flex-row sm:items-center sm:justify-between">
               <div>
                 <p className="font-semibold">Je instellingen kun je nu ook los beheren.</p>
diff --git a/app/globals.css b/app/globals.css
index 492306b..c1ac681 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -8,6 +8,28 @@
   --font-body: var(--font-inter-tight), ui-sans-serif, system-ui, sans-serif;
   --font-display: var(--font-body);
   --font-mono: var(--font-plex-mono), ui-monospace, monospace;
+  --typescale-display-large-size: clamp(2.625rem, 5vw, 3.5625rem);
+  --typescale-display-large-line-height: 1.08;
+  --typescale-display-medium-size: clamp(2.125rem, 4vw, 2.8125rem);
+  --typescale-display-medium-line-height: 1.12;
+  --typescale-headline-large-size: clamp(1.375rem, 3vw, 2rem);
+  --typescale-headline-large-line-height: 1.2;
+  --typescale-headline-medium-size: 1.375rem;
+  --typescale-headline-medium-line-height: 1.2;
+  --typescale-title-large-size: 1rem;
+  --typescale-title-large-line-height: 1.3;
+  --typescale-title-medium-size: 0.875rem;
+  --typescale-title-medium-line-height: 1.3;
+  --typescale-body-large-size: 1rem;
+  --typescale-body-large-line-height: 1.65;
+  --typescale-body-medium-size: 0.875rem;
+  --typescale-body-medium-line-height: 1.65;
+  --typescale-label-large-size: 0.875rem;
+  --typescale-label-large-line-height: 1.4;
+  --typescale-label-medium-size: 0.75rem;
+  --typescale-label-medium-line-height: 1.4;
+  --typescale-label-small-size: 0.6875rem;
+  --typescale-label-small-line-height: 1.4;
 
   --background: oklch(97% 0.008 80);
   --foreground: oklch(22% 0.03 262);
@@ -18,12 +40,24 @@
 
   --primary: oklch(44% 0.11 262);
   --primary-foreground: oklch(98% 0.01 262);
+  --primary-container: oklch(90% 0.03 262);
+  --primary-container-foreground: oklch(28% 0.06 262);
   --secondary: oklch(92% 0.03 262);
   --secondary-foreground: oklch(44% 0.11 262);
+  --secondary-container: oklch(94% 0.018 262);
+  --secondary-container-foreground: oklch(32% 0.05 262);
+  --tertiary: oklch(56% 0.09 200);
+  --tertiary-foreground: oklch(98% 0.006 200);
+  --tertiary-container: oklch(91% 0.025 200);
+  --tertiary-container-foreground: oklch(29% 0.055 200);
   --muted: oklch(95% 0.012 82);
   --muted-foreground: oklch(58% 0.015 262);
   --accent: oklch(92% 0.03 262);
   --accent-foreground: oklch(44% 0.11 262);
+  --surface-container-low: oklch(98.5% 0.004 80);
+  --surface-container: oklch(97.4% 0.007 80);
+  --surface-container-high: oklch(95.8% 0.012 80);
+  --outline-variant: oklch(76% 0.012 262 / 0.4);
 
   --destructive: oklch(58% 0.16 25);
   --success: oklch(62% 0.09 155);
@@ -91,6 +125,18 @@ a {
   --color-chart-1: var(--chart-1);
   --color-warning: var(--warning);
   --color-success: var(--success);
+  --color-outline-variant: var(--outline-variant);
+  --color-surface-container-high: var(--surface-container-high);
+  --color-surface-container: var(--surface-container);
+  --color-surface-container-low: var(--surface-container-low);
+  --color-tertiary-container-foreground: var(--tertiary-container-foreground);
+  --color-tertiary-container: var(--tertiary-container);
+  --color-tertiary-foreground: var(--tertiary-foreground);
+  --color-tertiary: var(--tertiary);
+  --color-secondary-container-foreground: var(--secondary-container-foreground);
+  --color-secondary-container: var(--secondary-container);
+  --color-primary-container-foreground: var(--primary-container-foreground);
+  --color-primary-container: var(--primary-container);
   --color-ring: var(--ring);
   --color-input: var(--input);
   --color-border: var(--border);
@@ -110,8 +156,9 @@ a {
   --color-foreground: var(--foreground);
   --color-background: var(--background);
   --font-mono: var(--font-plex-mono), ui-monospace, monospace;
+  --radius-xs: 4px;
   --radius-sm: 8px;
-  --radius-md: 11px;
+  --radius-md: 12px;
   --radius-lg: var(--radius);
   --radius-xl: 21px;
   --radius-2xl: 25px;
@@ -130,12 +177,24 @@ a {
 
   --primary: oklch(52% 0.13 262);
   --primary-foreground: oklch(98% 0.01 262);
+  --primary-container: oklch(30% 0.06 262);
+  --primary-container-foreground: oklch(94% 0.012 262);
   --secondary: oklch(28% 0.03 262);
   --secondary-foreground: oklch(96% 0.008 80);
+  --secondary-container: oklch(31% 0.028 262);
+  --secondary-container-foreground: oklch(93% 0.01 262);
+  --tertiary: oklch(68% 0.09 200);
+  --tertiary-foreground: oklch(16% 0.025 200);
+  --tertiary-container: oklch(32% 0.05 200);
+  --tertiary-container-foreground: oklch(94% 0.012 200);
   --muted: oklch(26% 0.025 262);
   --muted-foreground: oklch(70% 0.015 262);
   --accent: oklch(30% 0.04 262);
   --accent-foreground: oklch(96% 0.008 80);
+  --surface-container-low: oklch(20% 0.022 262);
+  --surface-container: oklch(23% 0.024 262);
+  --surface-container-high: oklch(27% 0.026 262);
+  --outline-variant: oklch(68% 0.014 262 / 0.36);
 
   --destructive: oklch(70% 0.16 25);
   --success: oklch(74% 0.09 155);
@@ -259,6 +318,109 @@ a {
     @apply transition hover:text-foreground;
   }
 
+  .type-display-large {
+    font-size: var(--typescale-display-large-size);
+    line-height: var(--typescale-display-large-line-height);
+    font-weight: 400;
+    letter-spacing: -0.03em;
+  }
+
+  .type-display-medium {
+    font-size: var(--typescale-display-medium-size);
+    line-height: var(--typescale-display-medium-line-height);
+    font-weight: 400;
+    letter-spacing: -0.03em;
+  }
+
+  .type-headline-large {
+    font-size: var(--typescale-headline-large-size);
+    line-height: var(--typescale-headline-large-line-height);
+    font-weight: 600;
+    letter-spacing: -0.02em;
+  }
+
+  .type-headline-medium {
+    font-size: var(--typescale-headline-medium-size);
+    line-height: var(--typescale-headline-medium-line-height);
+    font-weight: 600;
+    letter-spacing: -0.02em;
+  }
+
+  .type-title-large {
+    font-size: var(--typescale-title-large-size);
+    line-height: var(--typescale-title-large-line-height);
+    font-weight: 600;
+    letter-spacing: -0.01em;
+  }
+
+  .type-title-medium {
+    font-size: var(--typescale-title-medium-size);
+    line-height: var(--typescale-title-medium-line-height);
+    font-weight: 500;
+  }
+
+  .type-body-large {
+    font-size: var(--typescale-body-large-size);
+    line-height: var(--typescale-body-large-line-height);
+    font-weight: 400;
+  }
+
+  .type-body-medium {
+    font-size: var(--typescale-body-medium-size);
+    line-height: var(--typescale-body-medium-line-height);
+    font-weight: 400;
+  }
+
+  .type-label-large {
+    font-size: var(--typescale-label-large-size);
+    line-height: var(--typescale-label-large-line-height);
+    font-weight: 500;
+  }
+
+  .type-label-medium {
+    font-size: var(--typescale-label-medium-size);
+    line-height: var(--typescale-label-medium-line-height);
+    font-weight: 500;
+  }
+
+  .type-label-small {
+    font-size: var(--typescale-label-small-size);
+    line-height: var(--typescale-label-small-line-height);
+    font-weight: 600;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+  }
+
+  .state-layer {
+    --state-layer-opacity: 0;
+    background-image: linear-gradient(
+      color-mix(in oklab, currentColor calc(var(--state-layer-opacity) * 100%), transparent),
+      color-mix(in oklab, currentColor calc(var(--state-layer-opacity) * 100%), transparent)
+    );
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    transition:
+      background-color 160ms ease,
+      border-color 160ms ease,
+      box-shadow 160ms ease,
+      color 160ms ease,
+      transform 150ms ease;
+  }
+
+  .state-layer:hover {
+    --state-layer-opacity: 0.08;
+  }
+
+  .state-layer:focus-visible,
+  .state-layer:active {
+    --state-layer-opacity: 0.12;
+  }
+
+  .state-layer:disabled,
+  .state-layer[data-disabled] {
+    --state-layer-opacity: 0;
+  }
+
   .app-page-copy {
     @apply mt-4 max-w-2xl text-base leading-8 text-muted-foreground;
   }
diff --git a/app/page.tsx b/app/page.tsx
index 637834a..18360f9 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -74,7 +74,7 @@ export default async function Home({ searchParams }: HomePageProps) {
         />
 
         <section className="grid gap-6 lg:grid-cols-[1.05fr_0.95fr]">
-          <Card elevation="raised" className="py-0">
+          <Card elevation="raised" className="pb-0">
             <CardContent className="p-6 sm:p-8">
               <p className="mb-5 max-w-2xl text-lg leading-8 text-muted-foreground">
                 Deze app wordt ontwikkeld door Jan Peter Visser als compacte dagtool
@@ -84,7 +84,7 @@ export default async function Home({ searchParams }: HomePageProps) {
               </p>
               <div className="grid gap-4">
                 {makerNotes.map((note) => (
-                  <Card key={note} tone="subtle" className="py-0 shadow-none">
+                  <Card key={note} tone="subtle" className="pb-0 shadow-none">
                     <CardContent className="px-5 py-4 text-sm leading-7 text-muted-foreground">
                       {note}
                     </CardContent>
@@ -94,7 +94,7 @@ export default async function Home({ searchParams }: HomePageProps) {
             </CardContent>
           </Card>
 
-          <Card tone="primary" elevation="raised" className="py-0">
+          <Card tone="primary" elevation="raised" className="pb-0">
             <CardHeader className="px-6 pt-7 sm:px-8">
               <p className="text-xs font-semibold uppercase tracking-[0.24em] text-primary-foreground/75">
                 Specificaties van de app
@@ -104,7 +104,7 @@ export default async function Home({ searchParams }: HomePageProps) {
               {appSpecs.map((item) => (
                 <Card
                   key={item}
-                  className="rounded-[var(--radius-2xl)] border-white/10 bg-white/8 py-0 text-primary-foreground shadow-none"
+                  className="rounded-[var(--radius-2xl)] border-white/10 bg-white/8 pb-0 text-primary-foreground shadow-none"
                 >
                   <CardContent className="px-4 py-3 text-sm leading-7">{item}</CardContent>
                 </Card>
@@ -117,7 +117,7 @@ export default async function Home({ searchParams }: HomePageProps) {
           </Card>
         </section>
 
-        <Card elevation="raised" className="py-0">
+        <Card elevation="raised" className="pb-0">
           <CardHeader className="pb-0">
             <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
               Dagflow
@@ -126,7 +126,7 @@ export default async function Home({ searchParams }: HomePageProps) {
           </CardHeader>
           <CardContent className="grid gap-5 p-6 md:grid-cols-3">
             {productLoop.map((step, index) => (
-              <Card key={step.title} tone="subtle" className="py-0 shadow-none">
+              <Card key={step.title} tone="subtle" className="pb-0 shadow-none">
                 <CardHeader className="pb-0">
                   <p className="text-xs font-semibold uppercase tracking-[0.22em] text-muted-foreground">
                     Stap {index + 1}
@@ -145,7 +145,7 @@ export default async function Home({ searchParams }: HomePageProps) {
           </CardContent>
         </Card>
 
-        <Card tone="subtle" className="py-0 backdrop-blur">
+        <Card tone="subtle" className="pb-0 backdrop-blur">
           <CardContent className="grid gap-5 p-6 sm:grid-cols-2 lg:grid-cols-4">
             <div>
               <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
diff --git a/app/planning/loading.tsx b/app/planning/loading.tsx
index 73d65b2..34b3649 100644
--- a/app/planning/loading.tsx
+++ b/app/planning/loading.tsx
@@ -21,7 +21,7 @@ export default function PlanningLoading() {
           </div>
 
           <div className="grid gap-5 lg:grid-cols-[1.1fr_0.9fr]">
-            <Card className="py-0">
+            <Card className="pb-0">
               <CardContent className="space-y-4 pb-6 pt-4">
                 <Skeleton className="h-4 w-32" />
                 <Skeleton className="h-10 w-full" />
@@ -36,7 +36,7 @@ export default function PlanningLoading() {
             </Card>
 
             <div className="space-y-5">
-              <Card className="py-0">
+              <Card className="pb-0">
                 <CardHeader className="pb-0">
                   <Skeleton className="h-3 w-16" />
                   <Skeleton className="mt-1 h-5 w-48" />
@@ -46,14 +46,14 @@ export default function PlanningLoading() {
                   <Skeleton className="mt-1.5 h-4 w-3/4" />
                 </CardContent>
               </Card>
-              <Card className="py-0">
+              <Card className="pb-0">
                 <CardContent className="space-y-3 pb-6 pt-4">
                   <Skeleton className="h-4 w-32" />
                   <Skeleton className="h-5 w-full rounded-full" />
                   <Skeleton className="h-3 w-24" />
                 </CardContent>
               </Card>
-              <Card className="py-0">
+              <Card className="pb-0">
                 <CardHeader className="pb-0">
                   <Skeleton className="h-3 w-24" />
                 </CardHeader>
@@ -69,7 +69,7 @@ export default function PlanningLoading() {
           <div className="space-y-3">
             <Skeleton className="h-5 w-48" />
             {[0, 1, 2].map((i) => (
-              <Card key={i} className="py-0">
+              <Card key={i} className="pb-0">
                 <CardContent className="flex items-center justify-between px-4 py-3">
                   <div className="space-y-1.5">
                     <Skeleton className="h-4 w-48" />
diff --git a/app/planning/page.tsx b/app/planning/page.tsx
index 9e5b70a..9125894 100644
--- a/app/planning/page.tsx
+++ b/app/planning/page.tsx
@@ -106,7 +106,7 @@ export default async function PlanningPage({ searchParams }: PlanningPageProps)
           </div>
 
           <aside className="space-y-5">
-            <Card className="py-0">
+            <Card className="pb-0">
               <CardHeader className="pb-0">
                 <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
                   Vandaag
@@ -139,7 +139,7 @@ export default async function PlanningPage({ searchParams }: PlanningPageProps)
 
             <EnergyMeterCard meter={planningMeter} />
 
-            <Card tone="primary" elevation="raised" className="py-0">
+            <Card tone="primary" elevation="raised" className="pb-0">
               <CardHeader className="pb-0">
                 <p className="text-xs font-semibold uppercase tracking-[0.24em] text-primary-foreground/75">
                   Bewuste grens
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index 92ed1dd..b935735 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -79,7 +79,7 @@ export default async function SettingsPage({ searchParams }: SettingsPageProps)
           <SettingsForm profileBundle={profileBundle} />
 
           <aside className="space-y-5">
-            <Card className="py-0">
+            <Card className="pb-0">
               <CardHeader className="pb-0">
                 <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
                   Account
@@ -111,7 +111,7 @@ export default async function SettingsPage({ searchParams }: SettingsPageProps)
               </CardContent>
             </Card>
 
-            <Card className="py-0">
+            <Card className="pb-0">
               <CardHeader className="pb-0">
                 <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
                   Huidige status
diff --git a/components/auth/auth-panel.tsx b/components/auth/auth-panel.tsx
index 2575226..8829201 100644
--- a/components/auth/auth-panel.tsx
+++ b/components/auth/auth-panel.tsx
@@ -47,7 +47,7 @@ export function AuthPanel({
         </section>
 
         <section className="flex items-center">
-          <Card elevation="raised" className="w-full rounded-[var(--radius-4xl)] py-0 backdrop-blur">
+          <Card elevation="raised" className="w-full rounded-[var(--radius-4xl)] pb-0 backdrop-blur">
             <CardContent className="p-6 sm:p-8">
               <div className="mb-6 flex items-center justify-between gap-3">
               <Link
diff --git a/components/check-in/check-in-card.tsx b/components/check-in/check-in-card.tsx
index 7fe2f1b..024c92d 100644
--- a/components/check-in/check-in-card.tsx
+++ b/components/check-in/check-in-card.tsx
@@ -34,7 +34,7 @@ export function CheckInCard({ todayCheckIn }: CheckInCardProps) {
     : "Leg je energiestart en slaapkwaliteit van vandaag vast.";
 
   return (
-    <Card className="py-0">
+    <Card className="pb-0">
       <CardHeader className="pb-0">
         <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
           Ochtendcheck-in
diff --git a/components/check-in/check-in-form.tsx b/components/check-in/check-in-form.tsx
index 8b22905..f8f03e9 100644
--- a/components/check-in/check-in-form.tsx
+++ b/components/check-in/check-in-form.tsx
@@ -58,7 +58,7 @@ export function CheckInForm({ todayCheckIn }: CheckInFormProps) {
       <input type="hidden" name="energyScore" value={energyScore ?? ""} />
       <input type="hidden" name="sleepQuality" value={sleepQuality ?? ""} />
 
-      <Card elevation="raised" className="py-0">
+      <Card elevation="raised" className="pb-0">
         <CardHeader className="pb-0">
           <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
             Ochtendcheck-in
diff --git a/components/onboarding/onboarding-step-intro.tsx b/components/onboarding/onboarding-step-intro.tsx
index 95948c2..82ec7fa 100644
--- a/components/onboarding/onboarding-step-intro.tsx
+++ b/components/onboarding/onboarding-step-intro.tsx
@@ -9,7 +9,7 @@ import {
 export function OnboardingStepIntro() {
   return (
     <div className="space-y-4">
-      <Card tone="subtle" className="py-0 shadow-none">
+      <Card tone="subtle" className="pb-0 shadow-none">
         <CardHeader className="pb-0">
           <CardTitle className="font-[family-name:var(--font-display)] text-2xl">
             Wat je hier wél krijgt
@@ -23,7 +23,7 @@ export function OnboardingStepIntro() {
         </CardContent>
       </Card>
 
-      <Card tone="subtle" className="py-0 shadow-none">
+      <Card tone="subtle" className="pb-0 shadow-none">
         <CardHeader className="pb-0">
           <CardTitle className="font-[family-name:var(--font-display)] text-2xl">
             Wat deze app niet doet
diff --git a/components/onboarding/onboarding-step-preferences.tsx b/components/onboarding/onboarding-step-preferences.tsx
index 8f3433c..fd6d3f7 100644
--- a/components/onboarding/onboarding-step-preferences.tsx
+++ b/components/onboarding/onboarding-step-preferences.tsx
@@ -21,7 +21,7 @@ export function OnboardingStepPreferences({
 }: OnboardingStepPreferencesProps) {
   return (
     <div className="space-y-4">
-      <Card tone="subtle" className="py-0 shadow-none">
+      <Card tone="subtle" className="pb-0 shadow-none">
         <CardContent className="flex items-start justify-between gap-4 py-5">
           <div className="space-y-1">
             <Label className="text-sm font-semibold text-foreground">
@@ -39,7 +39,7 @@ export function OnboardingStepPreferences({
         </CardContent>
       </Card>
 
-      <Card tone="subtle" className="py-0 shadow-none">
+      <Card tone="subtle" className="pb-0 shadow-none">
         <CardContent className="space-y-4 py-5">
           <div className="flex items-start justify-between gap-4">
             <div className="space-y-1">
@@ -82,7 +82,7 @@ export function OnboardingStepPreferences({
         </CardContent>
       </Card>
 
-      <Card tone="subtle" className="py-0 shadow-none">
+      <Card tone="subtle" className="pb-0 shadow-none">
         <CardContent className="flex items-start justify-between gap-4 py-5">
           <div className="space-y-1">
             <Label className="text-sm font-semibold text-foreground">
diff --git a/components/planning/activity-form.tsx b/components/planning/activity-form.tsx
index 431183b..b0a80ae 100644
--- a/components/planning/activity-form.tsx
+++ b/components/planning/activity-form.tsx
@@ -104,7 +104,7 @@ export function ActivityForm({
       <input type="hidden" name="impactLevel" value={impactLevel} />
       <input type="hidden" name="priorityLevel" value={priorityLevel} />
 
-      <Card elevation="raised" className="py-0">
+      <Card elevation="raised" className="pb-0">
         <CardHeader className="pb-0">
           <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
             Dagplanning
@@ -215,7 +215,7 @@ export function ActivityForm({
 
           <Separator />
 
-          <Card tone="subtle" className="py-0 shadow-none">
+          <Card tone="subtle" className="pb-0 shadow-none">
             <CardContent className="space-y-2 py-5">
               <p className="text-sm font-semibold text-foreground">Vooruitblik op de meter</p>
               <p className="text-sm leading-7 text-muted-foreground" aria-live="polite">
diff --git a/components/planning/ad-hoc-activity-form.tsx b/components/planning/ad-hoc-activity-form.tsx
index 9338be4..9e7807d 100644
--- a/components/planning/ad-hoc-activity-form.tsx
+++ b/components/planning/ad-hoc-activity-form.tsx
@@ -102,7 +102,7 @@ export function AdHocActivityForm({
       <input type="hidden" name="categoryId" value={categoryId} />
       <input type="hidden" name="impactLevel" value={impactLevel} />
 
-      <Card tone="subtle" className="py-0">
+      <Card tone="subtle" className="pb-0">
         <CardHeader className="pb-0">
           <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
             Ongepland
@@ -252,7 +252,7 @@ export function AdHocActivityForm({
             </div>
           </div>
 
-          <Card tone="subtle" className="py-0 shadow-none">
+          <Card tone="subtle" className="pb-0 shadow-none">
             <CardContent className="space-y-2 py-5">
               <p className="text-sm font-semibold text-foreground">Effect op je dagtotaal</p>
               <p className="text-sm leading-7 text-muted-foreground" aria-live="polite">
diff --git a/components/planning/day-overview-card.tsx b/components/planning/day-overview-card.tsx
index 3c45771..cd630ca 100644
--- a/components/planning/day-overview-card.tsx
+++ b/components/planning/day-overview-card.tsx
@@ -50,7 +50,7 @@ function getStatusAccentClassName(key: "planned" | "completed" | "adjusted" | "s
 
 export function DayOverviewCard({ overview }: DayOverviewCardProps) {
   return (
-    <Card className="py-0">
+    <Card className="pb-0">
       <CardHeader className="pb-0">
         <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
           Dagoverzicht
@@ -62,7 +62,7 @@ export function DayOverviewCard({ overview }: DayOverviewCardProps) {
       </CardHeader>
       <CardContent className="space-y-5 pb-6">
         <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-          <Card tone="subtle" size="sm" className="py-0">
+          <Card tone="subtle" size="sm" className="pb-0">
             <CardContent className="space-y-1 py-4">
               <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
                 Vooraf gepland
@@ -76,7 +76,7 @@ export function DayOverviewCard({ overview }: DayOverviewCardProps) {
             </CardContent>
           </Card>
 
-          <Card tone="subtle" size="sm" className="py-0">
+          <Card tone="subtle" size="sm" className="pb-0">
             <CardContent className="space-y-1 py-4">
               <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
                 Werkelijk gedaan
@@ -90,7 +90,7 @@ export function DayOverviewCard({ overview }: DayOverviewCardProps) {
             </CardContent>
           </Card>
 
-          <Card tone="subtle" size="sm" className="py-0">
+          <Card tone="subtle" size="sm" className="pb-0">
             <CardContent className="space-y-1 py-4">
               <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
                 Ongepland erbij
@@ -104,7 +104,7 @@ export function DayOverviewCard({ overview }: DayOverviewCardProps) {
             </CardContent>
           </Card>
 
-          <Card tone="subtle" size="sm" className="py-0">
+          <Card tone="subtle" size="sm" className="pb-0">
             <CardContent className="space-y-1 py-4">
               <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
                 Nog open
@@ -151,7 +151,7 @@ export function DayOverviewCard({ overview }: DayOverviewCardProps) {
                 )}
               >
                 {item.label}
-                <span className="rounded-full bg-black/12 px-1.5 py-0.5 text-[0.7rem] font-semibold text-current">
+                <span className="rounded-full bg-black/12 px-1.5 pb-0.5 text-[0.7rem] font-semibold text-current">
                   {item.value}
                 </span>
               </span>
diff --git a/components/planning/energy-meter-card.tsx b/components/planning/energy-meter-card.tsx
index 7bb51ce..f4afcaa 100644
--- a/components/planning/energy-meter-card.tsx
+++ b/components/planning/energy-meter-card.tsx
@@ -50,7 +50,7 @@ export function EnergyMeterCard({
     meter.dailyBudget === null ? null : Math.min(100, Math.max(0, meter.progressPercent ?? 0));
 
   return (
-    <Card tone={tone === "default" ? "default" : "subtle"} className="py-0">
+    <Card tone={tone === "default" ? "default" : "subtle"} className="pb-0">
       <CardHeader className="pb-0">
         <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
           EnergyMeter
diff --git a/components/planning/today-activities-list.tsx b/components/planning/today-activities-list.tsx
index 6dc8519..571f196 100644
--- a/components/planning/today-activities-list.tsx
+++ b/components/planning/today-activities-list.tsx
@@ -103,7 +103,7 @@ export function TodayActivitiesList({
   skipReasons,
 }: TodayActivitiesListProps) {
   return (
-    <Card className="py-0">
+    <Card className="pb-0">
       <CardHeader className="pb-0">
         <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
           Vandaag in beeld
diff --git a/components/settings/settings-form.tsx b/components/settings/settings-form.tsx
index 9387979..39ca634 100644
--- a/components/settings/settings-form.tsx
+++ b/components/settings/settings-form.tsx
@@ -60,7 +60,7 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
       <input type="hidden" name="locale" value={locale} />
       <PreferenceHiddenFields draft={draft} />
 
-      <Card elevation="raised" className="py-0">
+      <Card elevation="raised" className="pb-0">
         <CardHeader className="pb-0">
           <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
             Account
@@ -83,7 +83,7 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
         </CardContent>
       </Card>
 
-      <Card className="py-0">
+      <Card className="pb-0">
         <CardHeader className="pb-0">
           <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
             Profiel
@@ -97,7 +97,7 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
           </CardDescription>
         </CardHeader>
         <CardContent className="grid gap-6 pb-6 lg:grid-cols-[16rem_1fr]">
-          <Card tone="subtle" className="py-0 shadow-none">
+          <Card tone="subtle" className="pb-0 shadow-none">
             <CardContent className="flex h-full flex-col items-center gap-4 px-5 py-5 text-center">
               <ProfileAvatar
                 avatarUrl={profileBundle.profile.avatarUrl}
@@ -182,7 +182,7 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
       </Card>
 
       <section className="grid gap-5 lg:grid-cols-2">
-        <Card className="py-0">
+        <Card className="pb-0">
           <CardHeader className="pb-0">
             <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
               Taal en tijd
@@ -235,14 +235,14 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
           </CardContent>
         </Card>
 
-        <Card className="py-0">
+        <Card className="pb-0">
           <CardHeader className="pb-0">
             <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
               Interface
             </p>
           </CardHeader>
           <CardContent className="space-y-4 pb-6">
-            <Card tone="subtle" className="py-0 shadow-none">
+            <Card tone="subtle" className="pb-0 shadow-none">
               <CardContent className="flex items-start justify-between gap-4 py-5">
                 <div className="space-y-1">
                   <Label htmlFor="show-energy-points" className="text-sm font-semibold text-foreground">
@@ -267,14 +267,14 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
       </section>
 
       <section className="grid gap-5 lg:grid-cols-2">
-        <Card className="py-0">
+        <Card className="pb-0">
           <CardHeader className="pb-0">
             <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
               Reminders
             </p>
           </CardHeader>
           <CardContent className="space-y-4 pb-6">
-            <Card tone="subtle" className="py-0 shadow-none">
+            <Card tone="subtle" className="pb-0 shadow-none">
               <CardContent className="space-y-4 py-5">
                 <div className="flex items-start justify-between gap-4">
                   <div className="space-y-1">
@@ -318,7 +318,7 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
               </CardContent>
             </Card>
 
-            <Card tone="subtle" className="py-0 shadow-none">
+            <Card tone="subtle" className="pb-0 shadow-none">
               <CardContent className="flex items-start justify-between gap-4 py-5">
                 <div className="space-y-1">
                   <Label htmlFor="reflection-reminder-enabled" className="text-sm font-semibold text-foreground">
@@ -341,7 +341,7 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
           </CardContent>
         </Card>
 
-        <Card tone="primary" elevation="raised" className="py-0">
+        <Card tone="primary" elevation="raised" className="pb-0">
           <CardHeader className="pb-0">
             <p className="text-xs font-semibold uppercase tracking-[0.24em] text-primary-foreground/75">
               Bewuste grenzen
diff --git a/components/ui/alert.tsx b/components/ui/alert.tsx
index 2dd102b..be3fbe8 100644
--- a/components/ui/alert.tsx
+++ b/components/ui/alert.tsx
@@ -8,8 +8,8 @@ const alertVariants = cva(
   {
     variants: {
       variant: {
-        default: "border-border/70 bg-card/92 text-card-foreground",
-        info: "border-primary/15 bg-secondary text-foreground",
+        default: "border-outline-variant/70 bg-surface-container-high text-card-foreground",
+        info: "border-primary/16 bg-primary-container text-primary-container-foreground",
         success: "border-success/30 bg-success/14 text-foreground",
         warning: "border-warning/32 bg-warning/16 text-foreground",
         destructive:
@@ -42,7 +42,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="alert-title"
       className={cn(
-        "font-medium leading-6 group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        "type-title-medium font-medium leading-6 group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
         className
       )}
       {...props}
@@ -58,7 +58,7 @@ function AlertDescription({
     <div
       data-slot="alert-description"
       className={cn(
-        "text-sm text-balance leading-7 text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        "type-body-medium text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
         className
       )}
       {...props}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 777c3ca..7110a07 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -4,16 +4,16 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-[var(--radius-full,9999px)] border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all duration-150 ease-[cubic-bezier(.2,.7,.2,1)] outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[1.125rem]",
+  "state-layer group/button inline-flex shrink-0 items-center justify-center rounded-[var(--radius-full,9999px)] border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all duration-150 ease-[cubic-bezier(.2,.7,.2,1)] outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[1.125rem]",
   {
     variants: {
       variant: {
         default:
           "bg-primary !text-white shadow-[var(--shadow-1)] hover:bg-primary/90 hover:shadow-[var(--shadow-2)] [a]:hover:bg-primary/90 [&_svg]:!text-white",
         outline:
-          "border-border bg-background/88 hover:bg-muted hover:text-foreground hover:shadow-[var(--shadow-1)] aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+          "border-outline-variant bg-surface-container-low/92 hover:bg-surface-container hover:text-foreground hover:shadow-[var(--shadow-1)] aria-expanded:bg-surface-container aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-[var(--shadow-1)] hover:bg-secondary/85 hover:shadow-[var(--shadow-2)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+          "bg-secondary-container text-secondary-container-foreground shadow-[var(--shadow-1)] hover:bg-secondary-container/88 hover:shadow-[var(--shadow-2)] aria-expanded:bg-secondary-container aria-expanded:text-secondary-container-foreground",
         success:
           "bg-success !text-white shadow-[var(--shadow-1)] hover:brightness-[0.98] hover:shadow-[var(--shadow-2)] [&_svg]:!text-white",
         warning:
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index f3111ae..03bda20 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -4,12 +4,12 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const cardVariants = cva(
-  "group/card flex flex-col gap-4 overflow-hidden rounded-[var(--radius-xl)] py-4 text-sm text-card-foreground ring-1 ring-border/75 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-[var(--radius-xl)] *:[img:last-child]:rounded-b-[var(--radius-xl)]",
+  "group/card flex flex-col gap-4 overflow-hidden rounded-[var(--radius-xl)] py-4 text-sm text-card-foreground ring-1 ring-outline-variant/70 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-[var(--radius-xl)] *:[img:last-child]:rounded-b-[var(--radius-xl)]",
   {
     variants: {
       tone: {
-        default: "bg-card/92",
-        subtle: "bg-background/78",
+        default: "bg-surface-container text-card-foreground",
+        subtle: "bg-surface-container-low text-card-foreground",
         primary: "bg-primary text-primary-foreground ring-primary/10",
       },
       elevation: {
@@ -64,7 +64,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-title"
       className={cn(
-        "font-heading text-base leading-snug font-semibold tracking-[-0.02em] group-data-[size=sm]/card:text-sm",
+        "type-title-large font-heading group-data-[size=sm]/card:text-sm",
         className
       )}
       {...props}
@@ -76,7 +76,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("type-body-medium text-muted-foreground", className)}
       {...props}
     />
   )
@@ -110,7 +110,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "flex items-center rounded-b-[var(--radius-xl)] border-t border-border/65 bg-muted/60 p-4 group-data-[size=sm]/card:p-3",
+        "flex items-center rounded-b-[var(--radius-xl)] border-t border-outline-variant/60 bg-surface-container-high p-4 group-data-[size=sm]/card:p-3",
         className
       )}
       {...props}
diff --git a/components/wizard/test-wizard-flow.tsx b/components/wizard/test-wizard-flow.tsx
index 5ce65bb..c4df3c2 100644
--- a/components/wizard/test-wizard-flow.tsx
+++ b/components/wizard/test-wizard-flow.tsx
@@ -129,7 +129,7 @@ export function TestWizardFlow() {
       backAction={backAction}
       nextAction={nextAction}
     >
-      <Card tone="subtle" className="py-0 shadow-none">
+      <Card tone="subtle" className="pb-0 shadow-none">
         <CardHeader className="pb-0">
           <CardTitle className="font-[family-name:var(--font-display)] text-2xl">
             {wizard.currentStep.title}