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 <VerifyGallery />. 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#

• Default — all six specimens render with the hardcoded headings, ratios, type rows, spacing rows, state matrix, print plates, and responsive labels above
• Reduced motion — no CSS keyframe animation is present on the verification register under prefers-reduced-motion: reduce
• 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 <div> cells labelled Sit with visual state styling.

• Each button in the matrix — 18 static cells (3 kinds × 6 states), no click handlers, buttons, anchors, or tabindex affordances
• 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-edge-states.md
  • system-emails.md
  • system-og.md
• Accessibility surface: ../00-public/legal-accessibility.md
• A11y shell: shell/06-keyboard-a11y.md
• Responsive boards:
  • ../02-home-discovery/mobile.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#

• 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.
• Resolved: gating is public — /system/verify is in src/proxy.ts PUBLIC_PATHS (~line 39)
• Document the source of truth for WCAG ratios: they are hardcoded in CONTRAST_PAIRS, not computed at runtime.
• 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.
• No telemetry attributes are present in the register content.
• Drift risk: when tokens change, this specimen must be regenerated