sarthakagrawal927 · Oct 11, 2026 · Oct 11, 2026 · Oct 11, 2026 · Oct 11, 2026
diff --git a/knip.jsonc b/knip.jsonc
@@ -14,6 +14,7 @@
         // Loaded through Tailwind CSS directives rather than JavaScript imports.
         // Optional documentation presentation layer; Markdown remains authoritative.
         // Spawned by the code-health checker rather than imported.
+        "@fontsource-variable/geist",
         "jscpd",
         "tailwindcss"
       ],

diff --git a/landing-astro/package.json b/landing-astro/package.json
@@ -13,9 +13,9 @@
   "dependencies": {
     "@astrojs/react": "7.0.0",
     "@astrojs/sitemap": "^3.7.3",
-    "@saas-maker/motion": "github:sass-maker/ui-library#v0.1.14&path:/packages/motion",
-    "@saas-maker/templates": "github:sass-maker/ui-library#v0.1.14&path:/packages/templates",
-    "@saas-maker/ui": "github:sass-maker/ui-library#v0.1.14&path:/packages/ui",
+    "@saas-maker/motion": "github:sass-maker/ui-library#v0.1.20&path:/packages/motion",
+    "@saas-maker/templates": "github:sass-maker/ui-library#v0.1.20&path:/packages/templates",
+    "@saas-maker/ui": "github:sass-maker/ui-library#v0.1.20&path:/packages/ui",
     "@tailwindcss/vite": "4.3.3",
     "astro": "7.2.8",
     "lucide-react": "1.48.0",

diff --git a/landing-astro/src/components/Head.astro b/landing-astro/src/components/Head.astro
@@ -28,7 +28,7 @@ const SITE_URL = 'https://read.significanthobbies.com';
   <meta name="twitter:description" content={description} />
   <meta name="twitter:image" content={`${SITE_URL}/reader-opengraph.png`} />
 </>}
-<meta name="theme-color" content="#f0eee6" />
+<meta name="theme-color" content="#09090b" />
 <meta name="application-name" content="Reader" />
 <link rel="alternate" type="text/markdown" href={new URL(canonicalPath === '/' ? '/index.md' : `${canonicalPath}.md`, SITE_URL)} />
 <link rel="icon" href="/favicon.svg" type="image/svg+xml" />

diff --git a/landing-astro/src/content/reader.json b/landing-astro/src/content/reader.json
@@ -3,7 +3,21 @@
   "page": {
     "title": "Reader — your saved-link inbox",
     "description": "Save links from the web. Find them, pull their content, and mark them read through ChatGPT.",
-    "theme": "paper",
+    "mode": "dark",
+    "fromApp": {
+      "background": "#09090B",
+      "foreground": "#FAFAFA",
+      "card": "#18181B",
+      "surface": "#18181B",
+      "muted": "#27272A",
+      "mutedForeground": "#A1A1AA",
+      "border": "#3F3F46",
+      "brand": "#E27A5C",
+      "brandForeground": "#09090B",
+      "destructive": "#F87171",
+      "radius": "12px",
+      "fonts": { "sans": "geist", "display": "geist", "mono": "geist-mono" }
+    },
     "icon": "icon.svg",
     "assetBase": "/",
     "canonical": "https://read.significanthobbies.com/",
@@ -69,7 +83,6 @@
       "height": 900,
       "chrome": "browser"
     },
