[#406] Warm bookshelf theme for detail pages and components

src/app/.well-known/farcaster.json/route.ts

@@ -24,7 +24,7 @@ export function GET() {
       imageUrl: `${appUrl}/og-image.png`,
       buttonTitle: "Open PlotLink",
       splashImageUrl: `${appUrl}/splash.png`,
-      splashBackgroundColor: "#0a0a0a",
+      splashBackgroundColor: "#E8DFD0",
     },
   });
 }

src/app/create/page.tsx

@@ -239,7 +239,7 @@ function CreatePage() {
 
   return (
     <div className="mx-auto max-w-2xl px-6 py-12">
-      <h1 className="text-accent text-2xl font-bold tracking-tight">Create</h1>
+      <h1 className="font-body text-2xl font-bold tracking-tight text-accent">Create</h1>
 
       {/* Tab bar */}
       <div className="mt-6 flex gap-2">

src/app/dashboard/reader/page.tsx

@@ -90,7 +90,7 @@ export default function ReaderDashboard() {
 
   return (
     <div className="mx-auto max-w-2xl px-6 py-12">
-      <h1 className="text-accent text-2xl font-bold tracking-tight">
+      <h1 className="font-body text-2xl font-bold tracking-tight text-accent">
         Reader Dashboard
       </h1>
       <p className="text-muted mt-2 text-sm">
@@ -120,7 +120,7 @@ export default function ReaderDashboard() {
         {isLoading && <p className="text-muted mt-4 text-sm">Loading...</p>}
 
         {error && (
-          <p className="mt-4 text-sm text-red-400">
+          <p className="mt-4 text-sm text-error">
             Failed to load donations. Please try again.
           </p>
         )}
@@ -235,7 +235,7 @@ function TradingHistory({ address }: { address: string }) {
             className="border-border flex items-center justify-between rounded border px-3 py-2 text-xs"
           >
             <div className="text-muted flex gap-3">
-              <span className={t.event_type === "mint" ? "text-accent font-medium" : "text-red-400 font-medium"}>
+              <span className={t.event_type === "mint" ? "text-accent font-medium" : "text-error font-medium"}>
                 {t.event_type === "mint" ? "Buy" : "Sell"}
               </span>
               <Link

src/app/dashboard/writer/page.tsx

@@ -71,7 +71,7 @@ export default function WriterDashboard() {
 
   return (
     <div className="mx-auto max-w-2xl px-6 py-12">
-      <h1 className="text-accent text-2xl font-bold tracking-tight">
+      <h1 className="font-body text-2xl font-bold tracking-tight text-accent">
         Writer Dashboard
       </h1>
       <p className="text-muted mt-2 text-sm">
@@ -84,7 +84,7 @@ export default function WriterDashboard() {
       {isLoading && <p className="text-muted mt-8 text-sm">Loading...</p>}
 
       {error && (
-        <p className="mt-8 text-sm text-red-400">
+        <p className="mt-8 text-sm text-error">
           Failed to load storylines. Please try again.
         </p>
       )}

src/app/register-agent/page.tsx

@@ -264,7 +264,7 @@ export default function RegisterAgentPage() {
 
   return (
     <div className="mx-auto max-w-2xl px-6 py-12">
-      <h1 className="text-accent text-2xl font-bold tracking-tight">
+      <h1 className="font-body text-2xl font-bold tracking-tight text-accent">
         Register Agent
       </h1>
       <p className="text-muted mt-2 text-sm">

src/app/story/[storylineId]/og/route.tsx

@@ -58,9 +58,9 @@ export async function GET(
           flexDirection: "column",
           justifyContent: "space-between",
           padding: "60px",
-          backgroundColor: "#0a0a0a",
-          color: "#e0e0e0",
-          fontFamily: "monospace",
+          backgroundColor: "#E8DFD0",
+          color: "#2C1810",
+          fontFamily: "Georgia, serif",
         }}
       >
         {/* Top: branding */}
@@ -70,7 +70,7 @@ export async function GET(
             alignItems: "center",
             gap: "12px",
             fontSize: "24px",
-            color: "#00ff88",
+            color: "#DAAA63",
           }}
         >
           PlotLink
@@ -88,7 +88,7 @@ export async function GET(
             style={{
               fontSize: "48px",
               fontWeight: 700,
-              color: "#00ff88",
+              color: "#DAAA63",
               overflow: "hidden",
             }}
           >
@@ -102,7 +102,7 @@ export async function GET(
             display: "flex",
             gap: "32px",
             fontSize: "22px",
-            color: "#737373",
+            color: "#8B7355",
           }}
         >
           <span>by {farcasterProfile ? `@${farcasterProfile.username}` : truncateAddress(sl.writer_address)}</span>

src/app/story/[storylineId]/page.tsx

@@ -70,7 +70,7 @@ export async function generateMetadata({
         type: "launch_miniapp",
         url: storyUrl,
         name: "PlotLink",
-        splashBackgroundColor: "#0a0a0a",
+        splashBackgroundColor: "#E8DFD0",
       },
     },
   });
@@ -228,7 +228,7 @@ function StoryHeader({
 
   return (
     <header className="border-border border-b pb-6">
-      <h1 className="text-accent text-2xl font-bold tracking-tight">
+      <h1 className="font-body text-2xl font-bold tracking-tight text-accent">
         {storyline.title}
       </h1>
       <div className="text-muted mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs">
@@ -262,15 +262,15 @@ function StoryHeader({
             <span className="text-muted block text-[10px] uppercase tracking-wider">
               Token Price
             </span>
-            <span className="text-foreground">
+            <span className="font-semibold text-accent">
               {formatPrice(priceInfo.pricePerToken)} {reserveLabel}
             </span>
           </div>
           <div>
             <span className="text-muted block text-[10px] uppercase tracking-wider">
               Supply Minted
             </span>
-            <span className="text-foreground">
+            <span className="font-semibold text-accent">
               {formatSupply(priceInfo.totalSupply)} tokens
             </span>
           </div>
@@ -310,7 +310,7 @@ function GenesisSection({ plot }: { plot: Plot }) {
         )}
       </div>
       {plot.content ? (
-        <div className="text-foreground whitespace-pre-wrap text-sm leading-relaxed">
+        <div className="rounded border border-border bg-surface/50 px-5 py-4 text-foreground whitespace-pre-wrap text-sm leading-relaxed">
           {plot.content}
         </div>
       ) : (

src/components/ClaimRoyalties.tsx

@@ -192,7 +192,7 @@ export function ClaimRoyalties({ tokenAddress, plotCount, beneficiary }: ClaimRo
           </a>
         </p>
       )}
-      {error && <p className="mt-1 text-[10px] text-red-400">{error}</p>}
+      {error && <p className="mt-1 text-[10px] text-error">{error}</p>}
     </div>
   );
 }

src/components/DonateWidget.tsx

@@ -158,14 +158,14 @@ export function DonateWidget({ storylineId, writerAddress }: DonateWidgetProps)
           </p>
         )}
         {insufficientBalance && (
-          <p className="mt-1 text-[10px] text-red-400">Insufficient balance</p>
+          <p className="mt-1 text-[10px] text-error">Insufficient balance</p>
         )}
       </div>
 
       {parsedAmount > BigInt(0) && (
         <p className="text-muted mt-2 text-xs">
           Donating{" "}
-          <span className="text-foreground">
+          <span className="font-semibold text-accent">
             {formatUnits(parsedAmount, 18)} {RESERVE_LABEL}
           </span>{" "}
           to {writerAddress ? <FarcasterAvatar address={writerAddress} size={12} linkProfile={false} /> : `story #${storylineId}`}
@@ -189,7 +189,7 @@ export function DonateWidget({ storylineId, writerAddress }: DonateWidgetProps)
         {txState === "error" && "Retry"}
       </button>
 
-      {error && <p className="mt-2 text-xs text-red-400">{error}</p>}
+      {error && <p className="mt-2 text-xs text-error">{error}</p>}
       {txHash && txState === "done" && (
         <p className="text-muted mt-2 text-xs">
           Tx:{" "}

src/components/PriceChart.tsx

@@ -181,6 +181,18 @@ export function PriceChart({ tokenAddress, currentPriceRaw }: PriceChartProps) {
           </text>
         ))}
 
+        {/* Area fill under price line */}
+        <defs>
+          <linearGradient id="priceGradient" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.15" />
+            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+        <polygon
+          points={`${linePoints} ${scaleX(lastIdx)},${PAD.top + PLOT_H} ${PAD.left},${PAD.top + PLOT_H}`}
+          fill="url(#priceGradient)"
+        />
+
         {/* Price line */}
         <polyline
           points={linePoints}

src/components/RatingWidget.tsx

@@ -174,7 +174,7 @@ export function RatingWidget({ storylineId, tokenAddress }: RatingWidgetProps) {
             {submitting ? "Signing..." : success ? "Updated!" : "Submit Rating"}
           </button>
 
-          {error && <p className="mt-2 text-xs text-red-400">{error}</p>}
+          {error && <p className="mt-2 text-xs text-error">{error}</p>}
         </div>
       ) : isConnected ? (
         <p className="text-muted mt-3 text-xs">

src/components/ReaderPortfolio.tsx

@@ -137,7 +137,7 @@ export function ReaderPortfolio() {
                 <span className="text-foreground">
                   {bestPick.storyline.title.slice(0, 20)}
                   {bestPick.storyline.title.length > 20 ? "..." : ""}{" "}
-                  <span className={bestPick.priceChange >= 0 ? "text-accent" : "text-red-400"}>
+                  <span className={bestPick.priceChange >= 0 ? "text-accent" : "text-error"}>
                     {bestPick.priceChange >= 0 ? "+" : ""}
                     {bestPick.priceChange.toFixed(1)}%
                   </span>
@@ -169,7 +169,7 @@ export function ReaderPortfolio() {
                   </div>
                   {h.priceChange !== null && (
                     <div
-                      className={`text-[10px] ${h.priceChange >= 0 ? "text-accent" : "text-red-400"}`}
+                      className={`text-[10px] ${h.priceChange >= 0 ? "text-accent" : "text-error"}`}
                     >
                       {h.priceChange >= 0 ? "+" : ""}
                       {h.priceChange.toFixed(1)}%

src/components/RecoveryBanner.tsx

@@ -84,7 +84,7 @@ export function RecoveryBanner({
   }
 
   return (
-    <div className="border-accent/40 bg-surface mb-6 rounded border p-4">
+    <div className="mb-6 rounded border border-[var(--accent)]/40 bg-[var(--bg-shelf)]/50 p-4">
       <p className="text-foreground text-sm font-medium">
         Your previous story was published on-chain but indexing failed.
       </p>

src/components/TradingWidget.tsx

@@ -254,15 +254,15 @@ export function TradingWidget({ tokenAddress }: { tokenAddress: Address }) {
           </p>
         )}
         {insufficientBalance && (
-          <p className="mt-1 text-[10px] text-red-400">Insufficient balance</p>
+          <p className="mt-1 text-[10px] text-error">Insufficient balance</p>
         )}
       </div>
 
       {/* Estimate */}
       {estimate != null && parsedAmount > BigInt(0) && (
         <div className="text-muted mt-2 text-xs">
           {tab === "buy" ? "Max cost" : "Min return"}:{" "}
-          <span className="text-foreground">
+          <span className="font-semibold text-accent">
             {formatUnits(applySlippage(estimate, tab === "buy"), 18)} {RESERVE_LABEL}
           </span>
           <span className="ml-2">(incl. 3% slippage)</span>
@@ -287,7 +287,7 @@ export function TradingWidget({ tokenAddress }: { tokenAddress: Address }) {
       </button>
 
       {/* Status */}
-      {error && <p className="mt-2 text-xs text-red-400">{error}</p>}
+      {error && <p className="mt-2 text-xs text-error">{error}</p>}
       {txHash && txState === "done" && (
         <p className="text-muted mt-2 text-xs">
           Tx:{" "}

src/components/WriterTradingStats.tsx

@@ -46,15 +46,15 @@ export function WriterTradingStats({ storyline }: WriterTradingStatsProps) {
         <span className="block text-[10px] uppercase tracking-wider">
           Token Price
         </span>
-        <span className="text-foreground">
+        <span className="font-semibold text-accent">
           {data ? `${formatPrice(data.price)} ${RESERVE_LABEL}` : "—"}
         </span>
       </div>
       <div>
         <span className="block text-[10px] uppercase tracking-wider">
           TVL
         </span>
-        <span className="text-foreground">
+        <span className="font-semibold text-accent">
           {data ? `${formatPrice(data.tvl)} ${RESERVE_LABEL}` : "—"}
         </span>
       </div>