realproject7 · realproject7 · Mar 21, 2026 · Mar 21, 2026
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,14 +1,16 @@
 @import "tailwindcss";
 
 :root {
-  --bg: #0a0a0a;
-  --bg-surface: #111111;
-  --text: #e0e0e0;
-  --text-muted: #737373;
-  --accent: #00ff88;
-  --accent-dim: #00cc6a;
-  --border: #2a2a2a;
-  --error: #ff4444;
+  --bg: #E8DFD0;
+  --bg-surface: #FFFFFF;
+  --bg-shelf: #DDD3C2;
+  --shelf-shadow: rgba(44, 24, 16, 0.08);
+  --text: #2C1810;
+  --text-muted: #8B7355;
+  --accent: #DAAA63;
+  --accent-dim: #C4944F;
+  --border: #D4C5B0;
+  --error: #CC3333;
 }
 
 @theme inline {
@@ -20,29 +22,33 @@
   --color-accent-dim: var(--accent-dim);
   --color-border: var(--border);
   --color-error: var(--error);
-  --font-mono: var(--font-geist-mono);
+  --font-heading: var(--font-montserrat);
+  --font-body: var(--font-libre-caslon);
 }
 
 body {
   background: var(--bg);
   color: var(--text);
-  font-family: var(--font-geist-mono), ui-monospace, SFMono-Regular, "SF Mono",
-    Menlo, Consolas, "Liberation Mono", monospace;
+  font-family: var(--font-libre-caslon), "Libre Caslon Text", Georgia,
+    "Times New Roman", serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-montserrat), Montserrat, system-ui, sans-serif;
 }
 
 /* Selection */
 ::selection {
   background: var(--accent);
-  color: var(--bg);
+  color: var(--bg-surface);
 }
 
 /* Custom select dropdown styling */
 select {
   appearance: none;
   -webkit-appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B7355' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
   padding-right: 2.5rem;
 }
-
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,14 +1,21 @@
 import type { Metadata } from "next";
-import { Geist_Mono } from "next/font/google";
+import { Montserrat, Libre_Caslon_Text } from "next/font/google";
 import { Providers } from "./providers";
 import { NavBar } from "../components/NavBar";
 import { Footer } from "../components/Footer";
 import { FarcasterMiniApp } from "../components/FarcasterMiniApp";
 import "./globals.css";
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const montserrat = Montserrat({
+  variable: "--font-montserrat",
   subsets: ["latin"],
+  weight: ["500", "600"],
+});
+
+const libreCaslon = Libre_Caslon_Text({
+  variable: "--font-libre-caslon",
+  subsets: ["latin"],
+  weight: "400",
 });
 
 const appUrl = process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:3000";
@@ -34,7 +41,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${geistMono.variable} antialiased`}>
+      <body className={`${montserrat.variable} ${libreCaslon.variable} antialiased`}>
         <Providers>
           <FarcasterMiniApp />
           <NavBar />

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -25,8 +25,8 @@ export function Footer() {
             built on <span className="text-accent-dim">Base</span>
           </span>
         </div>
-        <div className="text-neutral-400 text-xs">
-          <span className="text-accent-dim">$</span> PlotLink &copy; {new Date().getFullYear()}
+        <div className="text-muted text-xs">
+          PlotLink &copy; {new Date().getFullYear()}
         </div>
       </div>
     </footer>

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -1,15 +1,14 @@
 "use client";
 
 import { useState } from "react";
-import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { ConnectWallet } from "./ConnectWallet";
 
 const NAV_LINKS = [
-  { href: "/create", label: "create" },
-  { href: "/dashboard/writer", label: "writer" },
-  { href: "/dashboard/reader", label: "reader" },
+  { href: "/create", label: "Create" },
+  { href: "/dashboard/writer", label: "Writer" },
+  { href: "/dashboard/reader", label: "Reader" },
 ] as const;
 
 export function NavBar() {
@@ -22,10 +21,10 @@ export function NavBar() {
         {/* Logo */}
         <Link
           href="/"
-          className="text-accent text-sm font-bold tracking-tight transition-opacity hover:opacity-80"
+          className="font-[var(--font-heading)] text-sm font-semibold tracking-tight text-[var(--text)] transition-opacity hover:opacity-80"
+          style={{ fontFamily: "var(--font-montserrat), Montserrat, sans-serif" }}
         >
-          <Image src="/plotlink-logo-symbol.svg" alt="" width={18} height={18} className="mr-1.5 inline-block align-middle" />
-          <span className="align-middle">PlotLink</span>
+          PlotLink
         </Link>
 
         {/* Desktop nav links */}
@@ -36,13 +35,12 @@ export function NavBar() {
               <Link
                 key={href}
                 href={href}
-                className={`rounded px-2.5 py-1 text-xs transition-colors ${
+                className={`rounded px-2.5 py-1 text-xs font-medium transition-colors ${
                   active
-                    ? "bg-[var(--accent)]/10 text-accent"
+                    ? "bg-[var(--accent)]/15 text-accent"
                     : "text-muted hover:text-foreground"
                 }`}
               >
-                {active && <span className="text-accent-dim mr-0.5">&gt;</span>}
                 {label}
               </Link>
             );
@@ -56,11 +54,24 @@ export function NavBar() {
           </div>
           <button
             onClick={() => setMobileOpen(!mobileOpen)}
-            className="text-muted hover:text-foreground p-1 text-sm transition-colors md:hidden"
+            className="text-muted hover:text-foreground p-1 transition-colors md:hidden"
             aria-label="Toggle menu"
             aria-expanded={mobileOpen}
           >
-            <span aria-hidden="true">{mobileOpen ? "[x]" : "[=]"}</span>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              {mobileOpen ? (
+                <>
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </>
+              ) : (
+                <>
+                  <line x1="3" y1="6" x2="21" y2="6" />
+                  <line x1="3" y1="12" x2="21" y2="12" />
+                  <line x1="3" y1="18" x2="21" y2="18" />
+                </>
+              )}
+            </svg>
           </button>
         </div>
       </div>
@@ -76,13 +87,12 @@ export function NavBar() {
                   key={href}
                   href={href}
                   onClick={() => setMobileOpen(false)}
-                  className={`rounded px-2.5 py-1.5 text-xs transition-colors ${
+                  className={`rounded px-2.5 py-1.5 text-xs font-medium transition-colors ${
                     active
-                      ? "bg-[var(--accent)]/10 text-accent"
+                      ? "bg-[var(--accent)]/15 text-accent"
                       : "text-muted hover:text-foreground"
                   }`}
                 >
-                  {active && <span className="text-accent-dim mr-0.5">&gt;</span>}
                   {label}
                 </Link>
               );