-    "backdrop": "footer-art/reader-precise-original-v1.webp",
     "caption": "Illustrative interface · example links, not a customer's inbox"
   },
   "sections": [

diff --git a/landing-astro/src/styles/landing.css b/landing-astro/src/styles/landing.css
@@ -1,7 +1,9 @@
-:root { --paper: #f0eee6; --paper-light: #faf8f1; --ink: #20231f; --ink-soft: #565b52; --line: rgba(32,35,31,.18); --rust: #b74d33; }
+@import "@fontsource-variable/geist";
+
+:root { --paper: #09090b; --paper-light: #18181b; --ink: #fafafa; --ink-soft: #a1a1aa; --line: #3f3f46; --rust: #e27a5c; color-scheme: dark; }
 * { box-sizing: border-box; }
-body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
-a { color: inherit; text-decoration: none; }
+body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Geist Variable", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
+a { color: var(--rust); text-decoration: none; }
 a:focus-visible { outline: 2px solid var(--rust); outline-offset: 5px; }
 .page { min-height: 100dvh; display: flex; flex-direction: column; }
 .header { border-bottom: 1px solid var(--line); }
@@ -10,8 +12,8 @@ a:focus-visible { outline: 2px solid var(--rust); outline-offset: 5px; }
 .btn-signin { font-size: .9rem; border-bottom: 1px solid var(--ink); }
 .hero { max-width: 76rem; width: 100%; margin: auto; padding: 6rem 2rem; display: grid; grid-template-columns: 1.2fr 1fr; gap: 5rem; align-items: center; }
 .eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; color: var(--rust); font-weight: 650; }
-h1 { font-family: Georgia, serif; font-weight: 400; font-size: clamp(2.8rem, 4.8vw, 4.6rem); line-height: 1.08; letter-spacing: -.035em; margin: 1.3rem 0; }
-.btn-secondary { display: inline-flex; min-height: 3rem; align-items: center; padding: .75rem 1.1rem; border: 1px solid var(--ink); font-size: .9rem; }
+h1 { font-family: inherit; font-weight: 600; font-size: clamp(2.8rem, 4.8vw, 4.6rem); line-height: 1.08; letter-spacing: -.035em; margin: 1.3rem 0; }
+.btn-secondary { display: inline-flex; min-height: 3rem; align-items: center; padding: .75rem 1.1rem; border: 1px solid var(--line); font-size: .9rem; }
 .btn-secondary:hover { background: var(--paper-light); }
 .site-footer { max-width: 76rem; width: 100%; margin: auto; border-top: 1px solid var(--line); padding: 1.5rem 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .8rem; color: var(--ink-soft); }
 @media (max-width: 850px) { .hero { grid-template-columns: 1fr; gap: 3rem; padding: 3rem 2rem; } }

diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     ]
   },
   "dependencies": {
+    "@fontsource-variable/geist": "5.3.0",
     "@mozilla/readability": "0.6.0",
     "@radix-ui/react-slot": "1.3.3",
     "@saas-maker/app-health": "https://github.com/sass-maker/app-health/releases/download/node-v0.4.0/saas-maker-app-health-0.4.0.tgz",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/LoginClient.tsx b/src/components/LoginClient.tsx
@@ -56,7 +56,7 @@ export default function LoginClient() {
 
   if (redirecting) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-[#15130f]">
+      <div className="flex min-h-screen items-center justify-center bg-[#09090B]">
         <div className="text-center">
           <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-[var(--accent-10)]" />
           <p className="text-[var(--gray-11)]">Loading your library...</p>
@@ -66,7 +66,7 @@ export default function LoginClient() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center gap-10 bg-[#15130f] bg-[radial-gradient(circle_at_top,rgba(180,140,92,0.16),transparent_30rem)] p-8 lg:flex-row lg:items-center lg:gap-16">
+    <div className="flex min-h-screen flex-col items-center justify-center gap-10 bg-[#09090B] p-8 lg:flex-row lg:items-center lg:gap-16">
       <div className="w-full max-w-md rounded-xl border border-[var(--gray-5)] bg-[var(--gray-2)]/85 p-8 text-center shadow-[0_24px_90px_rgba(0,0,0,0.35)]">
         <div className="mb-8">
           <p className="mb-2 text-sm font-medium tracking-wide text-[var(--gray-11)] uppercase">

diff --git a/src/styles/app-tokens.css b/src/styles/app-tokens.css
@@ -19,9 +19,9 @@
   --accent-5: #52525b;
   --accent-6: #71717a;
   --accent-7: #a1a1aa;
-  --accent-8: #d4d4d8;
+  --accent-8: #e27a5c;
   --accent-9: #fafafa;
   --accent-10: #e4e4e7;
-  --accent-11: #f4f4f5;
+  --accent-11: #f0a08a;
   --accent-12: #ffffff;
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1,11 +1,12 @@
+@import "@fontsource-variable/geist";
 @import "tailwindcss";
 @import "./app-tokens.css";
 
 body {
   margin: 0;
   background: var(--gray-1);
   color: var(--gray-12);
-  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-family: "Geist Variable", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   -webkit-font-smoothing: antialiased;
 }
 button, a, input { -webkit-tap-highlight-color: transparent; }