Ariadne chat: reproduce the restraint, then earn the polish.

Net effect: the desktop captures are a ~583 px window, not a wide desktop — so true wide-desktop layout (≥1200 px, persistent sidebar) is a proposed extrapolation, anchored by the sidebar that is visible in V3.

The reference's "smoothness" is not a motion story; it's restraint and information architecture. Name the principles, or innovations will quietly destroy the very thing we're copying.

/* ── PRIMITIVES — raw ramp, no UI meaning (v3.1: system closed, every card color traces here) ── */
--gray-950:#090909; --gray-900:#111111; --gray-850:#161616; --gray-825:#202024; --gray-800:#1d1d1d;
--gray-775:#252525; --gray-700:#383838; --gray-600:#6a6a6a; --gray-500:#7c7c7c; --gray-400:#838383;
--gray-300:#adadad; --gray-250:#e0e0e0; --gray-200:#d4d4d4; --gray-150:#efefef; --gray-100:#e1e1e1; --gray-50:#f4f4f4; --white:#fff;
--navy-900:#01132f; --navy-850:#03132e; --navy-700:#1b283f; --navy-600:#1e273a; --navy-300:#dfefff;
--blue-600:#1d4ed8; --blue-500:#2563eb; --blue-400:#3b82f6; --blue-300:#5b8cff;
--green-500:#079e7c; --green-400:#31a56b; --red-400:#f87171; --red-950:#2a1416; --steel-400:#8a93a3; --steel-350:#70859e;

/* ── SEMANTIC — what UI binds to (no raw hexes; no orphans) ── */
--bg:gray-950; --surface:gray-850; --hover-surface:gray-825; --inline-code:gray-775; --field:gray-900;
--border:gray-600;        /* #6a6a6a — ALL essential borders/chevron/divider/edit/+ring (~3.5:1, buffered) */
--border-quiet:gray-800;  /* decorative only (exempt from 1.4.11) */
--text:gray-100; --text-strong:gray-50; --text-2:gray-300; --text-muted:gray-400;
--text-faint:gray-500;    /* #7c7c7c — was #737373 → 4.8:1 (buffered) */
--timestamp:steel-350;     /* #70859e — passes bg + navy bubble + chip (was #6a7f99, failed on navy) */
--on-navy:navy-300;
--bubble-user:navy-850;    /* one token; narrow darkening = JPEG tolerance */
--chip:navy-700; --send-busy:navy-600; --send-busy-arrow:steel-400; --send:blue-500; --send-hover:blue-600; --accent-save:green-500;
--live:green-400; --danger:red-400; --danger-bg:red-950; --stop-glyph:gray-250; --icon-idle:gray-150; --link:blue-300; --focus:blue-400;

/* ── SCALES — named, not ad-hoc (cards reference these, not raw px) ── */
--radius: xs 4 · sm 8 · md 12 · pill 999      /* rationalized from 8/10/12/14/17/24 */
--space : 1=4 · 2=8 · 3=12 · 4=16 · 6=24       /* 8px base grid */
--type  : h1 28/34·700 · h2 20/28·600 · body 16/24 (narrow 15/26) · label 13/16 · code 13/20 · ts 12

Palette (corrected — AA-safe text tiers)

✎ = changed from the raw sample for AA compliance. The phantom #191919 "tool-row pill" token is removed (identical to the #161616 code surface). v3.1: the system is now closed — every color used in the cards/state-matrix (hover surface, send-hover, danger-bg, stop glyph, idle icon, the AA-corrected borders) is a defined primitive, so the token layer can actually enforce the AA floor it gates on.

Contrast remediation (recomputed, sRGB)

Corrected the prior panel: #838383 and #adadad were false-flagged — both pass (ratios above are recomputed against the true #090909 bg). The real misses were the near-invisible composer border (1.18:1) and divider (1.07:1). v3.1: remediated tokens carry a buffer (no razor's-edge 3.00), and the two that previously still failed (timestamp-on-navy, busy arrow) are now fixed.

Target size (SC 2.5.5 / 2.5.8): interactive targets ≥ 44×44px (24px AA minimum with spacing). The reference's ~9px icons / ~17px pills fail this — at the compact breakpoint, tap-to-reveal the toolbar and pad all targets to 44px.

Focus, keyboard & reduced-motion (required)

