Patterns
How components combine to answer a question: the pulse strip, the action band, the weekly timeline, the handoff, waiting states, and money.
#Pulse strip
A row of three or four metric tiles at the top of a page. Each tile is one number, its change against the prior week, and its last five weeks as a sparkline. It answers “how are we doing?” before anything else. The grid reflows to two columns on phones.
Code
<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></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></div></div>
</div><div className="pulse">
<MetricTile label="Revenue" value="$18,420" delta={12.4} deltaSuffix=" vs prior" trend={revenue} />
<MetricTile label="Orders" value="312" delta={3.6} deltaSuffix=" vs prior" />
<MetricTile label="Sessions" value="9,840" delta={-1.8} deltaSuffix=" vs prior" />
</div>- Three or four tiles. More than four stops being a summary.
- Same order on every page: revenue, orders, sessions, then the operational count.
- If a prior week does not exist, leave the delta out. Do not show 0%.
#Action band placement
The action band sits directly under the pulse strip, before the summary. One per page. If there is no action, omit it on the store page and say No action recommended on the report.
Do
- One action, one sentence, one reason
- Amber when it needs attention, teal for good news
Don’t
- List three actions in one band
- Move the band below the timeline
- Invent an action to fill the space
#Weekly timeline
Newest first. A dashed Next pack card on top sets expectations. The latest week gets the violet node and pill. Each card: a plain headline (the first sentence of the summary), then revenue with delta, orders, and sessions. See the component.
#Handoff flow
Whenever the owner leaves Weekwright, for payment or store approval, they move through the same four steps. Each has one job.
Code
<div class="steps" style="gap: var(--space-3)">
<span class="step-pill">1 · Settings: the button</span><span class="arrow">→</span>
<span class="step-pill">2 · Handoff modal</span><span class="arrow">→</span>
<span class="step-pill">3 · Their page</span><span class="arrow">→</span>
<span class="step-pill">4 · Return confirmation</span>
</div>| Step | What it does | Words |
|---|---|---|
| 1 · Button | Starts the flow. Secondary unless the plan is not yet active. | Connect your store, Manage billing, Continue to secure checkout |
| 2 · Modal | Says what will happen, reassures three ways, offers Cancel. | “You’ll leave Weekwright briefly to…, then come back.” |
| 3 · Their page | Outside our control. Do not name the vendor on our side of the handoff. | — |
| 4 · Return | Confirms the result and points to the next step. | “You’re all set.” |
See the modal in Feedback and overlays and the return card in Page templates.
#Waiting, empty, failed
| State | Show | Pill |
|---|---|---|
| Connected, no pack yet | Status panel: “Queued · first pack Monday”, expected date | Waiting for first report |
| Generating | Status line “Generating · almost ready” | generating |
| Ready | Pulse strip, action band, summary, timeline | ● Connected |
| Failed | A plain sentence on what happened and what to do | Failed |
| Loading | “Loading stores…”, nothing more | — |
Waiting states stay honest: one line of status, no placeholder charts filled with sample numbers.
#Money and currency
- Store money in minor units and format it for display. Whole amounts have no decimals: $18,420. Others have two: $59.50.
- Never sum across currencies. Show each separately and say so where totals appear.
- Money is a mono, tabular figure, always.
- Prices shown to customers are the founding price and come from one place in the app. Do not retype them.
#Responsive behavior
- Metric tiles reflow from four to two to one column, by content width.
- The report’s three panels stack below 960px.
- The sidebar becomes a top bar with a Menu button below 960px. There is still one navigation landmark.
- Buttons never shrink below 40px tall. Give touch targets room.