Library · Patterns

Patterns

Composed recipes for the layouts every page needs: page headers, metric grids, chart cards, toolbars, settings forms, loading and empty states. Copy the whole block, then swap in real data.

Page header

One per page: eyebrow (mono, machine context), Fira Sans title, Inter lede, right-aligned actions.

Tuesday · Campaigns

Campaigns

Every send your agent has run, queued or drafted.

html

<header class="page-head">
  <div class="page-head-main">
    <div class="eyebrow">Tuesday · Campaigns</div>
    <h1>Campaigns</h1>
    <p class="lede">Every send your agent has run, queued or drafted.</p>
  </div>
  <div class="page-head-actions">
    <button class="btn">Export</button>
    <button class="btn btn-primary">New campaign</button>
  </div>
</header>

Metric grid + chart card

The standard analytics top: 4 stat cards (one selectable) above a chart card with legend footer. This replaces the three divergent implementations previously found across studio pages.

Emails sent

Last 7 days · all campaigns

Emails sent 10,580

src: events_hourly

html

<div class="stat-grid">
  <button class="stat-card selected" aria-pressed="true">…</button>
  <button class="stat-card">…</button>
  …
</div>
<div class="chart-card">
  <div class="chart-card-head">
    <div><h3>Emails sent</h3><p>Last 7 days</p></div>
    <div class="chart-card-controls"><div class="segmented">…</div></div>
  </div>
  <div class="chart-host" id="chart"></div>
  <div class="chart-card-foot">
    <div class="chart-legend">…</div>
    <span class="mono text-dim">src: events_hourly</span>
  </div>
</div>

Settings form

Card with head + form body + footer actions. Fields use .field; related pairs use .field-row; the save bar is right-aligned with a mono note on the left.

html

<form class="card">
  <div class="card-head">
    <div class="card-head-main">
      <h3 class="card-title">Sending domain</h3>
      <p class="card-sub">DNS records required before sends are enabled.</p>
    </div>
    <span class="badge badge-warn"><span class="dot"></span>Pending</span>
  </div>
  <div class="card-body">
    <div class="field">…</div>
  </div>
  <div class="card-foot">
    <span class="mono">last checked 4 min ago</span>
    <span class="cluster"><button class="btn">Verify DNS</button><button class="btn btn-primary">Save</button></span>
  </div>
</form>

Loading composition

Skeletons mirror the layout they replace — stat grid first, then chart, then table rows.

html

<div class="stat-grid">
  <div class="stat-card"><div class="skeleton skeleton-text"></div>…</div>
</div>
<div class="skeleton skeleton-chart"></div>

Alert stack

Page-level alerts sit directly under the page header, most severe first, one per issue.

✕Sends pausedDKIM verification failed for mail.example.com.

⚠84% of email quota usedUpgrade or waits until the cycle resets in 9 days.

html

<div class="stack">
  <div class="alert alert-danger">…</div>
  <div class="alert alert-warning">…</div>
</div>

Agent activity row

The machine's voice in the UI: mono timestamp, mono tool name in accent, Inter description, mono meta. Used in the activity stream and audit logs.

09:32

campaigns.send

Queued 12,408 emails for “Spring launch — EU”.

4m 12s · ses-eu-1 · id cmp_01J9…A4

09:31

segments.estimate

Estimated 3,102 contacts for rule “opened_last_30d”.

212ms · confidence 0.94

09:28

templates.render

Render timed out for contact #48,112 — retried successfully.

46ms · attempt 2/2

html

<div class="agent-row">
  <span class="t mono">09:32</span>
  <div>
    <span class="tool mono">campaigns.send</span>
    <div class="desc">Queued 12,408 emails for “Spring launch — EU”.</div>
    <div class="meta mono">4m 12s · ses-eu-1 · id cmp_01J9…A4</div>
  </div>
</div>