--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);  /* :focus-visible only, ≥2px, ≥3:1 */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important; }
  /* v3.1: the blanket reset is NOT enough for bespoke infinite loops — kill them explicitly: */
  .shimmer,.pulse{ animation:none!important }        /* stop the loop (don't run-once to a blank frame) */
  .shimmer::after{ content:"Working…" }              /* static label substitute */
  .caret{ animation:none!important; opacity:1 }      /* steady bar, no blink (SC 2.2.2) */
}

--ease-out: cubic-bezier(.16,1,.3,1);   /* decel — entrances, reveals */
--ease-in : cubic-bezier(.4,0,1,1);     /* accel — exits, collapses */
--ease-std: cubic-bezier(.2,0,0,1);     /* disclosure, generic */
--dur-instant:0ms · --dur-fast:120ms · --dur-base:180ms · --dur-slow:240ms · --pulse:1000ms

obs = measured in footageprop = Ariadne proposal

Component tree

<ChatApp>
├─ <Sidebar>            (≥768: nav · ThreadList · AccountRow)        [V3 obs]
└─ <ChatPane>
   ├─ <MessageList role=log aria-live=polite>
   │  ├─ <UserMessage>   → Bubble(navy) · AttachmentChip · Timestamp · HoverToolbar(role=toolbar)
   │  │                  └─ edit state swaps in <EditableMessage> (no neighbour reflow)
   │  └─ <AssistantTurn> (flush, no bubble)
   │     ├─ ReasoningDisclosure(aria-expanded) · ToolCallRow(aria-expanded)→Pill+CodeBlock
   │     ├─ Markdown(headings/lists/links) · CodeBlock→Header(lang+CopyButton)+pre
   │     └─ StreamCaret (while streaming)
   └─ <Composer role=form> → StatusBar(Working…+Stop) · Textarea · ActionRow(Attach·Execute⌄·Send)

State matrix ✓ observed ◇ proposed

Streaming data model

// SSE; accumulate in a ref, commit batched per animation frame (no per-chunk re-render storm)
const buf = useRef(""); const prevCount = useRef(0); const [text,setText] = useState("");
const raf = useRef(0);
const onChunk = c => { buf.current += c;
  if(!raf.current) raf.current = requestAnimationFrame(()=>{ raf.current=0; setText(buf.current); }); };
// stable id per word (NOT index→key); animate ONLY the words new since last commit
const words = useMemo(()=> text.split(/(\s+)/).filter(Boolean), [text]);
const firstFresh = prevCount.current;             // index of first new word this commit
useEffect(()=>{ prevCount.current = words.length; }, [words.length]);
words.map((w,i)=> <span key={`w${i}`} className="tok"
   data-fresh={i>=firstFresh || undefined}            // only fresh tail carries the entrance
   style={{animationDelay:`${Math.max(0,Math.min(i-firstFresh,8))*20}ms`}}>{w}</span>)
// .tok{animation:tokIn 80ms var(--ease-out) both} — `both` so settled words never replay
// .tok:not([data-fresh]){animation:none}            // belt-and-suspenders: old words static
// auto-scroll: pinned = (scrollHeight - scrollTop - clientHeight) ≤ 32 → scrollTo({top,behavior:reduced?'auto':'smooth'}); else show ↓ chevron
// caret: <span class="caret"> rendered as a SIBLING after the last word-span while streaming (steady bar under reduced-motion)
// send predicate (canonical): canSend = input.trim().length > 0 && !isStreaming;  inline `code` has NO copy button (block code only)

Missing flows now specced

⭐ v3.1: empty/first-run is now a fully-specced Phase-0 state (it was a 6-word stub) — you can't claim to "reproduce the feel" without specifying the first feel a user gets.

Phase 0 — Parity: reproduce the feel (tokens, asymmetric layout, luminance hierarchy, disclosure) with no innovations, so "smoothness" is verifiable against the frames. Phase 1 — Floor + feel: accessibility + the two highest-impact motion fixes. Phase 2 — Richness: gated visual upgrades.

The reframe: the original "headline" (per-word fade-in, #13) is last by impact×effort; the real Phase-1 wins are smooth scroll (#5) and the think-time indicator (#6). The highest-leverage work of all (#1–3) was previously filed as "anatomy" — reproducing the restraint is the work.