The interface for the sales call analysis service processes five data layers per call: metadata, audio, transcripts with timestamps, checklist evaluations, and AI-generated analysis. The system is designed for managers who review calls between meetings, requiring high data density and readability within a one-minute timeframe.
The design uses a color-coded system to distinguish between speakers and statuses. Transcripts are organized by segments, while checklist items feature three states: passed, failed, and pending explanation. A matrix view displays manager performance, using specific color buckets rather than gradients to ensure clarity when identifying issues.
The design system was exported from Figma to CSS variables, resulting in 217 variables, of which only 51 are actively used. The developer implemented a three-layer token structure: primitives, semantic aliases, and typography shortcuts. Borders are rendered via inset shadows to prevent layout shifts during state changes.
The landing page design includes 1,422 text layers, with 47 lacking defined styles. The typography relies on the Martian Mono font to maintain a technical tone. Dark mode is implemented using white with varying transparency levels instead of standard gray to maintain color consistency against the dark purple background.
