replace parchment background with clean neutral and add four-pointed star logo

- Swap warm yellow #f9f7f3 background for neutral slate #f7f8fb
- Update muted/border palette to match (no yellow undertones)
- Reduce ambient gradient opacities to prevent yellow cast
- Replace E letter logo with inline four-pointed star SVG in header/footer

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: CharlieGreenman

web/app/app.css

@@ -18,15 +18,15 @@
 
 :root {
   --radius: 0.625rem;
-  --background: #f9f7f3;
-  --foreground: #1c1a17;
+  --background: #f7f8fb;
+  --foreground: #111827;
   --card: #ffffff;
-  --card-foreground: #1c1a17;
+  --card-foreground: #111827;
   --primary: #b07d12;
   --primary-foreground: #ffffff;
-  --muted: #f0ebe1;
-  --muted-foreground: #6b6050;
-  --border: #e4ddd2;
+  --muted: #edf0f7;
+  --muted-foreground: #64748b;
+  --border: #e1e6f0;
   font-family: ui-sans-serif, system-ui, sans-serif;
   line-height: 1.5;
 }
@@ -40,8 +40,8 @@ body {
   background: var(--background);
   color: var(--foreground);
   background-image:
-    radial-gradient(ellipse 65% 42% at 12% 0%, rgba(201, 168, 76, 0.09) 0%, transparent 65%),
-    radial-gradient(ellipse 50% 38% at 88% 100%, rgba(79, 70, 229, 0.05) 0%, transparent 60%);
+    radial-gradient(ellipse 65% 42% at 12% 0%, rgba(201, 168, 76, 0.03) 0%, transparent 65%),
+    radial-gradient(ellipse 50% 38% at 88% 100%, rgba(99, 102, 241, 0.04) 0%, transparent 60%);
   min-height: 100vh;
 }
 
