Patterns

Page templates

The app's screens, composed from the components in this guide. Each one is a live page you can switch to tablet and phone width, and to either theme.

#How to read these

Each template is an embedded page with its own viewport, so the product’s real media queries fire when you pick Tablet or Phone. Start from the nearest template and change content, not structure. The Code panel shows the full markup.

#Stores

The signed-in home. A pulse strip of rollups across all stores, then one card per store. Answers “how are my stores doing?”.

Stores

Code

  <div class="shell">
    <aside class="sidebar">
  <div class="sidebar-head">
    <a href="#" aria-label="Weekwright home"><span class="logo"><svg class="logo-mark" viewBox="0 0 28 28" aria-hidden="true"><rect width="28" height="28" rx="7"/><path d="M6.5 9.5 10 19l4-7 4 7 3.5-9.5"/></svg>Weekwright</span></a>
    <button type="button" class="sidebar-toggle" aria-expanded="false" aria-controls="sidebar-nav">Menu</button>
  </div>
  <nav id="sidebar-nav" class="sidebar-body" aria-label="Main">
    <a href="#" class="nav-item active"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z"/></svg> Stores</a>
    <div class="nav-group">
      <div class="label">Your stores</div>
      <div class="nav-store"><a href="#" class="nav-store-link">Cozy Goods</a><button type="button" class="chev" aria-label="Collapse" aria-expanded="true"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div>
      <div class="nav-nested"><span class="label">Recent reports</span>
        <a href="#" class="nav-report">Sep 14–20</a>
        <a href="#" class="nav-report">Sep 7–13</a>
      </div>
      <a href="#" class="nav-connect"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Connect store</a>
    </div>
    <div class="sidebar-bottom">
      <a href="#" class="nav-item"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h9m4 0h3M4 17h3m4 0h9M15 4v6M9 14v6"/></svg> Settings</a>
      <button type="button" class="nav-item nav-logout"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 4H5v16h5M15 8l4 4-4 4M19 12H9"/></svg> Log out</button>
    </div>
  </nav>
</aside>

    <main class="main"><div class="page">
      <header class="page-header"><div><h1>Stores</h1><div class="sub">Your weekly packs, all in one place</div></div></header>
      <div class="pulse">
        <div class="tile"><div class="label">Revenue</div><div class="tile-value num">$26,810</div><div class="tile-foot"><span class="delta delta-up">↑ 9.2% vs prior</span></div></div>
        <div class="tile"><div class="label">Orders</div><div class="tile-value num">471</div><div class="tile-foot"><span class="delta delta-up">↑ 6.0% vs prior</span></div></div>
        <div class="tile"><div class="label">Connected stores</div><div class="tile-value num">2</div><div class="tile-hint">1 waiting for first report</div></div>
      </div>
      <div class="section-head"><h2>Your stores</h2><span class="muted">Open a store to see its reports</span></div>
      <div class="store-grid">
        <div class="store-card">
          <div class="store-card-top"><div class="store-icon">C</div><div class="store-meta"><div class="store-name">Cozy Goods</div></div><span class="pill pill-accent">● Connected</span></div>
          <div class="store-trend"><div><div class="label">Revenue</div><div class="num value">$18,420</div><span class="delta delta-up">↑ 12.4% vs prior</span></div>
            <svg class="spark" viewBox="0 0 88 28" role="img" aria-label="Revenue, recent weeks"><polygon class="spark-area" points="3,28 3,22 23,18 43,20 63,10 85,5 85,28"/><polyline class="spark-line" points="3,22 23,18 43,20 63,10 85,5"/><circle class="spark-dot" cx="85" cy="5" r="3"/></svg></div>
          <div class="store-facts"><span><b class="num">312</b> orders</span><span class="num">Sep 14–20</span></div>
          <p class="store-summary">Revenue rose 12% on stronger mug sales.</p>
          <a class="btn-link" href="#">Open store →</a>
        </div>
        <div class="store-card">
          <div class="store-card-top"><div class="store-icon waiting">N</div><div class="store-meta"><div class="store-name">North Pier Tea</div></div><span class="pill pill-warn">Waiting for first report</span></div>
          <div class="inset"><div class="line">Queued · first pack Monday</div><div class="tile-hint">Expected Sep 28 · covers Sep 21–27</div></div>
          <a class="btn-link" href="#">Open store →</a>
        </div>
      </div>
      <p class="footnote">Totals are shown per currency. We never add different currencies together.</p>
    </div></main>
  </div>

