@pylonsync/create-pylon 0.11.1 → 0.11.4

package/templates/waitlist/app/(marketing)/layout.tsx

@@ -1,15 +1,15 @@
 import React from "react";
 import { Link, type PageAuth } from "@pylonsync/react";
 import { siteConfig } from "@/lib/site.config";
+import { WRAP } from "@/components/marketing";
 
 // `(marketing)` is a ROUTE GROUP: the parens segment is stripped from every
 // URL (so `(marketing)/page.tsx` still serves `/`), and this layout wraps only
-// the pages inside the group — a slim nav up top and a footer below, both
-// driven by lib/site.config.ts. /login and /dashboard sit outside the group
-// and render bare in the root shell. `auth.user_id` is resolved server-side
-// from the session cookie before any HTML is sent, so the nav shows
-// "Dashboard" once the owner is signed in and "Sign in" otherwise — no flash,
-// no client fetch.
+// the pages inside the group. A one-line nav up top and a one-line footer
+// below, both driven by lib/site.config.ts. /login and /dashboard sit outside
+// the group and render bare in the root shell. `auth.user_id` is resolved
+// server-side from the session cookie before any HTML is sent, so the nav
+// shows "Dashboard" once the owner is signed in and "Sign in" otherwise.
 interface LayoutProps {
   children: React.ReactNode;
   auth: PageAuth;
@@ -17,39 +17,25 @@ interface LayoutProps {
 
 export default function MarketingLayout({ children, auth }: LayoutProps) {
   // A guest session (minted by <EnsureGuest> for the live counter) has a
-  // `guest_…` user id — that's an anonymous visitor, NOT the signed-in owner,
-  // so it shouldn't flip the nav to "Dashboard".
+  // `guest_…` user id. That is an anonymous visitor, not the signed-in owner,
+  // so it must not flip the nav to "Dashboard".
   const signedIn = Boolean(auth?.user_id && !auth.user_id.startsWith("guest_"));
   const { brand } = siteConfig;
 
   return (
-    <>
-      <header className="sticky top-0 z-30 bg-white/80 backdrop-blur">
-        <div className="mx-auto flex h-14 max-w-3xl items-center justify-between px-6">
-          <Link href="/" className="flex items-center gap-2">
-            <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
-              {brand.letter}
-            </span>
-            <span className="text-[15px] font-semibold tracking-tight text-zinc-900">
-              {brand.name}
-            </span>
+    <div className="flex min-h-screen flex-col bg-ink text-chalk">
+      <header>
+        <div className={`${WRAP} flex h-16 items-center justify-between`}>
+          <Link href="/" className="font-display text-[17px] font-bold tracking-tight text-chalk">
+            {brand.name}
           </Link>
-          <nav className="flex items-center gap-2">
-            {signedIn ? (
-              <Link
-                href="/dashboard"
-                className="inline-flex items-center rounded-full bg-zinc-900 px-3.5 py-1.5 text-[13px] font-medium text-white transition-colors hover:bg-zinc-700"
-              >
-                Dashboard
-              </Link>
-            ) : (
-              <Link
-                href="/login"
-                className="rounded-full px-3 py-1.5 text-[13px] font-medium text-zinc-600 transition-colors hover:text-zinc-900"
-              >
-                Sign in
-              </Link>
-            )}
+          <nav>
+            <Link
+              href={signedIn ? "/dashboard" : "/login"}
+              className="text-[14px] text-chalk-2 transition-colors hover:text-chalk"
+            >
+              {signedIn ? "Dashboard" : "Sign in"}
+            </Link>
           </nav>
         </div>
       </header>
@@ -57,64 +43,32 @@ export default function MarketingLayout({ children, auth }: LayoutProps) {
       <main className="flex-1">{children}</main>
 
       <SiteFooter />
-    </>
+    </div>
   );
 }
 
 function SiteFooter() {
   const { brand } = siteConfig;
   return (
-    <footer className="border-t border-zinc-200/70 bg-white">
-      <div className="mx-auto max-w-3xl px-6 py-12">
-        <div className="flex flex-col items-start justify-between gap-6 sm:flex-row">
-          <div className="max-w-sm">
-            <Link href="/" className="inline-flex items-center gap-2">
-              <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
-                {brand.letter}
-              </span>
-              <span className="text-[15px] font-semibold tracking-tight text-zinc-900">
-                {brand.name}
-              </span>
-            </Link>
-            <p className="mt-3 text-[13px] leading-relaxed text-zinc-500">
-              {brand.footerBlurb}
-            </p>
-          </div>
-          <div className="flex items-center gap-4">
-            {brand.socials.map((s) => (
-              <a
-                key={s.label}
-                href={s.href}
-                aria-label={s.label}
-                className="text-zinc-400 transition-colors hover:text-zinc-900"
-              >
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                  <path d={s.path} />
-                </svg>
-              </a>
-            ))}
-            <a
-              href={`mailto:${brand.email}`}
-              aria-label="Email"
-              className="text-zinc-400 transition-colors hover:text-zinc-900"
-            >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <rect x="3" y="5" width="18" height="14" rx="2" />
-                <path d="m3 7 9 6 9-6" />
-              </svg>
-            </a>
-          </div>
-        </div>
-        <div className="mt-10 flex flex-col items-start justify-between gap-3 border-t border-zinc-200/70 pt-6 text-[12px] text-zinc-400 sm:flex-row sm:items-center">
-          <span>
-            © {new Date().getFullYear()} {brand.copyrightName}
-          </span>
-          <span>
-            Built with{" "}
-            <a href="https://pylonsync.com" className="font-medium text-zinc-600 hover:text-zinc-900">
-              Pylon
+    <footer className="border-t border-line">
+      <div
+        className={`${WRAP} flex flex-col gap-3 py-6 font-mono-ui text-[12px] text-chalk-2 sm:flex-row sm:items-center sm:justify-between`}
+      >
+        <span>
+          {brand.copyrightName} {new Date().getFullYear()}
+        </span>
+        <div className="flex items-center gap-5">
+          {brand.socials.map((s) => (
+            <a key={s.label} href={s.href} className="transition-colors hover:text-chalk">
+              {s.label}
             </a>
-          </span>
+          ))}
+          <a href={`mailto:${brand.email}`} className="transition-colors hover:text-chalk">
+            {brand.email}
+          </a>
+          <a href="https://pylonsync.com" className="transition-colors hover:text-chalk">
+            Built with Pylon
+          </a>
         </div>
       </div>
     </footer>

package/templates/waitlist/app/(marketing)/not-found.tsx

@@ -4,19 +4,18 @@ import { Link, type NotFoundProps } from "@pylonsync/react";
 // `(marketing)/not-found.tsx` → rendered at HTTP 404 for any unmatched URL
 // (and when a page calls `response.notFound()`). It lives inside the
 // `(marketing)` group on purpose: a group segment adds no URL prefix, so this
-// is still the root 404 boundary, but it wraps in the marketing layout — a
+// is still the root 404 boundary, but it wraps in the marketing layout, so a
 // missing URL gets the site nav + footer instead of a bare page. Hydrated, so
 // the link is a client nav.
 export default function NotFound(_props: NotFoundProps) {
   return (
-    <div className="mx-auto flex min-h-[60vh] max-w-3xl flex-col items-center justify-center px-6 text-center">
-      <h1 className="text-3xl font-semibold tracking-tight">404</h1>
-      <p className="mt-2 text-zinc-500">We couldn&apos;t find that page.</p>
-      <Link
-        href="/"
-        className="mt-6 inline-flex h-10 items-center rounded-full bg-zinc-900 px-5 text-sm font-medium text-white transition-colors hover:bg-zinc-700"
-      >
-        Back home
+    <div className="mx-auto flex min-h-[60vh] w-full max-w-6xl flex-col justify-center px-6">
+      <p className="font-mono-ui text-[13px] text-brand">404</p>
+      <h1 className="font-display mt-4 text-3xl font-bold tracking-tight text-chalk">
+        That page does not exist.
+      </h1>
+      <Link href="/" className="mt-6 text-[15px] text-chalk-2 underline underline-offset-4 hover:text-chalk">
+        Back to the home page
       </Link>
     </div>
   );

package/templates/waitlist/app/(marketing)/page.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 import { type Metadata } from "@pylonsync/react";
-import { WRAP, Eyebrow, Badge, Divider, SectionHead, FeatureGrid, initials } from "@/components/marketing";
-import { WaitlistHero } from "./waitlist-hero";
+import { WRAP, FactList, ProductMock } from "@/components/marketing";
+import { SignupForm, LiveCount } from "./waitlist-hero";
 import { siteConfig } from "@/lib/site.config";
 
-// SEO metadata — server-rendered into <head>, so the page is fully indexable
-// (view source and the copy is in the HTML). All copy lives in
-// lib/site.config.ts; edit it there to rebrand.
+// SEO metadata: server-rendered into <head>, so the page is fully indexable.
+// All copy lives in lib/site.config.ts; edit it there to rebrand.
 export const metadata: Metadata = {
   title: siteConfig.seo.title,
   description: siteConfig.seo.description,
@@ -17,102 +16,68 @@ export const metadata: Metadata = {
   },
 };
 
-// `app/(marketing)/page.tsx` → `/` (the group segment adds no URL prefix). A server-rendered, single-page coming-soon landing.
-// The headline, value props, proof, and FAQ are static server HTML (great for
-// SEO + first paint); the email form and live counter are a client island
-// (<WaitlistHero>) that hydrates in the browser. Every string is sourced from
-// `siteConfig`, so the whole page rebrands from one file.
+// `app/(marketing)/page.tsx` → `/`. A server-rendered, single-page launch
+// page. The headline, product mock, facts, and FAQ are static server HTML; the
+// email form and the live count are client islands (<SignupForm>, <LiveCount>)
+// that hydrate in the browser. Every string comes from `siteConfig`.
 //
-// Note: this page intentionally does NOT read `auth`, so it stays a public,
-// cacheable render. Signed-in state (the nav's "Dashboard" link) is resolved in
-// the layout.
+// This page does not read `auth`, so it stays a public, cacheable render.
+// Signed-in state (the nav's "Dashboard" link) is resolved in the layout.
 export default function LandingPage() {
-  const { hero, counter, valueProps, socialProof, faq } = siteConfig;
+  const { hero, counter, mock, facts, faq } = siteConfig;
 
   return (
-    <div className="bg-white text-zinc-900">
+    <div>
       {/* ============================= HERO ============================= */}
-      <section className={`${WRAP} pt-20 pb-16 sm:pt-28`}>
-        <div className="flex flex-col items-center text-center">
-          <Badge>{hero.badge}</Badge>
-          <h1 className="mt-6 max-w-2xl text-balance text-[2.5rem] font-semibold leading-[1.05] tracking-[-0.02em] sm:text-[3.25rem]">
+      <section className={`${WRAP} grid items-center gap-12 pt-16 pb-20 lg:grid-cols-[minmax(0,5fr)_minmax(0,6fr)] lg:gap-16 lg:pt-24 lg:pb-28`}>
+        <div>
+          <h1 className="font-display text-balance text-[2.5rem] font-bold leading-[1.02] tracking-[-0.02em] text-chalk sm:text-[3.5rem]">
             {hero.headline}
           </h1>
-          <p className="mt-5 max-w-xl text-balance text-[17px] leading-relaxed text-zinc-500">
-            {hero.subcopy}
-          </p>
-        </div>
-        <div className="mt-10">
-          <WaitlistHero hero={hero} counter={counter} />
+          <p className="mt-6 max-w-md text-[17px] leading-relaxed text-chalk-2">{hero.subcopy}</p>
+          <div className="mt-8 max-w-md">
+            <SignupForm hero={hero} />
+          </div>
+          <p className="font-mono-ui mt-6 text-[13px] text-brand">{hero.launchNote}</p>
         </div>
+        <ProductMock
+          windowTitle={mock.windowTitle}
+          sidebar={mock.sidebar}
+          activeSidebarIndex={mock.activeSidebarIndex}
+          rows={mock.rows}
+        />
       </section>
 
-      {/* ========================== VALUE PROPS ========================= */}
-      <Divider />
-      <section className={`${WRAP} py-16`}>
-        <SectionHead eyebrow={valueProps.eyebrow} title={valueProps.headline} />
-        <div className="mt-10">
-          <FeatureGrid items={valueProps.items} />
+      {/* ============================= FACTS ============================= */}
+      <section className={`${WRAP} pb-20`}>
+        <h2 className="font-display text-[1.5rem] font-medium tracking-[-0.01em] text-chalk">
+          {facts.headline}
+        </h2>
+        <div className="mt-8">
+          <FactList items={facts.items} />
         </div>
+        {counter.enabled ? (
+          <div className="mt-12 border-t border-line pt-5">
+            <LiveCount seed={counter.seedCount ?? 0} label={counter.label} />
+          </div>
+        ) : null}
       </section>
 
-      {/* ========================= SOCIAL PROOF ========================= */}
-      {socialProof && socialProof.quotes && socialProof.quotes.length > 0 ? (
-        <>
-          <Divider />
-          <section className={`${WRAP} py-16`}>
-            <p className="font-mono text-[11px] uppercase tracking-[0.14em] text-zinc-400">
-              {socialProof.label}
-            </p>
-            <div className="mt-8 grid gap-5 sm:grid-cols-3">
-              {socialProof.quotes.map((q) => (
-                <figure
-                  key={q.name + q.role}
-                  className="flex flex-col rounded-2xl border border-zinc-200 bg-paper p-6"
-                >
-                  <blockquote className="text-[14px] leading-relaxed text-zinc-600">
-                    &ldquo;{q.quote}&rdquo;
-                  </blockquote>
-                  <figcaption className="mt-6 flex items-center gap-3">
-                    <span className="flex size-8 items-center justify-center rounded-full bg-zinc-200 text-[11px] font-semibold text-zinc-500">
-                      {initials(q.name)}
-                    </span>
-                    <div className="leading-tight">
-                      <div className="text-[13px] font-semibold">{q.name}</div>
-                      <div className="text-[12px] text-zinc-500">{q.role}</div>
-                    </div>
-                  </figcaption>
-                </figure>
-              ))}
-            </div>
-          </section>
-        </>
-      ) : null}
-
       {/* ============================== FAQ ============================= */}
       {faq && faq.items.length > 0 ? (
-        <>
-          <Divider />
-          <section className={`${WRAP} py-16`}>
-            <Eyebrow>{faq.eyebrow}</Eyebrow>
-            <h2 className="mt-4 text-balance text-2xl font-semibold leading-[1.15] tracking-[-0.02em] sm:text-3xl">
-              {faq.headline}
-            </h2>
-            <div className="mt-8 divide-y divide-zinc-200/70 border-y border-zinc-200/70">
-              {faq.items.map((f) => (
-                <details key={f.q} className="group py-5">
-                  <summary className="flex cursor-pointer items-center justify-between text-[15px] font-medium text-zinc-900 marker:hidden [&::-webkit-details-marker]:hidden">
-                    {f.q}
-                    <span className="text-brand transition-transform group-open:rotate-45">+</span>
-                  </summary>
-                  <p className="mt-3 max-w-2xl text-[14px] leading-relaxed text-zinc-500">
-                    {f.a}
-                  </p>
-                </details>
-              ))}
-            </div>
-          </section>
-        </>
+        <section className={`${WRAP} pb-24`}>
+          <h2 className="font-display text-[1.5rem] font-medium tracking-[-0.01em] text-chalk">
+            {faq.headline}
+          </h2>
+          <dl className="mt-8 grid gap-x-8 gap-y-8 sm:grid-cols-2">
+            {faq.items.map((f) => (
+              <div key={f.q} className="border-t border-line pt-5">
+                <dt className="text-[15px] font-medium text-chalk">{f.q}</dt>
+                <dd className="mt-2 text-[14px] leading-relaxed text-chalk-2">{f.a}</dd>
+              </div>
+            ))}
+          </dl>
+        </section>
       ) : null}
     </div>
   );

package/templates/waitlist/app/(marketing)/waitlist-hero.tsx

@@ -5,40 +5,22 @@ import { db, callFn } from "@pylonsync/react";
 import { EnsureGuest } from "@pylonsync/client";
 import type { WaitlistConfig } from "@/lib/site.config";
 
-// The interactive top of the landing page: the email-capture form and the LIVE
-// signup counter. The counter is a live `db.useQuery("WaitlistStat")` over the
-// public, PII-free aggregate row, so the moment anyone (this tab or another)
-// submits an email, joinWaitlist updates that row and the new count syncs to
-// every open tab through the replica. No refresh, no polling.
+// The two client islands on the landing page: the email-capture form (in the
+// hero) and the LIVE signup count (under the facts). The count is a live
+// `db.useQuery("WaitlistStat")` over the public, PII-free aggregate row, so
+// the moment anyone (this tab or another) submits an email, joinWaitlist
+// updates that row and the new count syncs to every open tab through the
+// replica. No refresh, no polling.
 //
 // The signup form (joinWaitlist) is a public mutation, so it works for any
-// anonymous visitor. The counter needs a live sync connection, so it's wrapped
-// in <EnsureGuest>, which mints an anonymous guest session on first load — that
-// session is what the sync engine connects with. It holds no PII, and the
-// Signup table stays unreadable to it; the page only ever reads the aggregate
-// count, never an email.
-
-type HeroProps = {
-  hero: WaitlistConfig["hero"];
-  counter: WaitlistConfig["counter"];
-};
-
-export function WaitlistHero({ hero, counter }: HeroProps) {
-  return (
-    <div className="flex flex-col items-center text-center">
-      <SignupForm hero={hero} />
-      {counter.enabled ? (
-        <div className="mt-8">
-          <LiveCounter seed={counter.seedCount ?? 0} label={counter.label} />
-        </div>
-      ) : null}
-    </div>
-  );
-}
+// anonymous visitor. The count needs a live sync connection, so it's wrapped
+// in <EnsureGuest>, which mints an anonymous guest session on first load. That
+// session holds no PII, and the Signup table stays unreadable to it; the page
+// only ever reads the aggregate count, never an email.
 
 /* ----------------------------- signup form ---------------------------- */
 
-function SignupForm({ hero }: { hero: WaitlistConfig["hero"] }) {
+export function SignupForm({ hero }: { hero: WaitlistConfig["hero"] }) {
   const [email, setEmail] = useState("");
   const [status, setStatus] = useState<"idle" | "sending" | "done">("idle");
   const [alreadyJoined, setAlreadyJoined] = useState(false);
@@ -57,14 +39,13 @@ function SignupForm({ hero }: { hero: WaitlistConfig["hero"] }) {
       );
       setAlreadyJoined(res.alreadyJoined);
       setStatus("done");
-      // The live counter updates itself via the reactive push — no manual
-      // increment needed here.
+      // The live count updates itself via the reactive push.
     } catch (err) {
       const msg = err instanceof Error ? err.message : String(err);
       setError(
         /valid email|INVALID_ARGS/i.test(msg)
           ? "Enter a valid email address."
-          : "Something went wrong — try again in a moment.",
+          : "Something went wrong. Try again in a moment.",
       );
       setStatus("idle");
     }
@@ -72,22 +53,19 @@ function SignupForm({ hero }: { hero: WaitlistConfig["hero"] }) {
 
   if (status === "done") {
     return (
-      <div className="w-full max-w-md rounded-2xl border border-brand/30 bg-brand-soft/60 px-6 py-5 text-center">
-        <div className="mx-auto flex size-9 items-center justify-center rounded-full bg-brand text-white">
-          <CheckIcon />
-        </div>
-        <p className="mt-3 text-[15px] font-medium text-zinc-900">
-          {alreadyJoined ? "You're already on the list." : hero.successMessage}
+      <div className="border-t border-brand pt-4">
+        <p className="text-[15px] font-medium text-chalk">
+          {alreadyJoined ? "You are already on the list." : hero.successMessage}
         </p>
-        <p className="mt-1 text-[13px] text-zinc-500">
-          Watch the counter below — it just ticked up for everyone.
+        <p className="mt-1 font-mono-ui text-[12px] text-chalk-2">
+          The count below went up for everyone.
         </p>
       </div>
     );
   }
 
   return (
-    <form onSubmit={onSubmit} className="w-full max-w-md">
+    <form onSubmit={onSubmit}>
       <div className="flex flex-col gap-2 sm:flex-row">
         <input
           type="email"
@@ -98,28 +76,24 @@ function SignupForm({ hero }: { hero: WaitlistConfig["hero"] }) {
           placeholder={hero.emailPlaceholder}
           aria-label="Email address"
           required
-          className="h-11 flex-1 rounded-full border border-zinc-300 bg-white px-4 text-[15px] text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+          className="h-11 flex-1 rounded-md border border-line bg-paper px-3.5 text-[15px] text-chalk outline-none transition placeholder:text-chalk-2 focus:border-brand"
         />
         <button
           type="submit"
           disabled={status === "sending"}
-          className="inline-flex h-11 items-center justify-center rounded-full bg-zinc-900 px-6 text-[15px] font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-60"
+          className="inline-flex h-11 shrink-0 items-center justify-center rounded-md bg-brand px-5 text-[15px] font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-60"
         >
           {status === "sending" ? "Joining…" : hero.ctaLabel}
         </button>
       </div>
-      {error ? (
-        <p className="mt-2 text-[13px] text-red-600">{error}</p>
-      ) : (
-        <p className="mt-2 text-[13px] text-zinc-400">
-          No spam. One invite, the day we launch.
-        </p>
-      )}
+      <p className={`mt-2.5 font-mono-ui text-[12px] ${error ? "text-red-400" : "text-chalk-2"}`}>
+        {error ?? hero.formHint}
+      </p>
     </form>
   );
 }
 
-/* ----------------------------- live counter ---------------------------- */
+/* ----------------------------- live count ---------------------------- */
 
 interface WaitlistStatRow {
   id: string;
@@ -127,26 +101,26 @@ interface WaitlistStatRow {
   updatedAt: string;
 }
 
-function LiveCounter({ seed, label }: { seed: number; label: string }) {
+export function LiveCount({ seed, label }: { seed: number; label: string }) {
   return (
-    <EnsureGuest fallback={<CounterView value={seed} label={label} />}>
-      <LiveCounterInner seed={seed} label={label} />
+    <EnsureGuest fallback={<CountView value={seed} label={label} />}>
+      <LiveCountInner seed={seed} label={label} />
     </EnsureGuest>
   );
 }
 
-function LiveCounterInner({ seed, label }: { seed: number; label: string }) {
+function LiveCountInner({ seed, label }: { seed: number; label: string }) {
   // Live entity query over the public WaitlistStat row. `db.useQuery` re-renders
-  // the instant the row changes — in THIS tab and every other open tab, because
+  // the instant the row changes, in THIS tab and every other open tab, because
   // the change syncs through the shared replica. `loading` is true until the
   // first sync settles; until then we show the seed (never a flash of 0).
   const { data, loading } = db.useQuery<WaitlistStatRow>("WaitlistStat");
   const real = data.length > 0 ? data[0].count : 0;
   const value = seed + real;
-  return <CounterView value={value} label={label} live={!loading} />;
+  return <CountView value={value} label={label} live={!loading} />;
 }
 
-function CounterView({
+function CountView({
   value,
   label,
   live,
@@ -157,26 +131,20 @@ function CounterView({
 }) {
   const shown = useCountUp(value);
   return (
-    <div className="inline-flex items-center gap-2.5 rounded-full border border-zinc-200 bg-white px-4 py-2 shadow-sm">
-      {live ? (
-        <span className="relative flex size-2">
-          <span className="absolute inline-flex size-2 animate-ping rounded-full bg-brand/70" />
-          <span className="relative inline-flex size-2 rounded-full bg-brand" />
-        </span>
-      ) : (
-        <span className="inline-flex size-2 rounded-full bg-zinc-300" />
-      )}
-      <span className="text-[15px] font-semibold tabular-nums text-zinc-900">
-        {shown.toLocaleString()}
-      </span>
-      <span className="text-[13px] text-zinc-500">{label}</span>
-    </div>
+    <p className="flex items-center gap-3 font-mono-ui text-[14px] text-chalk-2">
+      <span
+        aria-hidden
+        className={live ? "size-2 rounded-full bg-brand" : "size-2 rounded-full bg-line"}
+      />
+      <span className="tabular-nums text-chalk">{shown.toLocaleString()}</span>
+      <span>{label}</span>
+      <span className="text-[12px]">{live ? "live" : ""}</span>
+    </p>
   );
 }
 
-// Smoothly tween the displayed number toward `target` whenever it changes, so a
-// live increment animates up instead of snapping. First paint shows the value
-// directly (no animation).
+// Tween the displayed number toward `target` whenever it changes, so a live
+// increment counts up instead of snapping. First paint shows the value directly.
 function useCountUp(target: number): number {
   const [shown, setShown] = useState(target);
   const fromRef = useRef(target);
@@ -208,11 +176,3 @@ function useCountUp(target: number): number {
 
   return shown;
 }
-
-function CheckIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
-      <path d="M20 6 9 17l-5-5" />
-    </svg>
-  );
-}

package/templates/waitlist/app/globals.css

@@ -19,6 +19,13 @@
   --brand: #4f46e5;
   --brand-soft: #eef2ff;
   --paper: #fafafa;
+  /* The marketing pages: near-black page, off-white type. Set from
+     lib/site.config.ts on <html>. */
+  --ink: #0b0b0c;
+  --ink-2: #19191b;
+  --line: #26262a;
+  --chalk: #ededea;
+  --chalk-2: #8f8f95;
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
@@ -112,6 +119,11 @@
   --color-brand: var(--brand);
   --color-brand-soft: var(--brand-soft);
   --color-paper: var(--paper);
+  --color-ink: var(--ink);
+  --color-ink-2: var(--ink-2);
+  --color-line: var(--line);
+  --color-chalk: var(--chalk);
+  --color-chalk-2: var(--chalk-2);
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
@@ -153,3 +165,14 @@
     cursor: pointer;
   }
 }
+
+/* Headlines. Space Grotesk is declared in app.ts. */
+.font-display {
+  font-family: var(--font-display, "Space Grotesk", "Helvetica Neue", Arial, sans-serif);
+}
+
+/* Small details: the launch date, the live count, the form hint. JetBrains Mono
+   is declared in app.ts. */
+.font-mono-ui {
+  font-family: var(--font-mono-ui, "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace);
+}

package/templates/waitlist/app/layout.tsx

@@ -23,6 +23,7 @@ export default function RootLayout({ children }: LayoutProps) {
           "--brand": colors.brand,
           "--brand-soft": colors.brandSoft,
           "--paper": colors.paper,
+          "--ink": colors.ink,
         } as React.CSSProperties
       }
     >