From 9d5e58f85834c04384bd0889885cfe4e341b540e Mon Sep 17 00:00:00 2001
From: AlacrisDevs <alacrisdevs@gmail.com>
Date: Sat, 7 Feb 2026 11:18:23 +0200
Subject: [PATCH] ui: overhaul home page, style guide, account settings - Home
 page: bg-background, border-based org cards, material icons, compact
 typography - Style guide: new header with back button, rounded-xl swatches,
 consistent section headings - Account settings: replace bg-background
 rounded-[32px] with border-based rounded-xl cards - svelte-check: 0 errors,
 vitest: 112/112 passed

---
 src/routes/+page.svelte                   | 119 +++-----
 src/routes/[orgSlug]/account/+page.svelte |  42 +--
 src/routes/style/+page.svelte             | 326 +++++++---------------
 3 files changed, 151 insertions(+), 336 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 18e1545..a7e5e7d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { getContext } from "svelte";
-    import { Button, Card, Modal, Input } from "$lib/components/ui";
+    import { Button, Modal, Input } from "$lib/components/ui";
     import { createOrganization, generateSlug } from "$lib/api/organizations";
     import { toasts } from "$lib/stores/toast.svelte";
     import type { SupabaseClient } from "@supabase/supabase-js";
@@ -58,108 +58,53 @@
     <title>Organizations | Root</title>
 </svelte:head>
 
-<div class="min-h-screen bg-dark">
-    <header class="border-b border-light/10 bg-surface">
-        <div
-            class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between"
-        >
-            <h1 class="text-xl font-bold text-light">Root Org</h1>
-            <div class="flex items-center gap-4">
-                <a href="/style" class="text-sm text-light/60 hover:text-light"
-                    >Style Guide</a
-                >
+<div class="min-h-screen bg-background">
+    <!-- Header -->
+    <header class="border-b border-light/5">
+        <div class="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <span class="material-symbols-rounded text-primary" style="font-size: 28px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 28;">hub</span>
+                <span class="font-heading text-h4 text-white">Root</span>
+            </div>
+            <div class="flex items-center gap-2">
+                <a href="/style" class="px-3 py-1.5 text-[12px] text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors">Style Guide</a>
                 <form method="POST" action="/auth/logout">
-                    <Button variant="tertiary" size="sm" type="submit"
-                        >Sign Out</Button
-                    >
+                    <Button variant="tertiary" size="sm" type="submit">Sign Out</Button>
                 </form>
             </div>
         </div>
     </header>
 
-    <main class="max-w-6xl mx-auto px-6 py-8">
-        <div class="flex items-center justify-between mb-8">
+    <main class="max-w-5xl mx-auto px-6 py-8">
+        <div class="flex items-center justify-between mb-6">
             <div>
-                <h2 class="text-2xl font-bold text-light">
-                    Your Organizations
-                </h2>
-                <p class="text-light/50 mt-1">
-                    Select an organization to get started
-                </p>
+                <h2 class="font-heading text-h3 text-white">Your Organizations</h2>
+                <p class="text-body-sm text-light/40 mt-1">Select an organization to get started</p>
             </div>