Use it when

The first screen after sign-in
Comparing stores at a glance

Don’t use it when

Detail for one store. Open the store page
More than four tiles in the strip

#Store page

The weekly view for one store: pulse strip, then the action band, then what changed, then the archive. Order is the point: answer first, evidence after.

Store page

Code

  <div class="shell">
    <aside class="sidebar">
  <div class="sidebar-head">
    <a href="#" aria-label="Weekwright home"><span class="logo"><svg class="logo-mark" viewBox="0 0 28 28" aria-hidden="true"><rect width="28" height="28" rx="7"/><path d="M6.5 9.5 10 19l4-7 4 7 3.5-9.5"/></svg>Weekwright</span></a>
    <button type="button" class="sidebar-toggle" aria-expanded="false" aria-controls="sidebar-nav">Menu</button>
  </div>
  <nav id="sidebar-nav" class="sidebar-body" aria-label="Main">
    <a href="#" class="nav-item"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z"/></svg> Stores</a>
    <div class="nav-group">
      <div class="label">Your stores</div>
      <div class="nav-store active"><a href="#" class="nav-store-link">Cozy Goods</a><button type="button" class="chev" aria-label="Collapse" aria-expanded="true"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div>
      <div class="nav-nested"><span class="label">Recent reports</span>
        <a href="#" class="nav-report">Sep 14–20</a>
        <a href="#" class="nav-report">Sep 7–13</a>
      </div>
      <a href="#" class="nav-connect"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Connect store</a>
    </div>
    <div class="sidebar-bottom">
      <a href="#" class="nav-item"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h9m4 0h3M4 17h3m4 0h9M15 4v6M9 14v6"/></svg> Settings</a>
      <button type="button" class="nav-item nav-logout"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 4H5v16h5M15 8l4 4-4 4M19 12H9"/></svg> Log out</button>
    </div>
  </nav>
</aside>

    <main class="main"><div class="page">
      <header class="page-header"><div>
        <nav class="breadcrumb" aria-label="Breadcrumb"><span class="crumb"><a href="#">Stores</a></span><span class="crumb"><span class="sep"> / </span><span class="current">Cozy Goods</span></span></nav>
        <h1>Cozy Goods</h1><div class="sub">Latest weekly report and archive</div></div>
        <div class="page-header-end"><span class="pill pill-accent">● Connected</span></div></header>
      <div class="pulse">
        <div class="tile"><div class="label">Revenue</div><div class="tile-value num">$18,420</div><div class="tile-foot"><span class="delta delta-up">↑ 12.4% vs prior</span><svg class="spark" viewBox="0 0 88 28" role="img" aria-label="Revenue, recent weeks"><polygon class="spark-area" points="3,28 3,22 23,18 43,20 63,10 85,5 85,28"/><polyline class="spark-line" points="3,22 23,18 43,20 63,10 85,5"/><circle class="spark-dot" cx="85" cy="5" r="3"/></svg></div></div>
        <div class="tile"><div class="label">Orders</div><div class="tile-value num">312</div><div class="tile-foot"><span class="delta delta-up">↑ 3.6% vs prior</span><svg class="spark" viewBox="0 0 88 28" role="img" aria-label="Orders, recent weeks"><polygon class="spark-area" points="3,28 3,18 23,20 43,14 63,12 85,9 85,28"/><polyline class="spark-line" points="3,18 23,20 43,14 63,12 85,9"/><circle class="spark-dot" cx="85" cy="9" r="3"/></svg></div></div>
        <div class="tile"><div class="label">Sessions</div><div class="tile-value num">9,840</div><div class="tile-foot"><span class="delta delta-down">↓ 1.8% vs prior</span><svg class="spark spark-down" viewBox="0 0 88 28" role="img" aria-label="Sessions, recent weeks"><polygon class="spark-area" points="3,28 3,6 23,9 43,8 63,17 85,23 85,28"/><polyline class="spark-line" points="3,6 23,9 43,8 63,17 85,23"/><circle class="spark-dot" cx="85" cy="23" r="3"/></svg></div></div>
        <div class="tile"><div class="label">Low-stock SKUs</div><div class="tile-value num">3</div><div class="tile-hint">Below reorder threshold</div></div>
      </div>
      <div class="action action-warn"><span class="action-icon"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 3L5 13.5h6L10 21l8-10.5h-6z"/></svg></span><div class="action-body"><div class="label">This week’s action</div><div class="action-title">Restock the stoneware mug before Friday</div><div class="action-why">Four left, and it sold 30 a week on average.</div></div></div>
      <div class="summary" style="margin-top: var(--space-3)"><p><strong>What changed:</strong> Revenue rose 12% on stronger mug sales. Sessions dipped slightly.</p><div class="panel-actions"><a class="btn-link" href="#">Open full report →</a></div></div>
      <div class="section-head"><h2>Week by week</h2><span class="muted">Newest first</span></div>
      <ol class="timeline">
        <li class="tl-item tl-item-next"><div class="tl-card"><div class="tl-head"><span class="tl-week">Next pack</span><span class="pill">Monday</span></div><div class="tl-headline muted">Your next weekly pack lands Monday.</div></div></li>
        <li class="tl-item tl-item-latest"><a class="tl-card" href="#"><div class="tl-head"><span class="tl-week">Sep 14–20</span><span class="pill pill-pop">Latest</span></div><div class="tl-headline">Revenue rose 12% on stronger mug sales.</div><div class="tl-metrics"><span><b class="num">$18,420</b> revenue <span class="delta delta-up">↑ 12.4%</span></span><span><b class="num">312</b> orders</span><span><b class="num">9,840</b> sessions</span></div></a></li>
        <li class="tl-item"><a class="tl-card" href="#"><div class="tl-head"><span class="tl-week">Sep 7–13</span></div><div class="tl-headline">A quiet week. Orders held steady.</div><div class="tl-metrics"><span><b class="num">$16,390</b> revenue</span><span><b class="num">301</b> orders</span><span><b class="num">9,610</b> sessions</span></div></a></li>
      </ol>
    </div></main>
  </div>

