Refine dashboard typography

apps/dashboard/src/routes/_protected/dashboard.tsx

@@ -40,7 +40,7 @@ function DashboardPage() {
 							</Avatar>
 							<div className="space-y-1">
 								<div className="flex items-center gap-2">
-									<CardTitle className="text-2xl tracking-tight">
+									<CardTitle className="text-xl tracking-tight sm:text-2xl">
 										Welcome, {displayName}
 									</CardTitle>
 									<Badge variant="secondary">Connected</Badge>

apps/dashboard/src/routes/index.tsx

@@ -40,7 +40,7 @@ function Home() {
 								Circle base imported
 							</Badge>
 							<div className="space-y-3">
-								<CardTitle className="text-4xl tracking-tight sm:text-5xl">
+								<CardTitle className="text-3xl tracking-tight sm:text-4xl">
 									QuickHub, now on a shared UI foundation.
 								</CardTitle>
 								<CardDescription className="max-w-2xl text-base leading-7 text-muted-foreground">

apps/dashboard/src/routes/login.tsx

@@ -23,7 +23,7 @@ function LoginPage() {
 		<main className="flex min-h-screen items-center justify-center bg-[radial-gradient(circle_at_top,_color-mix(in_oklch,_var(--color-primary)_6%,_transparent),_transparent_48%),linear-gradient(180deg,_color-mix(in_oklch,_var(--color-secondary)_65%,_white)_0%,_transparent_45%)] px-4">
 			<Card className="w-full max-w-md border-border/70 bg-background/95 shadow-sm backdrop-blur">
 				<CardHeader className="text-center">
-					<CardTitle className="text-3xl tracking-tight">
+					<CardTitle className="text-2xl tracking-tight sm:text-3xl">
 						Sign in to QuickHub
 					</CardTitle>
 					<CardDescription className="text-base">

packages/ui/package.json

@@ -16,6 +16,8 @@
 		"format": "biome format"
 	},
 	"dependencies": {
+		"@fontsource-variable/inter": "^5.2.8",
+		"@fontsource/geist-mono": "^5.2.7",
 		"@radix-ui/react-alert-dialog": "^1.1.6",
 		"@radix-ui/react-avatar": "^1.1.3",
 		"@radix-ui/react-checkbox": "^1.1.4",
@@ -33,17 +35,17 @@
 		"@radix-ui/react-tabs": "^1.1.3",
 		"@radix-ui/react-toggle": "^1.1.2",
 		"@radix-ui/react-tooltip": "^1.1.8",
-		"cmdk": "1.0.0",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
+		"cmdk": "1.0.0",
 		"lucide-react": "^0.545.0",
 		"next-themes": "^0.4.4",
 		"react-day-picker": "8.10.1",
 		"react-hook-form": "^7.54.2",
 		"react-resizable-panels": "^3.0.3",
 		"sonner": "^2.0.1",
-		"tailwindcss-animate": "^1.0.7",
-		"tailwind-merge": "^3.3.0"
+		"tailwind-merge": "^3.3.0",
+		"tailwindcss-animate": "^1.0.7"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.4.5",

packages/ui/src/styles/globals.css

@@ -1,3 +1,5 @@
+@import "@fontsource-variable/inter";
+@import "@fontsource/geist-mono";
 @import "tailwindcss";
 
 @plugin "tailwindcss-animate";
@@ -9,9 +11,26 @@
 
 @theme {
 	--font-sans:
-		"Instrument Sans", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
+		"Inter Variable", "Inter", "Avenir Next", ui-sans-serif, system-ui,
+		sans-serif;
 	--font-mono:
-		"JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code", monospace;
+		"Geist Mono", "SF Mono", ui-monospace, "Cascadia Code", monospace;
+	--text-sm: 0.875rem;
+	--text-sm--line-height: 1.45;
+	--text-base: 1rem;
+	--text-base--line-height: 1.55;
+	--text-lg: 1.0625rem;
+	--text-lg--line-height: 1.45;
+	--text-xl: 1.1875rem;
+	--text-xl--line-height: 1.4;
+	--text-2xl: 1.375rem;
+	--text-2xl--line-height: 1.3;
+	--text-3xl: 1.625rem;
+	--text-3xl--line-height: 1.2;
+	--text-4xl: 1.875rem;
+	--text-4xl--line-height: 1.15;
+	--text-5xl: 2rem;
+	--text-5xl--line-height: 1.1;
 }
 
 :root {