-            <Button onclick={() => (showCreateModal = true)}>
-                <svg
-                    class="w-4 h-4 mr-2"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                >
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                </svg>
-                New Organization
-            </Button>
+            <Button size="sm" icon="add" onclick={() => (showCreateModal = true)}>New Organization</Button>
         </div>
 
         {#if organizations.length === 0}
-            <Card>
-                <div class="p-12 text-center">
-                    <svg
-                        class="w-16 h-16 mx-auto mb-4 text-light/30"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                    >
-                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-                        <circle cx="9" cy="7" r="4" />
-                        <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
-                        <path d="M16 3.13a4 4 0 0 1 0 7.75" />
-                    </svg>
-                    <h3 class="text-lg font-medium text-light mb-2">
-                        No organizations yet
-                    </h3>
-                    <p class="text-light/50 mb-6">
-                        Create your first organization to start collaborating
-                    </p>
-                    <Button onclick={() => (showCreateModal = true)}
-                        >Create Organization</Button
-                    >
-                </div>
-            </Card>
+            <div class="bg-dark/30 border border-light/5 rounded-xl p-12 text-center">
+                <span class="material-symbols-rounded text-light/20 mb-3 block" style="font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;">groups</span>
+                <h3 class="font-heading text-body text-white mb-1">No organizations yet</h3>
+                <p class="text-body-sm text-light/40 mb-6">Create your first organization to start collaborating</p>
+                <Button size="sm" icon="add" onclick={() => (showCreateModal = true)}>Create Organization</Button>
+            </div>
         {:else}
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                 {#each organizations as org}
                     <a href="/{org.slug}" class="block group">
-                        <Card
-                            class="h-full hover:ring-1 hover:ring-primary/50 transition-all"
-                        >
-                            <div class="p-6">
-                                <div
-                                    class="flex items-start justify-between mb-4"
-                                >
-                                    <div
-                                        class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center text-primary font-bold text-lg"
-                                    >
-                                        {org.name.charAt(0).toUpperCase()}
-                                    </div>
-                                    <span
-                                        class="text-xs px-2 py-1 bg-light/10 rounded text-light/60 capitalize"
-                                    >
-                                        {org.role}
-                                    </span>
+                        <div class="bg-dark/30 border border-light/5 hover:border-light/10 rounded-xl p-5 transition-all h-full">
+                            <div class="flex items-start justify-between mb-3">
+                                <div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center text-primary font-heading text-body">
+                                    {org.name.charAt(0).toUpperCase()}
                                 </div>
-                                <h3
-                                    class="text-lg font-semibold text-light group-hover:text-primary transition-colors"
-                                >
-                                    {org.name}
-                                </h3>
-                                <p class="text-sm text-light/40 mt-1">
-                                    /{org.slug}
-                                </p>
+                                <span class="text-[10px] px-2 py-0.5 bg-light/5 rounded-md text-light/40 capitalize font-body">{org.role}</span>
                             </div>
-                        </Card>
+                            <h3 class="font-heading text-body-sm text-white group-hover:text-primary transition-colors">{org.name}</h3>
+                            <p class="text-[11px] text-light/30 mt-0.5 font-body">/{org.slug}</p>
+                        </div>
                     </a>
                 {/each}
             </div>
diff --git a/src/routes/[orgSlug]/account/+page.svelte b/src/routes/[orgSlug]/account/+page.svelte
index 9aba7c9..e73afaf 100644
--- a/src/routes/[orgSlug]/account/+page.svelte
+++ b/src/routes/[orgSlug]/account/+page.svelte
@@ -227,17 +227,17 @@
 	<title>Account Settings | Root</title>
 </svelte:head>
 
-<div class="flex-1 p-6">
+<div class="flex-1 p-6 overflow-auto">
 	<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
 		<!-- Profile Section -->
-		<div class="bg-background rounded-[32px] p-6 flex flex-col gap-6">
-			<h2 class="font-heading text-h3 text-white">
+		<div class="bg-dark/30 border border-light/5 rounded-xl p-5 flex flex-col gap-5">
+			<h2 class="font-heading text-body text-white">
 				{m.account_profile()}
 			</h2>
 
 			<!-- Avatar -->
 			<div class="flex flex-col gap-3">
-				<span class="font-body text-body-sm text-light"
+				<span class="font-body text-body-sm text-light/60"
 					>{m.account_photo()}</span
 				>
 				<div class="flex items-center gap-4">
@@ -306,8 +306,8 @@
 		</div>
 
 		<!-- Appearance Section -->
-		<div class="bg-background rounded-[32px] p-6 flex flex-col gap-6">
-			<h2 class="font-heading text-h3 text-white">
+		<div class="bg-dark/30 border border-light/5 rounded-xl p-5 flex flex-col gap-5">
+			<h2 class="font-heading text-body text-white">
 				{m.account_appearance()}
 			</h2>
 
@@ -325,7 +325,7 @@
 
 			<!-- Accent Color -->
 			<div class="flex flex-col gap-2">
-				<span class="font-body text-body-sm text-light"
+				<span class="font-body text-body-sm text-light/60"
 					>{m.account_accent_color()}</span
 				>
 				<div class="flex flex-wrap gap-2 items-center">
@@ -363,10 +363,10 @@
 			<!-- Use Org Theme -->
 			<div class="flex items-center justify-between">
 				<div>
-					<p class="font-body text-body text-white">
+					<p class="font-body text-body-sm text-white">
 						{m.account_use_org_theme()}
 					</p>
-					<p class="font-body text-[12px] text-light/50">
+					<p class="font-body text-[11px] text-light/40">
 						{m.account_use_org_theme_desc()}
 					</p>
 				</div>
@@ -388,20 +388,20 @@
 
 			<!-- Language -->
 			<div class="flex flex-col gap-2">
-				<span class="font-body text-body-sm text-light"
+				<span class="font-body text-body-sm text-light/60"
 					>{m.account_language()}</span
 				>
-				<p class="font-body text-[12px] text-light/50">
+				<p class="font-body text-[11px] text-light/40">
 					{m.account_language_desc()}
 				</p>
 				<div class="flex gap-2 mt-1">
 					{#each locales as locale}
 						<button
 							type="button"
-							class="px-4 py-2 rounded-full text-sm font-medium transition-colors {currentLocale ===
+							class="px-3 py-1.5 rounded-lg text-[12px] font-medium transition-colors {currentLocale ===
 							locale
-								? 'bg-primary text-night'
-								: 'bg-light/10 text-light/70 hover:bg-light/20'}"
+								? 'bg-primary text-background'
+								: 'bg-light/5 text-light/50 hover:bg-light/10'}"
 							onclick={() => handleLanguageChange(locale)}
 						>
 							{localeLabels[locale] ?? locale}
@@ -418,16 +418,16 @@
 		</div>
 
 		<!-- Security & Sessions Section -->
-		<div class="bg-background rounded-[32px] p-6 flex flex-col gap-6">
-			<h2 class="font-heading text-h3 text-white">
+		<div class="bg-dark/30 border border-light/5 rounded-xl p-5 flex flex-col gap-5">
+			<h2 class="font-heading text-body text-white">
 				{m.account_security()}
 			</h2>
 
 			<div class="flex flex-col gap-2">
-				<p class="font-body text-body text-white">
+				<p class="font-body text-body-sm text-white">
 					{m.account_password()}
 				</p>
-				<p class="font-body text-body-sm text-light/50">
+				<p class="font-body text-[11px] text-light/40">
 					{m.account_password_desc()}
 				</p>
 				<div class="mt-2">
@@ -452,11 +452,11 @@
 				</div>
 			</div>
 
-			<div class="border-t border-light/10 pt-4 flex flex-col gap-2">
-				<p class="font-body text-body text-white">
+			<div class="border-t border-light/5 pt-4 flex flex-col gap-2">
+				<p class="font-body text-body-sm text-white">
 					{m.account_active_sessions()}
 				</p>
-				<p class="font-body text-body-sm text-light/50">
+				<p class="font-body text-[11px] text-light/40">
 					{m.account_sessions_desc()}
 				</p>
 				<div class="mt-2">
diff --git a/src/routes/style/+page.svelte b/src/routes/style/+page.svelte
index 66d8d58..5601b3d 100644
--- a/src/routes/style/+page.svelte
+++ b/src/routes/style/+page.svelte
@@ -36,97 +36,76 @@
 	<title>Style Guide | Root</title>
 </svelte:head>
 
-<div class="min-h-screen bg-dark p-8">
-	<div class="max-w-6xl mx-auto space-y-12">
-		<!-- Back Button -->
-		<a
-			href="/"
-			class="inline-flex items-center gap-2 text-light/60 hover:text-light transition-colors"
-		>
-			<svg
-				class="w-5 h-5"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-			>
-				<path d="M19 12H5M12 19l-7-7 7-7" />
-			</svg>
-			Back to Home
-		</a>
+<div class="min-h-screen bg-background">
+	<!-- Header -->
+	<header class="border-b border-light/5">
+		<div class="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
+			<div class="flex items-center gap-3">
+				<a href="/" class="p-1.5 text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors">
+					<span class="material-symbols-rounded" style="font-size: 20px;">arrow_back</span>
+				</a>
+				<span class="font-heading text-body text-white">Style Guide</span>
+				<span class="text-[11px] text-light/30 font-body">All UI components and their variants</span>
+			</div>
+		</div>
+	</header>
 
-		<!-- Header -->
-		<header class="text-center space-y-4">
-			<h1 class="text-4xl font-bold text-light">Root Style Guide</h1>
-			<p class="text-light/60">All UI components and their variants</p>
-		</header>
+	<div class="max-w-5xl mx-auto px-6 py-8 space-y-10">
 
-		<!-- Colors - Figma Design System -->
+		<!-- Colors -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Colors
-			</h2>
-			<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
-				<div class="space-y-2">
-					<div
-						class="w-full h-20 rounded-[32px] bg-background border border-light/20"
-					></div>
-					<p class="text-sm text-light/60">Background</p>
-					<code class="text-xs text-light/40">#05090F</code>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Colors</h2>
+			<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-3">
+				<div class="space-y-1.5">
+					<div class="w-full h-16 rounded-xl bg-background border border-light/10"></div>
+					<p class="text-[12px] text-light/60 font-body">Background</p>
+					<code class="text-[10px] text-light/30">#05090F</code>
 				</div>
-				<div class="space-y-2">
-					<div class="w-full h-20 rounded-[32px] bg-night"></div>
-					<p class="text-sm text-light/60">Night</p>
-					<code class="text-xs text-light/40">#0A121F</code>
+				<div class="space-y-1.5">
+					<div class="w-full h-16 rounded-xl bg-night"></div>
+					<p class="text-[12px] text-light/60 font-body">Night</p>
+					<code class="text-[10px] text-light/30">#0A121F</code>
 				</div>
-				<div class="space-y-2">
-					<div class="w-full h-20 rounded-[32px] bg-dark"></div>
-					<p class="text-sm text-light/60">Dark</p>
-					<code class="text-xs text-light/40">#14243E</code>
+				<div class="space-y-1.5">
+					<div class="w-full h-16 rounded-xl bg-dark"></div>
+					<p class="text-[12px] text-light/60 font-body">Dark</p>
+					<code class="text-[10px] text-light/30">#14243E</code>
 				</div>
-				<div class="space-y-2">
-					<div class="w-full h-20 rounded-[32px] bg-light"></div>
-					<p class="text-sm text-light/60">Light</p>
-					<code class="text-xs text-light/40">#E5E6F0</code>
+				<div class="space-y-1.5">
+					<div class="w-full h-16 rounded-xl bg-light"></div>
+					<p class="text-[12px] text-light/60 font-body">Light</p>
+					<code class="text-[10px] text-light/30">#E5E6F0</code>
 				</div>
-				<div class="space-y-2">
-					<div class="w-full h-20 rounded-[32px] bg-primary"></div>
-					<p class="text-sm text-light/60">Primary</p>
-					<code class="text-xs text-light/40">#00A3E0</code>
+				<div class="space-y-1.5">
+					<div class="w-full h-16 rounded-xl bg-primary"></div>
+					<p class="text-[12px] text-light/60 font-body">Primary</p>
+					<code class="text-[10px] text-light/30">#00A3E0</code>
 				</div>
-				<div class="space-y-2">
-					<div class="w-full h-20 rounded-[32px] bg-success"></div>
-					<p class="text-sm text-light/60">Success</p>
-					<code class="text-xs text-light/40">#33E000</code>
+				<div class="space-y-1.5">
+					<div class="w-full h-16 rounded-xl bg-success"></div>
+					<p class="text-[12px] text-light/60 font-body">Success</p>
+					<code class="text-[10px] text-light/30">#33E000</code>
 				</div>
-				<div class="space-y-2">
-					<div class="w-full h-20 rounded-[32px] bg-warning"></div>
-					<p class="text-sm text-light/60">Warning</p>
-					<code class="text-xs text-light/40">#FFAB00</code>
+				<div class="space-y-1.5">
+					<div class="w-full h-16 rounded-xl bg-warning"></div>
+					<p class="text-[12px] text-light/60 font-body">Warning</p>
+					<code class="text-[10px] text-light/30">#FFAB00</code>
 				</div>
-				<div class="space-y-2">
-					<div class="w-full h-20 rounded-[32px] bg-error"></div>
-					<p class="text-sm text-light/60">Error</p>
-					<code class="text-xs text-light/40">#E03D00</code>
+				<div class="space-y-1.5">
+					<div class="w-full h-16 rounded-xl bg-error"></div>
+					<p class="text-[12px] text-light/60 font-body">Error</p>
+					<code class="text-[10px] text-light/30">#E03D00</code>
 				</div>
 			</div>
 		</section>
 
 		<!-- Buttons -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Buttons
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Buttons</h2>
 
-			<div class="space-y-6">
+			<div class="space-y-5">
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Variants
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Variants</h3>
 					<div class="flex flex-wrap gap-3">
 						<Button variant="primary">Primary</Button>
 						<Button variant="secondary">Secondary</Button>
@@ -137,9 +116,7 @@
 				</div>
 
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Sizes
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Sizes</h3>
 					<div class="flex flex-wrap items-center gap-3">
 						<Button size="sm">Small</Button>
 						<Button size="md">Medium</Button>
@@ -148,9 +125,7 @@
 				</div>
 
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						With Icons (Material Symbols)
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">With Icons</h3>
 					<div class="flex flex-wrap items-center gap-3">
 						<Button icon="add">Add Item</Button>
 						<Button variant="secondary" icon="edit">Edit</Button>
@@ -160,9 +135,7 @@
 				</div>
 
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						States
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">States</h3>
 					<div class="flex flex-wrap gap-3">
 						<Button>Normal</Button>
 						<Button disabled>Disabled</Button>
@@ -171,9 +144,7 @@
 				</div>
 
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Full Width
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Full Width</h3>
 					<div class="max-w-sm">
 						<Button fullWidth icon="rocket_launch"
 							>Full Width Button</Button
@@ -185,11 +156,7 @@
 
 		<!-- Inputs -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Inputs
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Inputs</h2>
 
 			<div class="grid md:grid-cols-2 gap-6">
 				<Input
@@ -229,11 +196,7 @@
 
 		<!-- Textarea -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Textarea
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Textarea</h2>
 
 			<div class="grid md:grid-cols-2 gap-6">
 				<Textarea
@@ -251,11 +214,7 @@
 
 		<!-- Select -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Select
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Select</h2>
 
 			<div class="grid md:grid-cols-2 gap-6">
 				<Select
@@ -273,17 +232,11 @@
 
 		<!-- Avatars -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Avatars
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Avatars</h2>
 
-			<div class="space-y-6">
+			<div class="space-y-5">
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Sizes
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Sizes</h3>
 					<div class="flex items-end gap-4">
 						<Avatar name="John Doe" size="sm" />
 						<Avatar name="John Doe" size="md" />
@@ -293,9 +246,7 @@
 				</div>
 
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						With Status (placeholder)
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">With Status</h3>
 					<div class="flex items-center gap-4">
 						<Avatar name="Online User" size="lg" />
 						<Avatar name="Away User" size="lg" />
@@ -305,9 +256,7 @@
 				</div>
 
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Different Names (Color Generation)
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Color Generation</h3>
 					<div class="flex items-center gap-4">
 						<Avatar name="Alice" size="lg" />
 						<Avatar name="Bob" size="lg" />
@@ -321,17 +270,11 @@
 
 		<!-- Chips -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Chips
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Chips</h2>
 
-			<div class="space-y-6">
+			<div class="space-y-5">
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Variants
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Variants</h3>
 					<div class="flex flex-wrap gap-3">
 						<Chip variant="primary">Primary</Chip>
 						<Chip variant="success">Success</Chip>
@@ -345,11 +288,7 @@
 
 		<!-- List Items -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				List Items
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">List Items</h2>
 
 			<div class="max-w-[240px] space-y-2">
 				<ListItem icon="info">Default Item</ListItem>
@@ -364,11 +303,7 @@
 
 		<!-- Org Header -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Organization Header
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Organization Header</h2>
 
 			<div class="max-w-[240px] space-y-4">
 				<OrgHeader name="Acme Corp" role="Admin" />
@@ -379,11 +314,7 @@
 
 		<!-- Calendar Day -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Calendar Day
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Calendar Day</h2>
 
 			<div class="flex gap-1 max-w-[720px]">
 				<CalendarDay day="Mon" isHeader />
@@ -403,17 +334,11 @@
 
 		<!-- Badges -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Badges
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Badges</h2>
 
-			<div class="space-y-6">
+			<div class="space-y-5">
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Variants
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Variants</h3>
 					<div class="flex flex-wrap gap-3">
 						<Badge variant="default">Default</Badge>
 						<Badge variant="primary">Primary</Badge>
@@ -425,9 +350,7 @@
 				</div>
 
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Sizes
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Sizes</h3>
 					<div class="flex flex-wrap items-center gap-3">
 						<Badge size="sm">Small</Badge>
 						<Badge size="md">Medium</Badge>
@@ -439,11 +362,7 @@
 
 		<!-- Cards -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Cards
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Cards</h2>
 
 			<div class="grid md:grid-cols-3 gap-6">
 				<Card variant="default">
@@ -469,17 +388,11 @@
 
 		<!-- Toggle -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Toggle
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Toggle</h2>
 
-			<div class="space-y-6">
+			<div class="space-y-5">
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Sizes
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Sizes</h3>
 					<div class="flex items-center gap-6">
 						<div class="flex items-center gap-2">
 							<Toggle size="sm" />
@@ -497,9 +410,7 @@
 				</div>
 
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						States
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">States</h3>
 					<div class="flex items-center gap-6">
 						<div class="flex items-center gap-2">
 							<Toggle />
@@ -520,17 +431,11 @@
 
 		<!-- Spinners -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Spinners
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Spinners</h2>
 
-			<div class="space-y-6">
+			<div class="space-y-5">
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Sizes
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Sizes</h3>
 					<div class="flex items-center gap-6">
 						<Spinner size="sm" />
 						<Spinner size="md" />
@@ -539,9 +444,7 @@
 				</div>
 
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Colors
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Colors</h3>
 					<div class="flex items-center gap-6">
 						<Spinner color="primary" />
 						<Spinner color="light" />
@@ -555,11 +458,7 @@
 
 		<!-- Modal -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Modal
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Modal</h2>
 
 			<div>
 				<Button onclick={() => (modalOpen = true)}>Open Modal</Button>
@@ -584,18 +483,12 @@
 
 		<!-- Typography -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Typography
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Typography</h2>
 
-			<div class="space-y-6">
+			<div class="space-y-5">
 				<!-- Headings (Tilt Warp) -->
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Headings &mdash; Tilt Warp
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Headings &mdash; Tilt Warp</h3>
 					<div class="space-y-3">
 						<div class="flex items-baseline gap-4">
 							<span
@@ -644,9 +537,7 @@
 
 				<!-- Button Text (Tilt Warp) -->
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Button Text &mdash; Tilt Warp
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Button Text &mdash; Tilt Warp</h3>
 					<div class="space-y-3">
 						<div class="flex items-baseline gap-4">
 							<span
@@ -680,9 +571,7 @@
 
 				<!-- Body Text (Work Sans) -->
 				<div>
-					<h3 class="text-lg font-medium text-light/80 mb-3">
-						Body &mdash; Work Sans
-					</h3>
+					<h3 class="text-body-sm font-heading text-light/60 mb-2">Body &mdash; Work Sans</h3>
 					<div class="space-y-3">
 						<div class="flex items-baseline gap-4">
 							<span
@@ -721,11 +610,7 @@
 
 		<!-- Toasts -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Toasts
-			</h2>
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Toasts</h2>
 			<div class="space-y-4">
 				<Toast
 					variant="success"
@@ -752,15 +637,9 @@
 
 		<!-- Logo -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Logo
-			</h2>
-			<p class="text-light/60">
-				Brand logo component with size variants.
-			</p>
-			<div class="flex items-center gap-8 bg-night p-6 rounded-xl">
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Logo</h2>
+			<p class="text-[12px] text-light/40 font-body">Brand logo component with size variants.</p>
+			<div class="flex items-center gap-8 bg-dark/30 border border-light/5 p-5 rounded-xl">
 				<div class="flex flex-col items-center gap-2">
 					<Logo size="sm" />
 					<span class="text-xs text-light/60">Small</span>
@@ -774,16 +653,9 @@
 
 		<!-- ContentHeader -->
 		<section class="space-y-4">
-			<h2
-				class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
-			>
-				Content Header
-			</h2>
-			<p class="text-light/60">
-				Page header component with avatar, title, action button, and
-				more menu.
-			</p>
-			<div class="bg-night p-6 rounded-xl space-y-4">
+			<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Content Header</h2>
+			<p class="text-[12px] text-light/40 font-body">Page header component with avatar, title, action button, and more menu.</p>
+			<div class="bg-dark/30 border border-light/5 p-5 rounded-xl space-y-4">
 				<ContentHeader
 					title="Page Title"
 					actionLabel="+ New"
@@ -796,10 +668,8 @@
 		</section>
 
 		<!-- Footer -->
-		<footer class="text-center py-8 border-t border-light/10">
-			<p class="text-light/40 text-sm">
-				Root Organization Platform - Style Guide
-			</p>
+		<footer class="text-center py-8 border-t border-light/5">
+			<p class="text-[11px] text-light/30 font-body">Root Organization Platform &mdash; Style Guide</p>
 		</footer>
 	</div>
 </div>