#Weekly report

One pack, in the same sections as the Monday email: what changed and the action up top, then Sales, Traffic, and Ops panels.

Weekly report

Code

  <div class="shell">
    <aside class="sidebar">
  <div class="sidebar-head">
    <a href="#" aria-label="Weekwright home"><span class="logo"><svg class="logo-mark" viewBox="0 0 28 28" aria-hidden="true"><rect width="28" height="28" rx="7"/><path d="M6.5 9.5 10 19l4-7 4 7 3.5-9.5"/></svg>Weekwright</span></a>
    <button type="button" class="sidebar-toggle" aria-expanded="false" aria-controls="sidebar-nav">Menu</button>
  </div>
  <nav id="sidebar-nav" class="sidebar-body" aria-label="Main">
    <a href="#" class="nav-item"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z"/></svg> Stores</a>
    <div class="nav-group">
      <div class="label">Your stores</div>
      <div class="nav-store active"><a href="#" class="nav-store-link">Cozy Goods</a><button type="button" class="chev" aria-label="Collapse" aria-expanded="true"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div>
      <div class="nav-nested"><span class="label">Recent reports</span>
        <a href="#" class="nav-report active">Sep 14–20</a>
        <a href="#" class="nav-report">Sep 7–13</a>
      </div>
      <a href="#" class="nav-connect"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Connect store</a>
    </div>
    <div class="sidebar-bottom">
      <a href="#" class="nav-item"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h9m4 0h3M4 17h3m4 0h9M15 4v6M9 14v6"/></svg> Settings</a>
      <button type="button" class="nav-item nav-logout"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 4H5v16h5M15 8l4 4-4 4M19 12H9"/></svg> Log out</button>
    </div>
  </nav>
