Spotlight in a Quiet Room
The design token architecture, typography hierarchy, and interactive visual components powering PreHire. Built without generic SaaS tropes — calm, poised, and focused under a warm desk lamp.
The Orb — Interactive Interviewer Presence
Ari is listening…
State Transition Controls
The Orb stands in for Ari. It translates real-time audio amplitudes and conversation states into calm, harmonic filaments without uncanny humanoid avatars.
Color Token Architecture & Contrast Matrix
Strict color discipline: one warm accent (spotlight-500) for human focus, one data accent (signal-500) strictly for telemetry, and zero gratuitous gradients or template neons.
ink-950
Deepest ground / dark frame
ink-900
Primary dark background / room ambiance
ink-800
Secondary surface / card foundation
ink-700
Raised interactive surface & modals
ink-600
Borders, outlines & dividers
ink-300
Muted captions, secondary copy
ink-100
Primary readable body & headline text
mist-100
Paper tone for high-contrast report docs
spotlight-500
The Single Warm Accent (CTAs, stage light, active speech)
signal-500
Data & Telemetry ONLY (charts, confidence timeline, WPM)
Typography Discipline: The Solitary Serif Flourish
Per design specification (Section 3.3): All interface copy utilizes a clean humanist sans stack. The serif typeface (Playfair Display) is strictly reserved for the large numerical score on the interview evaluation report and nowhere else.
Notice the contrast: the number commands gravitas and deliberation, while all surrounding labels, badges, and metrics remain crisp, modern sans-serif.
Data & Telemetry Primitives (signal-500)
Confidence & Delivery Trajectory
signal-500 OnlyInteractive timeline plotting delivery composure across the 15-minute dialogue.
Composure & Delivery Trajectory
15-Minute TimelineComposed, concise overview of distributed payment platform background.
AudioMeter (Green Room Mic Check)
Decibel TelemetryProvides instantaneous microphone sensitivity feedback before entering the interview room.