---
path: /system/verify
surface: customer
domain: system
auth: anon
source: apps/oshun/web/src/app/system/verify/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; contrast/type/spacing/state
matrix, A4 print plates, responsive plate measurements, public access,
read-only contract, reduced-motion state, and telemetry absence refreshed
2026-06-27 in apps/oshun/web/e2e/system-verify-gallery.spec.ts'
---
# System · Verification Specimens
## Purpose
Concrete-evidence specimen sheet for the Lilith design system. Renders the
`VerifyGallery` composition — six static verification specimens covering
contrast ratios (WCAG), type ramp, spacing scale, button-state matrix, A4 print
plates, and responsive plate sketches. The current page is a hardcoded specimen
register, not a runtime WCAG calculator or screenshot service.
## Entry points
- Engineering / design / a11y review bookmarks
- Sibling specimen pages: `/system`, `/system/edge-states`, `/system/emails`,
`/system/og`
- Direct URL / bookmark — yes (anonymous; `/system/verify` is public)
## Layout regions
`page.tsx` is ``. The composition lives in
`apps/oshun/web/src/components/lilith/system-verify.tsx` and renders:
- **Register masthead**: `Verification register.`, right label
`WCAG 2.2 · AA + AAA`
- **Specimen 1 · Contrast.**: nine hardcoded `CONTRAST_PAIRS` rows:
- `Ink on cream` — `14.8 : 1` — `AAA · body 7+`
- `Ink on paper` — `14.6 : 1` — `AAA`
- `Muted on cream` — `4.7 : 1` — `AA · large only`
- `Accent on cream` — `5.6 : 1` — `AA`
- `Accent2 on cream` — `3.4 : 1` — `AA · large only`
- `Cream-HC ink on cream` — `17.4 : 1` — `AAA · ≥7:1 body`
- `Dusk · ink on dusk-bg` — `12.2 : 1` — `AAA`
- `Dusk · accent on dusk` — `5.8 : 1` — `AA`
- `Status ok on cream` — `4.8 : 1` — `AA`
- **Specimen 2 · The voice in print.**: nine hardcoded type rows:
`display 88 px`, `display.s 64 px`, `title 44 px`, `title.s 28 px`,
`lead 22 px`, `body 17 px`, `caption 14 px`, `eyebrow 10 px`, and `mono 11 px`
- **Specimen 3 · Spacing.**: ten hardcoded spacing rows: `0/0px/no space`,
`1/4px/tight`, `2/8px/dense`, `3/12px/base`, `4/16px/comfortable`,
`5/24px/section`, `6/32px/section.l`, `7/48px/page`, `8/64px/page.l`, and
`9/96px/plate`
- **Specimen 4 · Buttons, in six tempers.**: static state matrix for `Primary`,
`Ghost`, and `Link` across `rest`, `hover`, `active`, `focus`, `disabled`, and
`loading` states, for 18 total `Sit` cells
- **Specimen 5 · Print preview · Veritas + Nisaba.**: two A4-ratio plates:
`VERITAS · v.0142 · A4` (`p. 1 / 4`) and `NISABA · plate · A4` (`p. 1 / 2`)
- **Specimen 6 · Home Broadsheet — three sizes.**: responsive sketches labelled
`360`, `768`, and `1280`; their actual current CSS plate widths are 300px,
480px, and a flexible desktop plate respectively
## States
- [x] **Default** — all six specimens render with the hardcoded headings,
ratios, type rows, spacing rows, state matrix, print plates, and
responsive labels above
- [x] **Reduced motion** — no CSS keyframe animation is present on the
verification register under `prefers-reduced-motion: reduce`
- [x] **Print** — print media preserves the two 210:297 A4-ratio plates and the
register remains read-only
- [ ] **Standalone PWA** — should render cleanly
## Interactions
Showcase surface. The button-state matrix is not built from actual buttons; it
renders static `` cells labelled `Sit` with visual state styling.
- [x] **Each button in the matrix** — 18 static cells (`3 kinds × 6 states`), no
click handlers, buttons, anchors, or tabindex affordances
- [x] **Contrast cells** — static cards only; no copy-to-clipboard or other
controls
## Data & contracts
- **Reads**: none from services; hardcoded arrays and inline fixture content in
`system-verify.tsx` (`CONTRAST_PAIRS`, `RAMP`, `SPACE_SCALE`, `STATES`, and
`styleFor`)
- **Writes**: none
- **Realtime**: none
- **Caching**: SSR static; SW cache
- **Auth/role check**: anon — `/system/verify` is in
`apps/oshun/web/src/proxy.ts` `PUBLIC_PATHS` (~line 39), so it is reachable
without signing in
- **Metadata**: `title: 'System · verification'`,
`description: 'Six concrete specimens — contrast (WCAG ratios), type ramp, spacing scale, button-state matrix, A4 print plates, responsive 360/768/1280.'`,
`alternates.canonical: '/system/verify'`
## Cross-references
- Sibling specimens:
- [`system.md`](./system.md)
- [`system-edge-states.md`](./system-edge-states.md)
- [`system-emails.md`](./system-emails.md)
- [`system-og.md`](./system-og.md)
- Accessibility surface:
[`../00-public/legal-accessibility.md`](../00-public/legal-accessibility.md)
- A11y shell: [`shell/06-keyboard-a11y.md`](../../shell/06-keyboard-a11y.md)
- Responsive boards:
- [`../02-home-discovery/mobile.md`](../02-home-discovery/mobile.md)
- [`../02-home-discovery/tablet.md`](../02-home-discovery/tablet.md)
- Component sources:
- `apps/oshun/web/src/components/lilith/system-verify.tsx` (`VerifyGallery`)
- `apps/oshun/web/src/design-system/lilith/*`
## Automated coverage
- `apps/oshun/web/e2e/lilith-public-routes.spec.ts`
- Public `/system/verify` render smoke with no auth redirect
- `apps/oshun/web/e2e/system-verify-gallery.spec.ts`
- Anonymous direct render of `/system/verify`
- Register masthead and all six specimen headings
- All nine hardcoded contrast rows with ratios and grades
- All nine type ramp rows and ten spacing rows
- Static button-state matrix: 3 kinds, 6 states, 18 non-interactive cells
- A4 print plate labels and 210:297 aspect-ratio preservation under print
media
- Responsive plate labels and observed widths for 360/768/1280 sketches
- Read-only content contract: no anchors, buttons, form controls, summaries,
or tabbable rows
- No telemetry attributes in the register content
- Reduced-motion static state: no keyframe animation inside the register
## Open questions / known gaps
- [x] Read `system-verify.tsx` to enumerate every specimen, the exact contrast
pairs tested, the type ramp values, the spacing tokens shown, and the
button states.
- [x] Resolved: gating is public — `/system/verify` is in `src/proxy.ts`
`PUBLIC_PATHS` (~line 39)
- [x] Document the source of truth for WCAG ratios: they are hardcoded in
`CONTRAST_PAIRS`, not computed at runtime.
- [x] Confirm responsive viewport plates render at the correct native sizes:
current source labels the sketches `360 / 768 / 1280`, but the rendered
CSS plates are 300px, 480px, and flexible desktop width respectively.
- [x] No telemetry attributes are present in the register content.
- [ ] Drift risk: when tokens change, this specimen must be regenerated