</aside>

    <main class="main"><div class="page">
      <a class="back-link" href="#"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6"/></svg> Back to store</a>
      <header class="page-header"><div><h1>Weekly report</h1><div class="sub">Cozy Goods · Matching email digest sections</div></div><div class="page-header-end"><span class="pill">Sep 14–20, 2026</span></div></header>
      <div class="report-lead">
        <div class="summary"><div class="label">What changed</div><p>Revenue rose 12% on stronger mug sales. Sessions dipped slightly, and one product is nearly out of stock.</p></div>
        <div class="action action-warn"><span class="action-icon"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 3L5 13.5h6L10 21l8-10.5h-6z"/></svg></span><div class="action-body"><div class="label">This week’s action</div><div class="action-title">Restock the stoneware mug before Friday</div><div class="action-why">Why: four left, and it sold 30 a week on average.</div></div></div>
      </div>
      <div class="report-grid">
        <section class="panel"><h2 class="panel-title"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 17l6-6 4 4 8-8M15 7h6v6"/></svg> Sales</h2>
          <div class="kpis"><div class="kpi wide"><div class="value num">$18,420</div><span class="label">Revenue</span><div class="vs"><span class="delta delta-up">↑ 12.4% vs prior</span></div></div><div class="kpi"><div class="value num">312</div><span class="label">Orders</span></div><div class="kpi"><div class="value num">$59</div><span class="label">AOV</span></div></div>
          <div><div class="label">Top products</div><div class="rank">
            <div class="rank-row"><div class="rank-head"><span class="rank-name">Linen throw</span><span class="rank-value num">$4,120</span></div><div class="rank-bar"><span style="width:100%"></span></div></div>
            <div class="rank-row"><div class="rank-head"><span class="rank-name">Stoneware mug</span><span class="rank-value num">$2,980</span></div><div class="rank-bar"><span style="width:72%"></span></div></div></div></div></section>
        <section class="panel"><h2 class="panel-title"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 20v-6M10 20V9M15 20v-9M20 20V4"/></svg> Traffic</h2>
          <div class="kpis"><div class="kpi"><div class="value num">9,840</div><span class="label">Sessions</span></div><div class="kpi"><div class="value num">3.17%</div><span class="label">Conversion</span></div></div>
          <div><div class="label">Top channels</div><div class="rank">
            <div class="rank-row"><div class="rank-head"><span class="rank-name">Email</span><span class="rank-value num">3,910</span></div><div class="rank-bar"><span style="width:100%"></span></div></div>
            <div class="rank-row"><div class="rank-head"><span class="rank-name">Search</span><span class="rank-value num">2,740</span></div><div class="rank-bar"><span style="width:70%"></span></div></div></div></div></section>
        <section class="panel"><h2 class="panel-title"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 7.5L12 3l8.5 4.5v9L12 21l-8.5-4.5zM3.5 7.5L12 12l8.5-4.5M12 12v9"/></svg> Ops</h2>
          <div class="kpis"><div class="kpi"><div class="value num">6</div><span class="label">Fulfillment backlog</span><div class="vs delta delta-warn">orders open</div></div><div class="kpi"><div class="value num">1.8%</div><span class="label">Returns rate</span><div class="vs delta delta-up">steady</div></div></div>
          <div><div class="label with-dot">Low-stock SKUs <span class="alert-dot"></span></div><div class="rank">
            <div class="rank-row"><div class="rank-head"><span class="rank-name">Stoneware mug</span><span class="rank-value is-warn num">4 left</span></div><div class="rank-bar is-warn"><span style="width:26%"></span></div></div></div></div></section>
      </div>
    </div></main>
  </div>

#Settings

Cards on a two-column grid that collapses to one. Sections in a fixed order: Profile, Billing, Store connection, then Appearance and Support.

Settings

Code

  <div class="shell">
    <aside class="sidebar">
  <div class="sidebar-head">
    <a href="#" aria-label="Weekwright home"><span class="logo"><svg class="logo-mark" viewBox="0 0 28 28" aria-hidden="true"><rect width="28" height="28" rx="7"/><path d="M6.5 9.5 10 19l4-7 4 7 3.5-9.5"/></svg>Weekwright</span></a>
    <button type="button" class="sidebar-toggle" aria-expanded="false" aria-controls="sidebar-nav">Menu</button>
  </div>
  <nav id="sidebar-nav" class="sidebar-body" aria-label="Main">
    <a href="#" class="nav-item"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z"/></svg> Stores</a>
    <div class="nav-group">
      <div class="label">Your stores</div>
      <div class="nav-store"><a href="#" class="nav-store-link">Cozy Goods</a><button type="button" class="chev" aria-label="Collapse" aria-expanded="true"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div>
      <div class="nav-nested"><span class="label">Recent reports</span>
        <a href="#" class="nav-report">Sep 14–20</a>
        <a href="#" class="nav-report">Sep 7–13</a>
      </div>
      <a href="#" class="nav-connect"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Connect store</a>
    </div>
    <div class="sidebar-bottom">
      <a href="#" class="nav-item active"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h9m4 0h3M4 17h3m4 0h9M15 4v6M9 14v6"/></svg> Settings</a>
      <button type="button" class="nav-item nav-logout"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 4H5v16h5M15 8l4 4-4 4M19 12H9"/></svg> Log out</button>
    </div>
  </nav>
