---
path: /system/og
surface: customer
domain: system
auth: anon
source: apps/oshun/web/src/app/system/og/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; six-card content, render-only
  public access, tone styles, reduced-motion static state, and print media
  evidence refreshed 2026-06-27 in apps/oshun/web/e2e/system-og-gallery.spec.ts'
---

# 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

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

## Interactions

Showcase surface — OG cards are static mockups.

- [x] **Per-card label / caption** — every card renders `Lilith · <domain>`, the
      title, and the subtitle
- [x] **Static cards** — no links, buttons, inputs, summaries, or tabbable
      controls exist inside the cards
- [x] **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.md)
  - [`system-edge-states.md`](./system-edge-states.md)
  - [`system-emails.md`](./system-emails.md)
  - [`system-verify.md`](./system-verify.md)
- Production OG image routes consumed by `/domains/[domainId]`:
  `/og/domain-<id>.png` — see
  [`../02-home-discovery/domains-domainId.md`](../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

- [x] 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
- [x] 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