Alibi Styleguide
Case-file noir design tokens, typography, and atomic primitives. Built for precision graph detective gameplay where every lie leaves a path.
Color Palette
Typography Hierarchy
Every suspect statement corresponds to an authored claim in the knowledge graph. When claims conflict with hard physical evidence or the mansion topology, reasoning queries identify contradictions.
Secondary body text explaining subtle alibi overlaps and physical room access constraints.
Buttons & Variants
Chips & Metadata Pills
Investigation Stamps
Suspect Cards
Polaroid Cards (Evidence & Statements)
Broken Pocket Watch
Found stopped at 9:18 on the library parquet, crystal shattered from impact.
Whereabouts at 9:15
I was in the drawing room pouring wine for everyone when the blackout began.
Electronic Door Log
Magnetic lock record confirms the conservatory door remained locked throughout slots 4 to 6.
Error Banners & Empty States
The case file is empty.
Begin by questioning suspects about their whereabouts, or inspect rooms for physical evidence.
No contradictions detected yet.
When two statements place someone in two rooms at once, or clash with physical logs, a red thread will bind them.
Cypher Trace Rows
Chronological Timeline Grid
Cross-references statements and hard exhibits over 8 slots. Flags contradictory rooms with a thread ring, highlights rehearsed alibis with brass brackets, and displays cleared suspect badges.
Evidence Board (React Flow)
Interactive 2D graph canvas of suspects, soft statements, physical exhibits, flags, and hypotheses. Drawn with red threads of contradiction, dashed orange impossible journeys, and brass rehearsal edges.
Search a room or ask a question.
Statements and physical exhibits land as pinned cards on this corkboard, connected by red threads of contradiction.
AI Inspector Reasoning Stream
Streams real-time SSE tool calls, result rows, flags, hypotheses, and narrative conclusions. Supports deterministic assist, live cold case re-execution, and accusation pre-fill.
Ask the Inspector to reason.
The AI Inspector queries the play graph to identify impossible moves, alibi contradictions, and motive connections.
Bait Announcements (Task U6)
Prepared public announcements designed to elicit slips of the tongue from suspects with guilty knowledge.
“We have found Penhallow's missing signet ring in the courtyard planter.”
“The courtyard gate camera was switched off all evening.”
Accusation & Verdict States (Task U6)
Formal indictment outcomes, 3-star mastery ratings, step-by-step case replay, and ground truth reveal cards.
Flawless solve on first accusation with all proof items derived on the graph.
“You have the hand, not the head.”
1 participant identified; co-conspirator or mastermind remains unnamed.
“Accusation confirmed.”
All conspirators brought to justice. Truth revealed on verdict screen.
Fabricated Alibis Exposed
Kofi and Hana claim they were in the prop store together at slot 5. The door access log places Okoye in the green room alone, proving Dee, Kofi, and Hana rehearsed identical details.
Mini Floor Plan Schematics
Pure SVG crime scene topologies displaying hallway connectivity, locked barriers, discovered secret passages, and one-click room exploration.
Accessibility & Present Mode (Task U7)
Strict WCAG 2.1 AA text contrast (4.5:1+), visible 2px thread focus indicators, aria-live stream regions, and 1.15 font scaling for recording.
Interactive controls feature high-contrast keyboard navigation rings with 2px offset.
Recording mode scales the root font by 1.15×, hides development toggles, and maximizes label legibility.
Targeted for 1920×1080 and 1440×900 display viewports with graceful stacking below 1180px.
Detective Phone & Case 0 Walkthrough
A handheld node-link FalkorDB visualizer that starts in a clean blank state and dynamically renders real-time alibi links, red contradiction threads, and clearance shields.