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 flex-col bg-canvas md:flex-row">
  <Sidebar />                       {/* no bg, no border-r — inherits canvas */}
  <div className="flex min-w-0 flex-1 flex-col md:p-2">
    <div className="flex min-w-0 flex-1 flex-col bg-card
                    md:rounded-2xl md:shadow-panel">
      <main className="mx-auto w-full max-w-[110rem] flex-1
                       px-5 py-8 sm:px-6 lg:px-8">
        {/* Content — pages add no width cap of their own */}
      </main>
      <Footer />
    </div>
  </div>
</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.