@@ -103,7 +103,7 @@ a {
 }
 
 code {
-  background: #f0ebe1;
+  background: #edf0f7;
   padding: 0.1rem 0.3rem;
   border-radius: 4px;
   color: #92640a;
@@ -197,12 +197,12 @@ code {
 
 .prose hr {
   border: none;
-  border-top: 1px solid #e4ddd2;
+  border-top: 1px solid #e1e6f0;
   margin: 2.25rem 0;
 }
 
 .prose code {
-  background: #f0ebe1;
+  background: #edf0f7;
   padding: 0.1rem 0.3rem;
   border-radius: 4px;
   color: #92640a;

web/app/root.tsx

@@ -30,14 +30,16 @@ export default function App() {
     <div className="app-shell">
       {/* Ambient background orbs */}
       <div className="pointer-events-none fixed inset-0 overflow-hidden" aria-hidden="true">
-        <div className="absolute -left-48 -top-48 h-[700px] w-[700px] rounded-full bg-amber-400/10 blur-[140px]" />
-        <div className="absolute -bottom-48 -right-48 h-[600px] w-[600px] rounded-full bg-indigo-400/6 blur-[120px]" />
+        <div className="absolute -left-48 -top-48 h-[700px] w-[700px] rounded-full bg-amber-400/5 blur-[140px]" />
+        <div className="absolute -bottom-48 -right-48 h-[600px] w-[600px] rounded-full bg-indigo-400/5 blur-[120px]" />
       </div>
 
       <header className="top-bar relative z-10">
         <a href="/" className="flex items-center gap-3">
           <div className="flex h-9 w-9 items-center justify-center rounded-xl border border-amber-400/40 bg-amber-50">
-            <span className="text-base font-bold text-amber-600">E</span>
+            <svg viewBox="0 0 16 16" className="h-5 w-5 fill-amber-600" aria-hidden="true">
+              <path d="M8 1.5L9.56 6.44L14.5 8L9.56 9.56L8 14.5L6.44 9.56L1.5 8L6.44 6.44Z" />
+            </svg>
           </div>
           <div>
             <p className="m-0 text-[10px] font-bold uppercase tracking-[0.24em] text-slate-500">
@@ -60,11 +62,13 @@ export default function App() {
         <Outlet />
       </main>
 
-      <footer className="relative z-10 mt-16 border-t border-[#e4ddd2] pb-8 pt-8">
+      <footer className="relative z-10 mt-16 border-t border-[#e1e6f0] pb-8 pt-8">
         <div className="flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between">
           <div className="flex items-center gap-2.5">
             <div className="flex h-8 w-8 items-center justify-center rounded-lg border border-amber-400/30 bg-amber-50">
-              <span className="text-sm font-bold text-amber-600">E</span>
+              <svg viewBox="0 0 16 16" className="h-4 w-4 fill-amber-600" aria-hidden="true">
+                <path d="M8 1.5L9.56 6.44L14.5 8L9.56 9.56L8 14.5L6.44 9.56L1.5 8L6.44 6.44Z" />
+              </svg>
             </div>
             <div>
               <p className="text-base font-bold text-slate-900">Ethos</p>
@@ -80,7 +84,7 @@ export default function App() {
           </div>
         </div>
 
-        <div className="mt-6 flex flex-col gap-2 border-t border-[#e4ddd2] pt-6 sm:flex-row sm:items-center sm:justify-between">
+        <div className="mt-6 flex flex-col gap-2 border-t border-[#e1e6f0] pt-6 sm:flex-row sm:items-center sm:justify-between">
           <p className="text-xs text-slate-500">
             &copy; {new Date().getFullYear()} Ethos. Licensed under{" "}
             <span className="text-slate-500">CC BY-NC-ND 4.0</span>.

web/app/routes/chapters.$slug.tsx

@@ -61,8 +61,8 @@ export default function ChapterPost() {
       </nav>
 
       {/* Article */}
-      <article className="rounded-2xl border border-[#e4ddd2] bg-white p-7 sm:p-10">
-        <header className="mb-8 border-b border-[#e4ddd2] pb-8">
+      <article className="rounded-2xl border border-[#e1e6f0] bg-white p-7 sm:p-10">
+        <header className="mb-8 border-b border-[#e1e6f0] pb-8">
           <p className="text-[11px] font-medium text-amber-700/70">
             Chapter {String(chapter.order).padStart(2, "0")}
           </p>
@@ -83,7 +83,7 @@ export default function ChapterPost() {
         {prev ? (
           <Link
             to={`/chapters/${prev.slug}`}
-            className="group flex items-center gap-3 rounded-xl border border-[#e4ddd2] bg-white p-4 transition-colors hover:border-amber-400/40"
+            className="group flex items-center gap-3 rounded-xl border border-[#e1e6f0] bg-white p-4 transition-colors hover:border-amber-400/40"
           >
             <span className="text-lg text-slate-500 group-hover:text-amber-700 transition-colors">←</span>
             <div>
@@ -99,7 +99,7 @@ export default function ChapterPost() {
         {next ? (
           <Link
             to={`/chapters/${next.slug}`}
-            className="group flex items-center justify-end gap-3 rounded-xl border border-[#e4ddd2] bg-white p-4 text-right transition-colors hover:border-amber-400/40 sm:col-start-2"
+            className="group flex items-center justify-end gap-3 rounded-xl border border-[#e1e6f0] bg-white p-4 text-right transition-colors hover:border-amber-400/40 sm:col-start-2"
           >
             <div>
               <p className="text-[10px] text-slate-500">Next chapter</p>
@@ -123,7 +123,7 @@ export default function ChapterPost() {
               <Link
                 key={c.slug}
                 to={`/chapters/${c.slug}`}
-                className="group rounded-xl border border-[#e4ddd2] bg-white p-4 transition-colors hover:border-amber-400/40"
+                className="group rounded-xl border border-[#e1e6f0] bg-white p-4 transition-colors hover:border-amber-400/40"
               >
                 <p className="text-[11px] text-slate-500">Chapter {String(c.order).padStart(2, "0")}</p>
                 <p className="mt-1.5 text-sm font-semibold text-slate-700 leading-snug group-hover:text-slate-900 transition-colors">

web/app/routes/chapters._index.tsx

@@ -24,7 +24,7 @@ export default function ChaptersIndex() {
   return (
     <div className="space-y-8">
       {/* Header */}
-      <div className="rounded-2xl border border-[#e4ddd2] bg-white p-7">
+      <div className="rounded-2xl border border-[#e1e6f0] bg-white p-7">
         <p className="text-[10px] font-bold uppercase tracking-[0.22em] text-slate-500">
           Ethos
         </p>
@@ -44,9 +44,9 @@ export default function ChaptersIndex() {
             <Link
               key={chapter.slug}
               to={`/chapters/${chapter.slug}`}
-              className="group flex items-start gap-4 rounded-2xl border border-[#e4ddd2] bg-white p-5 transition-colors hover:border-amber-400/40"
+              className="group flex items-start gap-4 rounded-2xl border border-[#e1e6f0] bg-white p-5 transition-colors hover:border-amber-400/40"
             >
-              <span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg border border-[#e4ddd2] bg-[#f0ebe1] text-[11px] font-bold text-slate-500 group-hover:border-amber-400/30 group-hover:text-amber-700 transition-colors">
+              <span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg border border-[#e1e6f0] bg-[#edf0f7] text-[11px] font-bold text-slate-500 group-hover:border-amber-400/30 group-hover:text-amber-700 transition-colors">
                 {String(chapter.order).padStart(2, "0")}
               </span>
               <div className="min-w-0">

web/app/routes/home.tsx

@@ -69,7 +69,7 @@ export default function HomePage() {
         {STATS.map(({ value, label }) => (
           <div
             key={label}
-            className="rounded-xl border border-[#e4ddd2] bg-white px-4 py-3 text-center"
+            className="rounded-xl border border-[#e1e6f0] bg-white px-4 py-3 text-center"
           >
             <p className="text-2xl font-bold text-amber-700">{value}</p>
             <p className="mt-0.5 text-[11px] text-slate-500">{label}</p>
@@ -78,9 +78,9 @@ export default function HomePage() {
       </div>
 
       {/* Hero */}
-      <section className="relative overflow-hidden rounded-2xl border border-[#e4ddd2] bg-white p-8 shadow-sm sm:p-12">
-        <div className="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full bg-amber-400/10 blur-3xl" />
-        <div className="pointer-events-none absolute -bottom-16 -left-16 h-56 w-56 rounded-full bg-indigo-400/6 blur-3xl" />
+      <section className="relative overflow-hidden rounded-2xl border border-[#e1e6f0] bg-white p-8 shadow-sm sm:p-12">
+        <div className="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full bg-amber-400/5 blur-3xl" />
+        <div className="pointer-events-none absolute -bottom-16 -left-16 h-56 w-56 rounded-full bg-indigo-400/5 blur-3xl" />
 
         <div className="relative max-w-2xl">
           <span className="inline-flex items-center gap-2 rounded-full border border-amber-400/30 bg-amber-50 px-3.5 py-1.5 text-xs font-semibold tracking-wide text-amber-700">
@@ -114,7 +114,7 @@ export default function HomePage() {
             </Link>
             <Link
               to="/chapters/introduction"
-              className="rounded-xl border border-[#e4ddd2] px-6 py-3 text-sm font-medium text-slate-700 hover:border-amber-400/40 hover:text-slate-900 transition-colors"
+              className="rounded-xl border border-[#e1e6f0] px-6 py-3 text-sm font-medium text-slate-700 hover:border-amber-400/40 hover:text-slate-900 transition-colors"
             >
               Start with the Introduction
             </Link>
@@ -131,7 +131,7 @@ export default function HomePage() {
           {PILLARS.map(({ label, chapters, description }) => (
             <div
               key={label}
-              className="rounded-2xl border border-[#e4ddd2] bg-white p-5"
+              className="rounded-2xl border border-[#e1e6f0] bg-white p-5"
             >
               <p className="text-xs font-bold uppercase tracking-wider text-amber-700">{label}</p>
               <p className="mt-2 text-sm font-semibold leading-snug text-slate-800">{description}</p>
@@ -151,7 +151,7 @@ export default function HomePage() {
             <Link
               key={slug}
               to={`/chapters/${slug}`}
-              className="group block rounded-2xl border border-[#e4ddd2] bg-white p-5 transition-colors hover:border-amber-400/40"
+              className="group block rounded-2xl border border-[#e1e6f0] bg-white p-5 transition-colors hover:border-amber-400/40"
             >
               <h3 className="text-base font-bold text-slate-900 group-hover:text-amber-700 transition-colors">
                 {title}
@@ -167,7 +167,7 @@ export default function HomePage() {
 
       {/* What this is / is not */}
       <section className="grid gap-4 sm:grid-cols-2">
-        <div className="rounded-2xl border border-[#e4ddd2] bg-white p-6">
+        <div className="rounded-2xl border border-[#e1e6f0] bg-white p-6">
           <p className="text-[10px] font-bold uppercase tracking-[0.22em] text-emerald-700">
             What Ethos Is
           </p>
@@ -186,7 +186,7 @@ export default function HomePage() {
             ))}
           </ul>
         </div>
-        <div className="rounded-2xl border border-[#e4ddd2] bg-white p-6">
+        <div className="rounded-2xl border border-[#e1e6f0] bg-white p-6">
           <p className="text-[10px] font-bold uppercase tracking-[0.22em] text-slate-500">
             What Ethos Is Not
           </p>