System · The System, Laid Out

Purpose#

Design-system specimen sheet for the Lilith register. Renders the SystemSpecimens composition inside LWebShell — a public, live-component specimen for palette, type, editorial primitives, domain marks, buttons/chips, cards, trust pills/disclosures, edge states, and the two Lilith registers. This surface is a static design-system specimen, not uptime monitoring; public uptime lives at /status, while /system/edge-states, /system/emails, /system/og, and /system/verify showcase narrower concerns.

Entry points#

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

Layout regions#

page.tsx is <SystemSpecimens />. The composition lives in apps/oshun/web/src/components/lilith/SystemSpecimens.tsx. It renders one LWebShell with LCustomerNav active="library", then these nine sections:

• i. Palette — One paper, one accent. Fourteen L tokens: bg, paper, paper2, ink, ink2, muted, soft, rule, rule2, chip, accent, accent2, ok, and alert
• ii. Type — Cormorant · Inter · JetBrains Mono. Nine type rows: Display · xl 96px, Display · lg 72px, Display · md 56px, Headline 36px italic, Sub-headline 22px italic, Body · lg 18px, Body · md 16px, UI · md 12px sans, and Mono · sm 11px mono
• iii. Editorial primitives — The grammar of the page. Rows for eyebrow, drop cap, display, pull-quote, rule variants, key/value fields, and dot navigation
• iv. Domain marks — One mark per room. Seven glyphs labelled tara, arete, veritas, nyx, nisaba, metis, and lilith
• v. Buttons & chips — Four kinds, three sizes. Three size examples (Small, Medium, Large), four kind examples (Primary, Accent, Ghost, Quiet), and four chips (Default, Accent, 02:00, 4-4-4-4)
• vi. Cards — Surfaces. Default and accent LCard examples with the literal card-behavior copy
• vii. Pills & disclosures — The grammar of trust. Confidence, AI disclosure, severity, status, decision, validation, and sync primitives
• viii. Edge states — Calm under stress. Skeleton, empty, error, offline, partial failure, and PWA update primitives in context
• ix. The two registers — One paper, two voices. Manuscript/customer and plate-of-record/operator examples

States#

• Default — shell chrome and all nine specimen sections render
• Reduced motion — no CSS keyframe animation is present inside the specimen content under prefers-reduced-motion: reduce
• Standalone PWA — should render cleanly
• Print — /system has no dedicated print contract; narrower print specimen coverage lives in /system/verify and /system/og

Interactions#

Specimen surface. The customer nav is live shell chrome; the examples inside main are presentational component specimens.

• Shell nav links — OSHUN, ← Home, Explore, Activity, and Library render as links; Library is active because the specimen passes active="library"
• Specimen buttons — all nine LBtn examples are placeholder buttons: Small, Medium, Large, Primary, Accent, Ghost, Quiet, Open the canon, and Retry; each has aria-disabled="true", data-placeholder="true", and the placeholder tooltip, with no real click handler
• Status / severity / decision / validation / sync pills — rendered as non-interactive spans/divs
• Edge-state text affordances — partial-failure Retry and PWA Reload render as spans, not live controls
• Code samples / chips / fields / domain labels — non-interactive
• Main content anchors — none; only the shell nav contains links

Data & contracts#

• Reads: none from services; static arrays and inline specimen content in SystemSpecimens.tsx (PALETTE, TYPE_RAMP, DOMAINS, and inline rows)
• Writes: none
• Realtime: none
• Caching: SSR static; SW cache
• Auth/role check: anon — /system is in apps/oshun/web/src/proxy.ts PUBLIC_PATHS (~line 35), so it is reachable without signing in
• Metadata: title: 'The system, laid out', description: 'Specimen sheet for the Lilith design system — palette, type, primitives, pills, edge states, and the two registers.', alternates.canonical: '/system'

Cross-references#

• Sibling system specimen pages:
  • system-edge-states.md
  • system-emails.md
  • system-og.md
  • system-verify.md
• Status (public uptime): status.md
• Component sources:
  • apps/oshun/web/src/components/lilith/SystemSpecimens.tsx
  • apps/oshun/web/src/design-system/lilith/* (primitives)

Automated coverage#

• apps/oshun/web/e2e/lilith-public-routes.spec.ts
  • Public /system render smoke with no auth redirect; axe is skipped because this specimen intentionally demonstrates sub-AA palette combinations
• apps/oshun/web/e2e/system-specimens-gallery.spec.ts
  • Anonymous direct render of /system
  • LWebShell customer nav links/actions and active Library state
  • All nine section kickers/titles
  • Fourteen palette token labels and swatches
  • Nine type-ramp rows with rendered size/family metadata
  • Editorial primitive rows, rule labels, and field values
  • Seven domain glyph labels and SVG count
  • Nine placeholder LBtn examples and zero real specimen buttons
  • Chips, card copy, trust pills/disclosures, validation glyph labels, and sync states
  • Edge-state copy, skeleton line count, span-only Retry/Reload affordances
  • Two-register copy
  • Main content has no links, telemetry attributes, or keyframed descendants

Open questions / known gaps#

• Read SystemSpecimens.tsx to enumerate every specimen section, label, and any subtle interaction
• Resolved: gating is public for design review — /system is listed in src/proxy.ts PUBLIC_PATHS (~line 35), not signed-in only
• Drift risk: when primitives update, this specimen and focused E2E contract must be regenerated together
• Metadata is page-local only: title, description, and canonical are present; no OG/Twitter metadata is declared for the design-system specimen