System · OG Card Gallery

Purpose#

Showcase of the six per-domain 1200×630 social-preview (OpenGraph) cards. Each card represents the share-preview a domain emits when its canonical URL is linked from social platforms. Composed via OGGallery from apps/oshun/web/src/components/lilith/system-pages.tsx.

Entry points#

• Engineering / design bookmarks
• Sibling specimen pages: /system, /system/edge-states, /system/emails, /system/verify
• Direct URL / bookmark — yes (anonymous; /system/og is public)

Layout regions#

page.tsx is <OGGallery />. The composition is exported by system-pages.tsx (OGGallery ~line 512). Per the file header:

OGGallery — six per-domain OG cards stacked

So the layout renders six OG card mockups at the 1200×630 share-preview aspect ratio, one per domain (Tara, Veritas, Nyx, Arete, Nisaba, Metis).

• LSectionHead (headingAs="h1", system-pages.tsx ~516-520): kicker "System · OG cards", on-page title "Six 1200×630 plates, one per room." (note "plates", not "social previews" — the latter wording only appears in the page metadata.description, see Data & contracts)
• Card deck: six static <OGCard> instances inside an overflow-safe panel. The cards are render-only mockups, each 1200×630 CSS pixels.
• Cards / captions (OG_CARDS):
  • Tara: "Sit, three minutes." / "A daily companion for attention."
  • Arete: "The small daily rituals." / "Habits, journal, the weekly review."
  • Veritas: "Is this true?" / "Claim-checking, with sources."
  • Nyx: "The night, mapped." / "Where to look, and why."
  • Nisaba: "A reading desk." / "Lexicon, marginalia, study plans."
  • Metis: "A course you can keep." / "Tutoring loops, mastery checks, paths."
• Tone contract (OG_TONES): Tara, Veritas, and Metis use L.bg; Arete and Nisaba use L.paper; all five use L.ink foreground and L.accent labels. Nyx is the only dark specimen (#1a1610 background, #f1e8d0 foreground, #d97a4a accent). These tones are hardcoded in this component, not read from getDomainMetadata.

States#

• Default — all six OG cards render
• Card tone styles — each card uses the current OG_TONES background, foreground, label, and subtitle colours
• Reduced motion — no CSS keyframe animation is present on the card specimens under prefers-reduced-motion: reduce
• Standalone PWA — should render cleanly
• Print — all six 1200×630 cards remain readable under print media

Interactions#

Showcase surface — OG cards are static mockups.

• Per-card label / caption — every card renders Lilith · <domain>, the title, and the subtitle
• Static cards — no links, buttons, inputs, summaries, or tabbable controls exist inside the cards
• Per-card tone — current hardcoded OG_TONES styles are applied to label and subtitle accent text

Data & contracts#

• Reads: none — composed of static specimen content and hardcoded OG_TONES
• Writes: none
• Realtime: none
• Caching: SSR static; SW cache
• Auth/role check: anon — /system/og is in apps/oshun/web/src/proxy.ts PUBLIC_PATHS (~line 38), so it is reachable without signing in
• Metadata: title: 'System · OG cards', description: 'Six 1200×630 social previews, one per room.', alternates.canonical: '/system/og'

Cross-references#

• Sibling specimens:
  • system.md
  • system-edge-states.md
  • system-emails.md
  • system-verify.md
• Production OG image routes consumed by /domains/[domainId]: /og/domain-<id>.png — see ../02-home-discovery/domains-domainId.md
• Welcome OG: /welcome/opengraph-image, /welcome/twitter-image
• Component sources:
  • apps/oshun/web/src/components/lilith/system-pages.tsx (OGGallery)
  • apps/oshun/web/src/components/lilith/system-pages.tsx may also export single OGCard; this gallery maps OG_CARDS through that component

Automated coverage#

• apps/oshun/web/e2e/lilith-public-routes.spec.ts
  • Render-only public route smoke for /system/og with no auth redirect
• apps/oshun/web/e2e/system-og-gallery.spec.ts
  • Anonymous direct render of /system/og
  • Heading and "System · OG cards" kicker content
  • Six expected cards in order, each 1200×630 CSS pixels
  • Domain label, title, subtitle, background, foreground, label accent, and subtitle accent for every card
  • Static/no-interactive-card contract
  • Reduced-motion static state: no card descendant uses CSS keyframe animation
  • Print-media persistence for all six cards

Open questions / known gaps#

• Read the OGGallery export to enumerate the six cards and per-domain captions
• Drift risk: this gallery is static; the actual OG images served from /og/domain-<id>.png route handlers may diverge — confirm the relationship
• Resolved: gating is public — /system/og is in src/proxy.ts PUBLIC_PATHS (~line 38)
• Confirm whether the gallery is the live source-of-truth for production OG image generation or purely a mockup
• No telemetry — consider tagging visit events