Peregrine · The Lineup

UI Mockups

Pre-game intro flow and round view — variants to compare on device. Tap any card to open it full-screen.

Round View

5 variants
v5Latest
One screen, no swipe — the case collapses in place to a compact reference (prompt + A–D chips + passage peek) above the streaming reasoning. Re-reviewing never hides the reasoning; call buttons stay live throughout.
v4
Adds Target/Safe icons on the call buttons; horizontal-nav layout carried over from v3. Superseded — the swipe hid the reasoning while re-reading the case.
v1
Vertical staged reveal with an explicit "State N" framing box — walks question → reasoning → call step by step.
v2
Same vertical staged reveal, framing box stripped out — leaner layout, less scaffolding around the reasoning card.
v3
Horizontal two-panel swipe — The Case → The Reasoning, with page dots. Sideways paging instead of vertical scroll.

Design System

shared recipe
Hierarchy
The recipe behind v5, written down so it generalizes: three type roles (mono / Inter / serif), one amber accent, an ink contrast ladder, and the letter-gutter choice-scan pattern — with a flat-serif vs. gutter+sans before/after.

Intro Pagination

3 variants
v1
Four text-led slides — The Setup → The Call → The Clock → The Rule. Concept walked through in words.
v2
Illustrated slides — each concept paired with a glyph (statement bubble, four-silhouette lineup). More visual, less reading.
v3
Alternate iconography — document-with-Q and eye motifs; tighter slide framing around the same core rules.