Visual identity: Field Almanac — Fraunces+DM Sans, OKLCH cream/leaf/clay palette, paper texture, hand-drawn stage icons, draft auto-save, stage progress dots

app/page.tsx

@@ -12,24 +12,16 @@ export default async function Page({ searchParams }: PageProps) {
 
   return (
     <>
+      <a
+        href="#main"
+        className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded focus:bg-paper focus:px-3 focus:py-2 focus:text-ink focus:shadow"
+      >
+        Skip to content
+      </a>
       <SiteHeader />
-      <main id="main" className="flex-1 bg-stone-50">
-        <a
-          href="#main"
-          className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:rounded focus:bg-white focus:px-3 focus:py-2 focus:shadow"
-        >
-          Skip to content
-        </a>
-        <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 sm:py-12">
-          <header className="mb-8">
-            <h1 className="text-2xl font-semibold text-stone-900 sm:text-3xl">
-              {formConfig.title}
-            </h1>
-            {formConfig.subtitle && (
-              <p className="mt-2 text-stone-700 leading-relaxed">{formConfig.subtitle}</p>
-            )}
-          </header>
-
+      <main id="main" className="flex-1">
+        <div className="mx-auto max-w-3xl px-4 py-10 sm:px-6 sm:py-14">
+          <PageIntro />
           {!cid || !cs ? (
             <MissingLinkParams />
           ) : (
@@ -44,14 +36,30 @@ export default async function Page({ searchParams }: PageProps) {
   );
 }
 
+function PageIntro() {
+  return (
+    <header className="mb-10 max-w-2xl">
+      <p className="text-[11px] uppercase tracking-[0.18em] text-leaf-700">
+        Monthly check-in · Co-op organizing
+      </p>
+      <h1 className="mt-2 font-display text-[40px] font-normal leading-[1.05] tracking-tight text-ink sm:text-[52px]">
+        {formConfig.title}
+      </h1>
+      <p className="mt-4 max-w-prose text-[17px] leading-relaxed text-ink-soft">
+        {formConfig.subtitle}
+      </p>
+      <div className="mt-6 h-px bg-rule" />
+    </header>
+  );
+}
+
 function MissingLinkParams() {
   return (
-    <div
-      role="alert"
-      className="rounded-xl border border-amber-200 bg-amber-50 px-6 py-6 text-amber-900"
-    >
-      <h2 className="text-lg font-semibold">This link is missing required information.</h2>
-      <p className="mt-2 leading-relaxed">
+    <div role="alert" className="rounded-lg border-2 border-clay-200 bg-clay-100/30 px-6 py-7">
+      <h2 className="font-display text-xl font-medium text-clay-700">
+        This link is missing required information.
+      </h2>
+      <p className="mt-3 leading-relaxed text-ink-soft">
         Open the form using the personalized link from your email. If you no longer have it,
         please contact your engagement coordinator and ask for a fresh link.
       </p>