---
path: /system
surface: customer
domain: system
auth: anon
source: apps/oshun/web/src/app/system/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; live component specimen
  sections, public shell chrome, placeholder button contract, edge-state
  primitives, reduced-motion static state, and telemetry absence refreshed
  2026-06-27 in apps/oshun/web/e2e/system-specimens-gallery.spec.ts'
---

# 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

- [x] **Default** — shell chrome and all nine specimen sections render
- [x] **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.

- [x] **Shell nav links** — `OSHUN`, `← Home`, `Explore`, `Activity`, and
      `Library` render as links; `Library` is active because the specimen passes
      `active="library"`
- [x] **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
- [x] **Status / severity / decision / validation / sync pills** — rendered as
      non-interactive spans/divs
- [x] **Edge-state text affordances** — partial-failure `Retry` and PWA `Reload`
      render as spans, not live controls
- [x] **Code samples / chips / fields / domain labels** — non-interactive
- [x] **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-edge-states.md)
  - [`system-emails.md`](./system-emails.md)
  - [`system-og.md`](./system-og.md)
  - [`system-verify.md`](./system-verify.md)
- Status (public uptime): [`status.md`](./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

- [x] Read `SystemSpecimens.tsx` to enumerate every specimen section, label, and
      any subtle interaction
- [x] 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
- [x] Metadata is page-local only: title, description, and canonical are
      present; no OG/Twitter metadata is declared for the design-system specimen