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 + notes toggle — the grade button lives below now */}
  </header>
  <ul className="flex-1 overflow-y-auto p-4 space-y-3">
    <ChatBubble turn={turn} />
  </ul>
  <div className="shrink-0 border-t bg-background px-4 py-3">
    <QuestionProgress
      answered={candidateTurnCount}
      required={ANSWERS_BEFORE_GRADING}
      language={language}
      action={<Button onClick={onGrade} disabled={!canGrade}>...</Button>}
    />
    {/* mic/rate-limit banners, then the textarea form */}
  </div>
</div>

Marketing / Legal Shell

The shell for the landing page family (/, /privacy, /terms): a fixed Navbar pill floating over a full-bleed background, and generous top padding on the content below it to clear the pill. Unlike App Shell, there is no canvas/card split here — see DESIGN.md → Surfaces.

<>
  <SkipLink />
  <Navbar variant="minimal" />   {/* fixed pill, see Navbar DS page */}

  {/* pt-28 clears the pill — Navbar.tsx stays the source of truth
     for its height/offset, this page only pads generously below it */}
  <main className="flex-1 bg-background px-6 pb-12 pt-28">
    <article className="mx-auto max-w-2xl">{/* ...content... */}</article>
  </main>

  <Footer />
</>

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>
Sergiy Klymkovych

VoiceMock was built by one designer

I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.

Product Designer · AI Design Engineer · Designer for Startups

See it on LinkedIn