@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/consumer/lib/seed.ts

@@ -1,8 +1,10 @@
-// Demo data for a new app: twelve people who post, follow each other, like,
-// and comment, so the first visit opens on a feed that looks lived in.
+// Demo data for a new app: eight people who post, follow each other, like,
+// and comment, so the first visit opens on a feed with content in it.
 //
-// Photos live in public/images (avatars/ and posts/). Demo user ids start
-// with "demo_" so they never collide with a real or guest account.
+// Post photos live in public/images/posts and the server serves them at
+// /images/posts/<key>.jpg. Demo people have no profile photo, so the app
+// draws their initial. Demo user ids start with "demo_" so they never
+// collide with a real or guest account.
 // Pure data + pure shaping; functions/seedFeed.ts is a thin wrapper.
 
 export interface SeedProfile {
@@ -12,6 +14,7 @@ export interface SeedProfile {
 }
 
 export interface SeedPost {
+  /** File name under public/images/posts, without `.jpg`. */
   key: string;
   author: string;
   caption: string;
@@ -29,99 +32,54 @@ export interface SeedComment {
 }
 
 export const SEED_PROFILES: SeedProfile[] = [
-  { username: "mara.bakes", displayName: "Mara Lindqvist", bio: "Sourdough, mostly. Stockholm." },
-  { username: "theo.climbs", displayName: "Theo Adeyemi", bio: "Bouldering most evenings. Route setter at Blocworks." },
-  { username: "ines.clay", displayName: "Inés Moreno", bio: "Wheel-thrown stoneware from a small studio in Valencia." },
-  { username: "kenji.rides", displayName: "Kenji Watanabe", bio: "Gravel on weekends, commuting on weekdays." },
-  { username: "lou.streets", displayName: "Louise Carter", bio: "35mm film, mostly Brooklyn." },
-  { username: "sam.grows", displayName: "Sam Okafor", bio: "Allotment 14B. Tomatoes, beans, too many courgettes." },
-  { username: "rosa.roasts", displayName: "Rosa Delgado", bio: "Head roaster at a small shop in Oakland." },
-  { username: "biscuit.corgi", displayName: "Biscuit", bio: "Corgi. Professional napper. Managed by @nora.h" },
-  { username: "nora.h", displayName: "Nora Hughes", bio: "Product designer. Biscuit's person." },
-  { username: "ari.wanders", displayName: "Ari Cohen", bio: "Trains over planes." },
-  { username: "dev.draws", displayName: "Dev Patel", bio: "Architect. A sketch every morning before work." },
-  { username: "june.surfs", displayName: "June Tanaka", bio: "Cold water surfer on the Oregon coast." },
+  { username: "maya.rivera", displayName: "Maya Rivera", bio: "Travel photographer. Currently in Lisbon." },
+  { username: "jordan.eats", displayName: "Jordan Brooks", bio: "Cooking at home, eating out, writing it all down." },
+  { username: "priya.home", displayName: "Priya Shah", bio: "Interior designer. Small rooms, good light." },
+  { username: "kenji.mori", displayName: "Kenji Mori", bio: "Architecture and night walks. Tokyo." },
+  { username: "elena.runs", displayName: "Elena Berg", bio: "Trail runner. Mountains most weekends." },
+  { username: "sam.and.juno", displayName: "Sam Whitaker", bio: "Juno is the golden one." },
+  { username: "amara.o", displayName: "Amara Okafor", bio: "Coffee, markets, and early mornings." },
+  { username: "leo.haddad", displayName: "Leo Haddad", bio: "Road trips and sunsets. Film when I can." },
 ];
 
 export const SEED_POSTS: SeedPost[] = [
-  { key: "mara-loaf", author: "mara.bakes", caption: "Sunday loaf. 78% hydration and finally an ear I am happy with.", shape: "portrait", age: 3 },
-  { key: "june-dawn", author: "june.surfs", caption: "Glassy at 6am and nobody else out. Worth the cold hands.", shape: "portrait", age: 5 },
-  { key: "biscuit-couch", author: "biscuit.corgi", caption: "Guarding the couch from nothing in particular.", shape: "square", age: 8 },
-  { key: "rosa-roaster", author: "rosa.roasts", caption: "New Ethiopia lot on the roaster today. Blueberry and jasmine in the cup.", shape: "square", age: 11 },
-  { key: "ines-glaze", author: "ines.clay", caption: "Out of the kiln: the speckled oat glaze on a batch of mugs. Shop update Friday.", shape: "portrait", age: 14 },
-  { key: "lou-crosswalk", author: "lou.streets", caption: "Bedford Ave, late afternoon. Portra 400.", shape: "portrait", age: 20 },
-  { key: "dev-sketch", author: "dev.draws", caption: "Morning sketch of the old library stairs. Twenty minutes, one pen.", shape: "square", age: 26 },
-  { key: "kenji-gravel", author: "kenji.rides", caption: "82 km, 1,400 m of climbing, one flat. Good day.", shape: "portrait", age: 30 },
-  { key: "sam-tomatoes", author: "sam.grows", caption: "First proper harvest of the year. The yellow ones are Sungold.", shape: "square", age: 34 },
-  { key: "theo-boulder", author: "theo.climbs", caption: "Set a new blue circuit this week. This one is the crux of number 6.", shape: "portrait", age: 40 },
-  { key: "ari-train", author: "ari.wanders", caption: "Night train from Vienna to Venice. Woke up to this.", shape: "portrait", age: 46 },
-  { key: "nora-desk", author: "nora.h", caption: "New desk setup. @biscuit.corgi approved the rug.", shape: "square", age: 52 },
-  { key: "mara-buns", author: "mara.bakes", caption: "Cardamom buns for the neighbours. Kept two.", shape: "square", age: 60 },
-  { key: "june-board", author: "june.surfs", caption: "Waxed and ready for tomorrow.", shape: "square", age: 70 },
-  { key: "rosa-latte", author: "rosa.roasts", caption: "Tuesday latte art practice. Getting there.", shape: "square", age: 78 },
-  { key: "ines-wheel", author: "ines.clay", caption: "Trimming feet on a batch of bowls. The quiet part of the week.", shape: "portrait", age: 90 },
-  { key: "lou-diner", author: "lou.streets", caption: "Counter seats at the diner on Graham. Coffee refills forever.", shape: "square", age: 100 },
-  { key: "biscuit-beach", author: "biscuit.corgi", caption: "First time at the beach. Sand everywhere. No regrets.", shape: "portrait", age: 110 },
-  { key: "dev-model", author: "dev.draws", caption: "Card model for the community centre competition entry.", shape: "square", age: 124 },
-  { key: "kenji-coffee", author: "kenji.rides", caption: "Mid-ride coffee stop. The bike rests too.", shape: "square", age: 140 },
-  { key: "sam-shed", author: "sam.grows", caption: "Seed trays in the shed. Kale, chard, and far too much basil.", shape: "portrait", age: 155 },
-  { key: "theo-chalk", author: "theo.climbs", caption: "Chalk bag, tape, and a very tired pair of shoes.", shape: "square", age: 170 },
-  { key: "ari-market", author: "ari.wanders", caption: "Morning market in Palermo. I bought too many lemons.", shape: "square", age: 190 },
-  { key: "nora-sketches", author: "nora.h", caption: "Paper first, screens later. Wireframes for the booking flow.", shape: "square", age: 210 },
-  { key: "mara-starter", author: "mara.bakes", caption: "Meet Olof, the starter. Eleven years old this month.", shape: "portrait", age: 240 },
-  { key: "june-van", author: "june.surfs", caption: "Home for the weekend.", shape: "square", age: 280 },
-  { key: "ines-studio", author: "ines.clay", caption: "The studio shelves on a good week.", shape: "portrait", age: 320 },
-  { key: "lou-rain", author: "lou.streets", caption: "Rain on the J train platform.", shape: "portrait", age: 360 },
+  { key: "lisbon", author: "maya.rivera", caption: "Tram 28 at golden hour. Waited twenty minutes for this one and it was worth it.", shape: "square", age: 1.5 },
+  { key: "coffee", author: "amara.o", caption: "Flat white and a croissant before the market opens.", shape: "square", age: 3 },
+  { key: "dog", author: "sam.and.juno", caption: "Juno found the tall grass again.", shape: "square", age: 5 },
+  { key: "run", author: "elena.runs", caption: "Sunrise on the ridge. 18 km, 900 m up, legs gone.", shape: "square", age: 8 },
+  { key: "ramen", author: "jordan.eats", caption: "Tonkotsu from the new place on 5th. Broth cooked for 14 hours and you can tell.", shape: "square", age: 11 },
+  { key: "arch", author: "kenji.mori", caption: "Curves and shadows. The museum extension at noon.", shape: "square", age: 14 },
+  { key: "sunset", author: "leo.haddad", caption: "Big Sur, last light. 30 second exposure.", shape: "square", age: 20 },
 ];
 
 export const SEED_COMMENTS: SeedComment[] = [
-  { post: "mara-loaf", author: "rosa.roasts", text: "That crumb. Trading you a bag of the new Ethiopia for one.", after: 0.5 },
-  { post: "mara-loaf", author: "sam.grows", text: "What flour are you using?", after: 1 },
-  { post: "mara-loaf", author: "mara.bakes", text: "@sam.grows 80% bread flour, 20% whole wheat from the mill down the road.", after: 1.5 },
-  { post: "june-dawn", author: "kenji.rides", text: "Unreal colours.", after: 1 },
-  { post: "june-dawn", author: "ari.wanders", text: "Which beach is this?", after: 2 },
-  { post: "biscuit-couch", author: "nora.h", text: "He has not moved in three hours.", after: 0.2 },
-  { post: "biscuit-couch", author: "lou.streets", text: "A very serious job.", after: 2 },
-  { post: "biscuit-couch", author: "theo.climbs", text: "Those ears.", after: 3 },
-  { post: "rosa-roaster", author: "mara.bakes", text: "Saving me a bag?", after: 1 },
-  { post: "rosa-roaster", author: "rosa.roasts", text: "@mara.bakes already set aside.", after: 1.2 },
-  { post: "ines-glaze", author: "dev.draws", text: "The speckle on that glaze is lovely.", after: 2 },
-  { post: "ines-glaze", author: "nora.h", text: "Setting an alarm for Friday.", after: 3 },
-  { post: "lou-crosswalk", author: "ari.wanders", text: "The light in this one.", after: 4 },
-  { post: "dev-sketch", author: "ines.clay", text: "Twenty minutes? Show-off.", after: 1 },
-  { post: "kenji-gravel", author: "june.surfs", text: "Where was the flat?", after: 2 },
-  { post: "kenji-gravel", author: "kenji.rides", text: "@june.surfs about 5 km from the end, of course.", after: 3 },
-  { post: "sam-tomatoes", author: "mara.bakes", text: "Tomato and bread season.", after: 1 },
-  { post: "theo-boulder", author: "kenji.rides", text: "Looks sandbagged.", after: 2 },
-  { post: "theo-boulder", author: "theo.climbs", text: "@kenji.rides it is a fair blue. Mostly.", after: 2.5 },
-  { post: "ari-train", author: "lou.streets", text: "Adding this to the list.", after: 5 },
-  { post: "nora-desk", author: "dev.draws", text: "Where is the lamp from?", after: 1 },
-  { post: "mara-buns", author: "rosa.roasts", text: "Recipe please.", after: 2 },
-  { post: "biscuit-beach", author: "june.surfs", text: "Surf lessons next.", after: 1 },
-  { post: "dev-model", author: "ines.clay", text: "Good luck with the entry.", after: 3 },
-  { post: "sam-shed", author: "mara.bakes", text: "Pesto for the whole street then.", after: 4 },
-  { post: "mara-starter", author: "biscuit.corgi", text: "Can I eat Olof.", after: 2 },
-  { post: "mara-starter", author: "mara.bakes", text: "@biscuit.corgi no.", after: 2.2 },
+  { post: "lisbon", author: "leo.haddad", text: "The light on those tiles. Which street is this?", after: 0.3 },
+  { post: "lisbon", author: "maya.rivera", text: "@leo.haddad Rua da Conceição, just before it turns up to the cathedral.", after: 0.6 },
+  { post: "lisbon", author: "amara.o", text: "Adding this to the list for May.", after: 0.9 },
+  { post: "coffee", author: "jordan.eats", text: "That rosetta is perfect.", after: 0.5 },
+  { post: "coffee", author: "priya.home", text: "Where is this? I need that table.", after: 1 },
+  { post: "dog", author: "elena.runs", text: "Juno looks so happy.", after: 0.4 },
+  { post: "dog", author: "amara.o", text: "Best dog on this app.", after: 1.2 },
+  { post: "run", author: "kenji.mori", text: "Incredible view. How early did you start?", after: 1 },
+  { post: "run", author: "elena.runs", text: "@kenji.mori headlamps on at 4:30.", after: 1.5 },
+  { post: "ramen", author: "maya.rivera", text: "Going this week.", after: 2 },
+  { post: "arch", author: "priya.home", text: "Those shadows are unreal.", after: 1 },
+  { post: "sunset", author: "sam.and.juno", text: "Colors like this make me want to drive up the coast tonight.", after: 2 },
 ];
 
 /** Who each demo user follows, as username → usernames. */
 export const SEED_FOLLOWS: Record<string, string[]> = {
-  "mara.bakes": ["rosa.roasts", "sam.grows", "ines.clay", "biscuit.corgi", "lou.streets"],
-  "theo.climbs": ["kenji.rides", "june.surfs", "ari.wanders", "biscuit.corgi"],
-  "ines.clay": ["dev.draws", "mara.bakes", "nora.h", "lou.streets"],
-  "kenji.rides": ["theo.climbs", "june.surfs", "rosa.roasts", "ari.wanders"],
-  "lou.streets": ["ari.wanders", "dev.draws", "biscuit.corgi", "ines.clay"],
-  "sam.grows": ["mara.bakes", "rosa.roasts", "biscuit.corgi"],
-  "rosa.roasts": ["mara.bakes", "kenji.rides", "ines.clay", "sam.grows"],
-  "biscuit.corgi": ["nora.h", "june.surfs"],
-  "nora.h": ["biscuit.corgi", "dev.draws", "ines.clay", "lou.streets", "mara.bakes"],
-  "ari.wanders": ["lou.streets", "june.surfs", "kenji.rides", "theo.climbs"],
-  "dev.draws": ["ines.clay", "nora.h", "lou.streets"],
-  "june.surfs": ["kenji.rides", "biscuit.corgi", "ari.wanders", "theo.climbs"],
+  "maya.rivera": ["leo.haddad", "amara.o", "priya.home", "kenji.mori"],
+  "jordan.eats": ["amara.o", "maya.rivera", "sam.and.juno"],
+  "priya.home": ["kenji.mori", "maya.rivera", "amara.o", "elena.runs"],
+  "kenji.mori": ["priya.home", "leo.haddad", "elena.runs"],
+  "elena.runs": ["sam.and.juno", "leo.haddad", "maya.rivera", "kenji.mori"],
+  "sam.and.juno": ["elena.runs", "jordan.eats", "amara.o"],
+  "amara.o": ["jordan.eats", "maya.rivera", "priya.home", "sam.and.juno", "elena.runs"],
+  "leo.haddad": ["maya.rivera", "elena.runs", "kenji.mori"],
 };
 
 export const demoUserId = (username: string) => `demo_${username.replace(/\./g, "_")}`;
-export const avatarPath = (username: string) => `/images/avatars/${username}.jpg`;
 export const postImagePath = (key: string) => `/images/posts/${key}.jpg`;
 
 /**
@@ -158,7 +116,7 @@ export function shapeSeed(now: number = Date.now()): ShapedSeed {
       username: p.username,
       displayName: p.displayName,
       bio: p.bio,
-      avatarUrl: avatarPath(p.username),
+      avatarUrl: null,
       createdAt: hoursAgo(2000 - i * 40),
     })),
     posts: SEED_POSTS.map((p) => ({

package/templates/consumer/tests/seed.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, test } from "bun:test";
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+import { SEED_COMMENTS, SEED_FOLLOWS, SEED_POSTS, SEED_PROFILES, shapeSeed } from "../lib/seed";
+
+const PUBLIC = join(import.meta.dir, "..", "public");
+
+/** Every image path the seed writes that the server must serve from public/. */
+function localImages(): string[] {
+  const seed = shapeSeed(0);
+  const urls = [
+    ...seed.posts.map((p) => p.row.imageUrl),
+    ...seed.profiles.map((p) => p.avatarUrl),
+  ];
+  return urls.filter((u): u is string => typeof u === "string" && u.startsWith("/"));
+}
+
+describe("demo seed", () => {
+  test("every local image it references exists in public/", () => {
+    const images = localImages();
+    expect(images.length).toBeGreaterThan(0);
+    const missing = images.filter((url) => !existsSync(join(PUBLIC, url)));
+    expect(missing).toEqual([]);
+  });
+
+  test("posts, comments, and follows only name demo people", () => {
+    const people = new Set(SEED_PROFILES.map((p) => p.username));
+    const posts = new Set(SEED_POSTS.map((p) => p.key));
+    for (const p of SEED_POSTS) expect(people.has(p.author)).toBe(true);
+    for (const c of SEED_COMMENTS) {
+      expect(people.has(c.author)).toBe(true);
+      expect(posts.has(c.post)).toBe(true);
+    }
+    for (const [from, tos] of Object.entries(SEED_FOLLOWS)) {
+      expect(people.has(from)).toBe(true);
+      for (const to of tos) expect(people.has(to)).toBe(true);
+    }
+  });
+});

package/templates/creator/.env.example

@@ -10,3 +10,10 @@ PYLON_OWNER_EMAIL=you@yourbusiness.com
 # ── Site URL (optional) ──────────────────────────────────────────────────────
 # Used by robots.txt + sitemap.xml. Point it at your real domain in production.
 # SITE_URL=https://yourbusiness.com
+
+# ── Demo data ────────────────────────────────────────────────────────────────
+# `pylon dev` fills an empty subscriber list with fictional rows. Seeding runs
+# only under `pylon dev` (it checks PYLON_DEV_MODE and PYLON_DEV_WATCH_DIR), so
+# `pylon start`, Docker, and Pylon Cloud deploys never seed. Set 0 to start
+# empty in development. Never set 1 on a deploy.
+# PYLON_DEMO_DATA=0

package/templates/creator/README.md

@@ -18,11 +18,23 @@ increment in another without refreshing.
 ## How the realtime works
 
 - `functions/subscribe.ts`: a public **mutation** that validates, lowercases,
-  and dedupes the email, inserts one `Subscriber` row, and bumps a public,
-  PII-free `SubscriberCount` row.
-- `app/newsletter-signup.tsx` subscribes to `SubscriberCount` with
+  and dedupes the email, inserts one `Subscriber` row, and recounts into the
+  public, PII-free `SubscriberCount` row.
+- `app/(marketing)/newsletter-signup.tsx` reads `SubscriberCount` with
   `db.useQuery`, so the live count syncs to every open tab. No polling.
 
+The counter is the `Subscriber` table's row count, and it is hidden while the
+list is empty. `newsletter.importedCount` in `lib/site.config.ts` adds
+subscribers you are moving over from another tool. It ships as 0.
+
+## Demo data
+
+In `pylon dev`, an empty list gets about 180 fictional subscribers from the last
+30 days, so the counter, chart, and list have data (`functions/seedDemo.ts`,
+`lib/demo.ts`). Seeding runs only when `PYLON_DEMO_DATA` is on, or when it is unset and the app runs under `pylon dev`, and only while the `Subscriber` table is
+empty. `pylon start`, Docker, and Pylon Cloud deploys do not seed, because only `pylon dev` sets `PYLON_DEV_WATCH_DIR`. Set `PYLON_DEMO_DATA=0`
+to start empty in development. Delete both files once you have real subscribers.
+
 ## Privacy
 
 The `Subscriber` entity holds reader emails (PII), so its policy in `app.ts`
@@ -44,6 +56,10 @@ Your name, colors, bio, offerings, testimonials, newsletter copy, and links
 live in **`lib/site.config.ts`**. Edit that file, or generate it, to re-theme
 the page.
 
+The tab icon is `app/icon.svg` (with `public/favicon.ico` for browsers that
+request `/favicon.ico`). Both carry this brand's letter and colors; replace
+them when you rename the brand.
+
 ## Layout
 
 ```
@@ -51,8 +67,11 @@ app.ts                       Subscriber + SubscriberCount + User + policies
 lib/site.config.ts           ALL copy + brand + offerings + newsletter (edit this)
 functions/subscribe.ts       public mutation: validate + dedupe + count
 functions/subscriberStats.ts owner-only query: subscribers + emails
-app/page.tsx                 the landing page (server-rendered)
-app/newsletter-signup.tsx    client island: signup form + live counter
+functions/seedDemo.ts        dev-only demo subscribers (see Demo data)
+lib/stats.ts                 dashboard types + the public count
+lib/demo.ts                  demo subscribers + the dev-only gate
+app/(marketing)/page.tsx     the landing page (server-rendered)
+app/(marketing)/newsletter-signup.tsx  client island: signup form + live counter
 app/dashboard/               owner dashboard (auth-gated, live)
 ```
 

package/templates/creator/app/(marketing)/newsletter-signup.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { db, callFn } from "@pylonsync/react";
 import { EnsureGuest } from "@pylonsync/client";
 import type { CreatorConfig } from "@/lib/site.config";
+import { publicCount } from "@/lib/stats";
 
 // The newsletter signup — email capture plus a LIVE subscriber counter. This is
 // the realtime proof: the counter is a live `db.useQuery("SubscriberCount")`
@@ -23,7 +24,11 @@ export function NewsletterSignup({ newsletter }: Props) {
     <div>
       <SubscribeForm newsletter={newsletter} />
       <div className="mt-3">
-        <LiveCounter seed={newsletter.seedCount ?? 0} label={newsletter.counterLabel} />
+        <LiveCounter
+          importedCount={newsletter.importedCount}
+          label={newsletter.counterLabel}
+          labelOne={newsletter.counterLabelOne}
+        />
       </div>
     </div>
   );
@@ -100,27 +105,43 @@ interface SubscriberCountRow {
   count: number;
 }
 
-function LiveCounter({ seed, label }: { seed: number; label: string }) {
+type CounterProps = { importedCount: number; label: string; labelOne: string };
+
+export function LiveCounter(props: CounterProps) {
   return (
-    <EnsureGuest fallback={<CounterView value={seed} label={label} />}>
-      <LiveCounterInner seed={seed} label={label} />
+    <EnsureGuest fallback={null}>
+      <LiveCounterInner {...props} />
     </EnsureGuest>
   );
 }
 
-function LiveCounterInner({ seed, label }: { seed: number; label: string }) {
+function LiveCounterInner({ importedCount, label, labelOne }: CounterProps) {
   const { data, loading } = db.useQuery<SubscriberCountRow>("SubscriberCount");
-  const real = data.length > 0 ? data[0].count : 0;
-  return <CounterView value={seed + real} label={label} live={!loading} />;
+
+  // In `pylon dev` an empty list gets demo subscribers (functions/seedDemo.ts).
+  // The call goes out only when the synced count is empty, so a live site with
+  // subscribers never makes it.
+  const empty = !loading && data.length === 0;
+  const sent = useRef(false);
+  useEffect(() => {
+    if (!empty || sent.current) return;
+    sent.current = true;
+    void callFn("seedDemo", {}).catch(() => {});
+  }, [empty]);
+
+  if (loading) return null;
+  const value = publicCount(data, importedCount);
+  // A new newsletter has no subscribers yet; show nothing rather than "0".
+  if (value === 0) return null;
+  return <CounterView value={value} label={value === 1 ? labelOne : label} />;
 }
 
-// Plain text under the form. The fallback shows the seed until the guest
-// session connects; `live` is set once the count is synced.
-function CounterView({ value, label, live }: { value: number; label: string; live?: boolean }) {
+// Plain text under the form, shown once the count has synced.
+function CounterView({ value, label }: { value: number; label: string }) {
   const shown = useCountUp(value);
   return (
-    <p className="text-[15px] text-ink-2" data-live={live ? "true" : undefined}>
-      <span className="tabular-nums text-ink">{shown.toLocaleString()}</span> {label}
+    <p className="text-[15px] text-ink-2" data-testid="live-count">
+      <span className="tabular-nums text-ink">{shown.toLocaleString("en-US")}</span> {label}
     </p>
   );
 }

package/templates/creator/app/auth-form.tsx

@@ -51,7 +51,7 @@ export function AuthForm() {
     <div className="space-y-5">
       <form onSubmit={onSubmit} className="space-y-4">
         <label className="block">
-          <span className="mb-1.5 block text-[13px] font-medium text-zinc-700">Email</span>
+          <span className="mb-1.5 block text-[15px] text-ink-2">Email</span>
           <input
             type="email"
             value={email}
@@ -59,11 +59,11 @@ export function AuthForm() {
             required
             autoComplete="email"
             placeholder="you@yourbusiness.com"
-            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+            className="h-11 w-full rounded-md border border-rule bg-white px-3.5 text-[16px] text-ink outline-none transition placeholder:text-ink-2/60 focus:border-brand focus:ring-2 focus:ring-brand/20"
           />
         </label>
         <label className="block">
-          <span className="mb-1.5 block text-[13px] font-medium text-zinc-700">Password</span>
+          <span className="mb-1.5 block text-[15px] text-ink-2">Password</span>
           <input
             type="password"
             value={password}
@@ -71,7 +71,7 @@ export function AuthForm() {
             required
             autoComplete={mode === "login" ? "current-password" : "new-password"}
             placeholder={mode === "login" ? "Your password" : "At least 10 characters"}
-            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+            className="h-11 w-full rounded-md border border-rule bg-white px-3.5 text-[16px] text-ink outline-none transition placeholder:text-ink-2/60 focus:border-brand focus:ring-2 focus:ring-brand/20"
           />
         </label>
         {error ? (
@@ -82,13 +82,13 @@ export function AuthForm() {
         <button
           type="submit"
           disabled={pending}
-          className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-zinc-900 text-sm font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-60"
+          className="inline-flex h-11 w-full items-center justify-center rounded-md bg-brand text-[16px] font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-60"
         >
           {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
         </button>
       </form>
 
-      <p className="text-center text-[13px] text-zinc-500">
+      <p className="text-center text-[15px] text-ink-2">
         {mode === "login" ? "First time here?" : "Already have an account?"}{" "}
         <button
           type="button"
@@ -96,7 +96,7 @@ export function AuthForm() {
             setMode(mode === "login" ? "subscriber" : "login");
             setError(null);
           }}
-          className="font-medium text-zinc-900 underline underline-offset-2"
+          className="font-medium text-ink underline decoration-brand/50 underline-offset-4"
         >
           {mode === "login" ? "Create the owner account" : "Sign in"}
         </button>