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 <EmailGallery />. 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#

• Default — all four static email specimens render with the expected subjects, CTA labels, body copy, dates, and footers
• Reduced motion — no CSS keyframe animation is present inside the email-gallery plate under prefers-reduced-motion: reduce
• 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.

• Email body links — none are present; the CTA label is a styled <div>, not an anchor or button
• Footer manage/unsubscribe labels — styled underline <span> elements, not anchors
• 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-edge-states.md
  • system-og.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#

• 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
• Resolved: gating is public — /system/emails is in src/proxy.ts PUBLIC_PATHS (~line 37)
• 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.
• No telemetry attributes are present in the gallery content.