VoiceMock

Layout Patterns

Standard layout compositions used across screens. Follow these patterns for consistency.

App Shell

Main application layout with optional sidebar and sticky header. Used on interview and results screens.

<div className="flex min-h-screen">
  <nav className="sticky top-0 h-screen w-56 border-r">
    {/* Sidebar */}
  </nav>
  <main className="flex-1">
    <header className="sticky top-0 h-14 border-b">
      {/* Header */}
    </header>
    <div className="max-w-4xl mx-auto px-8 py-8">
      {/* Content */}
    </div>
  </main>
</div>

Interview Layout

Chat-first layout with scrollable transcript and fixed input bar at the bottom.

<div className="flex h-screen flex-col">
  <header className="shrink-0 border-b px-4 h-14">
    {/* Status + controls */}
  </header>
  <ul className="flex-1 overflow-y-auto p-4 space-y-3">
    <ChatBubble turn={turn} />
  </ul>
  <InputBar status={status} ... />
</div>

Card Pattern

Standard card with border, rounded-xl, and consistent padding. Used for content grouping.

Card Title

Card content goes here with consistent padding and border radius.

<div className="border border-border rounded-xl bg-card p-6">
  <h4 className="text-sm font-semibold">Title</h4>
  <p className="text-sm text-muted-foreground">Content</p>
</div>

Need a design system like this?

I design and build products end‑to‑end — from first idea and design system to production‑ready code, ready to hand off to your development team.