Design Review · Judge Panel

Ariadne Chat — Panel Review

Three independent reviewers scored the chat UI and its live-turn demo against a six-dimension rubric, reviewing the actual source (preview.html, styles.css, main.tsx, HANDOFF.md).

Panel · Vesper (Design Director) · Cog (Staff Frontend Eng) · Lumen (Product & A11y Lead) Method · static source review · 6 weighted dimensions Date · 2026-06-07

7.9

/ 10

Panel Weighted

Strong build · ship-worthy with fixes A genuinely restrained, token-disciplined chat UI whose feel and demo land beautifully — the artifact-arrival moment is a standout. Unanimously held back from the top tier by keyboard operability in the artifact dock, a reduced-motion gap on the looping demo, and a status model that's elegant but under-explained. None are structural; all are addressable.

The Rubric

20%

Feel & Fidelity

Captures the restrained, smooth reference feel; honors the 5 feel-thesis principles.

20%

Visual Craft

Typography, spacing, token system, hierarchy, light + dark parity, polish.

20%

Interaction & Motion

Entrances, status sync, tool transitions, streaming, carousel, easing discipline.

15%

IA & Clarity

Tri-panel layout, dock views, status-model legibility, progressive disclosure.

15%

Accessibility & Robustness

WCAG AA, reduced-motion, keyboard/focus, scroll independence, resize, contrast.

10%

Demo Effectiveness

Looping live-turn as a landing GIF: story, pacing, the empty→populated beat.

Scorecard

Dimension	Vesper	Cog	Lumen	Avg
Feel & Fidelity ·20%	9	8	9	8.7
Visual Craft ·20%	9	8	9	8.7
Interaction & Motion ·20%	8	7	8	7.7
IA & Clarity ·15%	8	8	7	7.7
Accessibility & Robustness ·15%	7	7	6	6.7
Demo Effectiveness ·10%	9	9	7	8.3
Weighted overall	8.3	7.7	7.8	7.9

Consensus

What the panel agreed works

The feel-thesis is real in the CSS, not just claimed — asymmetric containment (bubbled user / flush .prose at ~64ch), a luminance-only text ramp, and monochrome discipline (color reserved for delete / fail / done).
Exemplary token system & light-theme parity — components bind only to the semantic layer, so the light theme is a pure remap that even re-themes the canvas and previews.
The carousel is the real thing — native CSS scroll-snap with spacer-centering (stays centered on resize for free), correct drag-to-scroll, rAF scroll-sync, and a click-swallow after drag.
The demo's artifact-arrival beat is the star — dock auto-opens, the spec lands in a previously empty dock with a ring-pulse + jump; it reads in a single loop.
Leak-free engineering — every interval / observer / listener cleans up; the demo clears its timers each loop and guards re-entry.

Where it loses points

HighDock isn't keyboard-operable. Traffic lights are <i onClick> with meaning shown only on hover; carousel slides aren't focusable; no end-state aria-disabled; resizer is pointer-only. (SC 2.1.1 / 1.4.1)
HighDemo ignores reduced-motion. The JS setTimeout loop auto-plays/loops regardless of prefers-reduced-motion (the global CSS only freezes CSS animation); no Pause / caption on a landing-facing GIF. (SC 2.2.2)
MedCarousel isn't announced — no aria-roledescription, aria-current, or live region naming "Artifact N of M."
MedStatus model regressed in React & under-explained. The React port drives the two surfaces from two unsynchronized intervals rather than one phase; nothing teaches the "state vs activity" contrast.
MedContrast risk on inactive segmented-control glyphs (.canvas-seg button) and .aw-ver — likely under AA 3:1.

Prioritized Roadmap

Keyboard + semantics pass on the artifact dock

Traffic lights → real <button> with aria-label + always-visible affordance + Enter/Space; focusable .cv-flow with arrow-key nav, aria-current on the active slide, and end-state aria-disabled on the arrows; keyboard resize on the splitter.

Make the landing demo motion-safe + controllable

Gate the JS choreography on prefers-reduced-motion (render the settled final frame instead of looping); add Pause / Replay and a one-line caption.

Announce the carousel to assistive tech

aria-roledescription="carousel", aria-current on the centered artifact, and a polite live region — "Artifact 3 of 9 — Chat Reference Spec."

Unify the React status behind one phase — and teach it

Port the preview's single-source setPhase so sidebar STATE and bottom ACTIVITY can't desync; add an aria-description/tooltip clarifying "model state" vs "current activity."

Contrast bump

Raise inactive segmented-control glyph + .aw-ver alpha to clear AA 3:1 in both themes.

Parity & polish

Wire selVer into verLabel/ArtPreview (version selection is currently inert); align the auto-scroll thresholds (~140px) to kill the button/pin dead-band; ship the demo harness in React for parity.

The Judges, In Their Words

Vesper

Design Director

8.3

/10

"A genuinely restrained, token-disciplined chat UI whose feel and demo land beautifully — held from a 9 only by keyboard gaps in the dock and a couple of contrast/reduced-motion edges."

Notable

All five restraint principles are provable in code, not aspirational.
Two-layer tokens make the light theme a clean remap; desaturated 3-hue syntax respects restraint.
Traffic-light windows with contextual actions are coherent, not decorative.
Flags inactive .canvas-seg glyph contrast and the demo's unconditional loop.

Cog

Staff Frontend Engineer

7.7

/10

"Well-engineered and leak-free with a standout demo, held just short of excellent by a regressed (dual-interval) status model and a couple of real scroll/version-state defects."

Notable

Demo timeline is leak-free — demoClear() each loop, re-entry guard.
Carousel scroll-sync is rAF-coalesced with a lastSync guard against feedback loops.
Found a real regression: React drives status from two unsynchronized intervals, not one phase.
Caught the 120↔180px auto-scroll dead-band and inert selVer/verLabel.

Lumen

Product & A11y Lead

7.8

/10

"A tasteful, feel-faithful chat UI with an excellent artifact-arrival moment, held back by keyboard/announcement a11y gaps and a status model that's elegant but under-explained."

Notable

Reduced-motion CSS is genuinely thorough — but the demo's JS cadence isn't gated.
Traffic lights + carousel fail keyboard / announcement (SC 2.1.1, 2.2.2).
Status model is too subtle to self-teach; the two words read as redundant.
Notes the demo lives only in preview.html — not reproducible from main.tsx as handed off.