--- path: /system/emails surface: customer domain: system auth: anon source: apps/oshun/web/src/app/system/emails/page.tsx status: walked last_walked: '2026-05-29 automated runtime walk (Playwright headless) — render, /v1 data (2xx), console/page-errors, expected content, screenshot verified; live screen-reader, touch, offline, and telemetry-delivery checks pending a manual AT pass. Evidence: WALKTHROUGH/results/runtime-sweep-2026-05-29.md; content re-verified 2026-06-03 against current source; four static email cards, subject/CTA/body fixtures, read-only CTA/footer labels, public access, print-media rendering, reduced-motion state, and telemetry absence refreshed 2026-06-27 in apps/oshun/web/e2e/system-email-gallery.spec.ts' --- # System · Email Specimens ## Purpose Showcase of the four canonical Lilith email template specimens — welcome, weekly digest, Veritas update, and incident — rendered in cream paper for design review. The current route is static fixture content composed via `EmailGallery` and `LilithEmail` from `apps/oshun/web/src/components/lilith/system-pages.tsx`; it is not the live transactional-email infrastructure. ## Entry points - Engineering / design bookmarks - Sibling specimen pages: `/system`, `/system/edge-states`, `/system/og`, `/system/verify` - Direct URL / bookmark — yes (anonymous; `/system/emails` is public) ## Layout regions `page.tsx` is ``. The composition is exported by `system-pages.tsx`. Per the file header: > EmailGallery — all four emails in cream-paper print The current layout renders: - **`LWebShell` chrome** with `LCustomerNav active="library"` - **Header**: kicker `System · XII · emails`; h1 `Four templates, in cream paper.` - **Gallery plate**: fixed specimen background `#ddd1ad`, 56px padding, 6px radius, and a two-column grid - **Four 640px-wide `LilithEmail` cards**: - **welcome**: kicker `Lilith · welcome`, subject `Begin a reading desk.`, CTA label `Open today's page →`, and onboarding copy that reserves a reading desk - **digest**: kicker `Lilith · weekly`, subject `Sunday, in five plates.`, CTA label `Read the broadsheet →`, and six digest lines for Tara, Arete, Veritas, Nisaba, Nyx, and Metis - **veritas**: kicker `Lilith · veritas`, subject `A claim you tracked changed.`, CTA label `See the new sources →`, and an updated-verdict inset for the coffee/dehydration claim - **incident**: kicker `Lilith · operator`, subject `S2 · CDN edge slow.`, CTA label `Open the incident →`, and incident fixture `I.0142 · S2` - **Shared card fixture chrome**: date `Tuesday, the 6th of May`, cream background `#f1ebdd`, ink CTA styling, and a footer reading `Lilith · 142 Gracechurch St, London EC3V · Manage what we send · Unsubscribe.` ## States - [x] **Default** — all four static email specimens render with the expected subjects, CTA labels, body copy, dates, and footers - [x] **Reduced motion** — no CSS keyframe animation is present inside the email-gallery plate under `prefers-reduced-motion: reduce` - [x] **Print** — print media preserves all four 640px email cards and keeps them read-only - [ ] **Standalone PWA** — should render cleanly ## Interactions Showcase surface — emails are static mockups. - [x] **Email body links** — none are present; the CTA label is a styled `
`, not an anchor or button - [x] **Footer manage/unsubscribe labels** — styled underline `` elements, not anchors - [x] **Per-email label / caption** — each card exposes the `Lilith · ...` eyebrow label and subject text ## Data & contracts - **Reads**: hardcoded fixture objects in `system-pages.tsx`: `EMAIL_SETS`, `DIGEST_LINES`, and inline per-kind body content in `LilithEmail` - **Writes**: none - **Realtime**: none - **Caching**: SSR static; SW cache - **Auth/role check**: anon — `/system/emails` is in `apps/oshun/web/src/proxy.ts` `PUBLIC_PATHS` (~line 37), so it is reachable without signing in - **Metadata**: `title: 'System · emails'`, `description: 'Welcome, weekly digest, Veritas-update, and incident emails — in cream paper.'`, `alternates.canonical: '/system/emails'` ## Cross-references - Sibling specimens: - [`system.md`](./system.md) - [`system-edge-states.md`](./system-edge-states.md) - [`system-og.md`](./system-og.md) - [`system-verify.md`](./system-verify.md) - Live email templates (transactional infrastructure): - `libs/shared/emails/*` (verify; out of scope for this page) - Component sources: - `apps/oshun/web/src/components/lilith/system-pages.tsx` (`EmailGallery`) - `apps/oshun/web/src/components/lilith/system-pages.tsx` (`LilithEmail`) ## Automated coverage - `apps/oshun/web/e2e/lilith-public-routes.spec.ts` - Public `/system/emails` render smoke with no auth redirect - `apps/oshun/web/e2e/system-email-gallery.spec.ts` - Anonymous direct render of `/system/emails` - Header and static gallery plate evidence - All four email cards, 640px card width, subject, kicker, CTA text, fixture date, footer, and per-kind body copy - Read-only content contract: no anchors, buttons, form controls, summaries, tabbable rows, or clickable CTA/footer links inside the gallery plate - No telemetry attributes in the gallery plate - Reduced-motion static state: no keyframe animation inside the gallery plate - Print-media render preserves all four card specimens ## Open questions / known gaps - [x] Read the `EmailGallery` and `LilithEmail` exports to enumerate the four static cards, labels, fixture copy, and CTA/footer label semantics. - [ ] Drift risk: the gallery is a static mockup; when the actual transactional templates change, this page must be regenerated - [x] Resolved: gating is public — `/system/emails` is in `src/proxy.ts` `PUBLIC_PATHS` (~line 37) - [x] Confirm whether the gallery is designed for screen-only or print-optimised: source header says the gallery is "all four emails in cream-paper print," and the print-media Playwright pass confirms all four cards remain readable. - [x] No telemetry attributes are present in the gallery content.