</aside>

    <main class="main"><div class="page">
      <header class="page-header"><div><h1>Settings</h1><div class="sub">Profile, billing, and store connection</div></div></header>
      <div class="settings-panels">
        <section class="card"><h2 class="card-title">Profile</h2><p class="card-desc">How you sign in and where we send your pack.</p>
          <div class="row-2"><div class="field"><label for="s-name">Name</label><input id="s-name" value="Alex Rivera" /></div><div class="field"><label for="s-email">Email</label><input id="s-email" value="[email protected]" readonly /></div></div>
          <div class="btn-row"><button type="button" class="btn btn-primary">Save changes</button><button type="button" class="btn btn-secondary">Change password</button></div></section>
        <section class="card"><h2 class="card-title">Billing</h2><p class="card-desc">Your plan, payment method, and invoices.</p>
          <div class="inset billing-status"><div><div class="plan">Weekwright</div><div class="detail">First pack free, then the founding price</div></div><span class="pill pill-warn">Not started</span></div>
          <div class="btn-row panel-actions"><button type="button" class="btn btn-primary">Continue to secure checkout</button></div>
          <p class="handoff-note">You’ll leave briefly to pay, then come back.</p></section>
        <section class="card full"><h2 class="card-title">Store connection</h2><p class="card-desc">The store we read your numbers from.</p>
          <div class="store-row"><div class="store-icon">C</div><div><div class="store-name">Cozy Goods</div><div class="muted num">cozygoods.example</div></div><span class="connected"><span class="pill pill-accent">● Connected</span></span></div>
          <div class="btn-row panel-actions"><button type="button" class="btn btn-secondary">Connect your store</button><button type="button" class="btn btn-danger">Disconnect store</button></div>
          <p class="handoff-note">You’ll leave Weekwright briefly to approve access, then come back.</p></section>
        <section class="card full"><h2 class="card-title">Appearance</h2><p class="card-desc">System follows your device.</p>
          <div class="segmented" role="group" aria-label="Color theme"><button type="button" aria-pressed="true">System</button><button type="button" aria-pressed="false">Light</button><button type="button" aria-pressed="false">Dark</button></div></section>
      </div>
    </div></main>
  </div>

A teal brand panel and a centered form card. It stacks on phones. The mark inverts on the teal panel.

Code

<div class="auth-shell">
  <div class="auth-brand">
    <a href="#" class="auth-brand-home" aria-label="Weekwright home"><span class="logo"><svg class="logo-mark" viewBox="0 0 28 28" aria-hidden="true"><rect width="28" height="28" rx="7"/><path d="M6.5 9.5 10 19l4-7 4 7 3.5-9.5"/></svg>Weekwright</span></a>
    <div><h1>Weekly store reports, without the spreadsheet hustle.</h1><p>Every Monday, a clear pack of sales, traffic, and ops, so store owners know what changed and what to do next.</p></div>
    <div class="auth-brand-footer">Built for indie store owners</div>
  </div>
  <div class="auth-panel">
    <form class="auth-card" onsubmit="return false">
      <h2>Log in</h2><p class="sub">Log in to see this week’s report for your store.</p>
      <div class="field"><label for="a-email">Email</label><input id="a-email" type="email" /></div>
      <div class="field"><label for="a-pass">Password</label><input id="a-pass" type="password" /></div>
      <button type="submit" class="btn btn-primary btn-block">Log in</button>
      <div class="auth-footer">New here? <a href="#">Create account</a></div>
    </form>
  </div>
</div>

#Return from checkout

A centered confirmation after the owner comes back from paying or approving access. One check, one sentence, one next step.

Billing return

Code

<div class="return-page">
  <div class="return-topbar"><span class="logo"><svg class="logo-mark" viewBox="0 0 28 28" aria-hidden="true"><rect width="28" height="28" rx="7"/><path d="M6.5 9.5 10 19l4-7 4 7 3.5-9.5"/></svg>Weekwright</span></div>
  <div class="return-card">
    <div class="check-circle"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></div>
    <h1>You’re all set</h1>
    <p class="lead">Your plan is active. Your next weekly pack lands Monday.</p>
    <div class="inset return-status"><div class="plan">Weekwright</div><div class="detail">First pack free, then the founding price</div><span class="pill pill-accent">● Active</span></div>
    <a class="btn btn-primary btn-block" href="#">Go to your stores</a>
  </div>
</div>