One number, with a delta

Build brief for a coding agent. Rebuild this piece in the reader’s stack. If they haven’t said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don’t “improve” them. When a kit is locked, map colours onto the kit tokens. Keep one number at display size.

What it is

One metric for an ops home. The page is warm paper, with a wide empty field around a single figure. The label “Runs today” is 12px. The answer is 46, set in mono at 72px. Under it, a soft green badge reads +8, then the words “more than yesterday”. A sentence says Friday closed at 38. One primary button, “See the week”, sits under that sentence. There is no sparkline in this piece, no row of four equal cards, and no chart palette. If the screen needs several figures, only one of them uses this display size. The others step down. This is the hierarchy, not a widget skin.

Reference behaviour

1. The first frame shows the label, 46, the +8 badge, the comparison sentence, and the button “See the week”.
2. The button is the only control. Clicking it sets the label to “Week opened” and disables the button.
3. The number does not animate, count up, or flip.
4. The badge is not a button.
5. Nothing else is on the page. Do not add a chart, a table, or a second metric to make the frame feel full.
6. Focus ring is 2px --focus, offset 2px, on the button.
7. Disabled button opacity is 0.55. It stays in place.

Structure

padding 48px 64px
Runs today          12px label
46                  72px mono
[+8] more than yesterday
Friday closed at 38. The yard is ahead of that close.
[ See the week ]    36px primary

• The label is a paragraph. The number is the only h1.
• The delta row is a paragraph: a b badge, then the words.
• The explanation is a paragraph, max-width 360px.
• The button is under the explanation, not in a corner of a card.
• There is no card. The paper is the surface. A card around this number makes it look like one tile in a row of tiles.

Tokens

:root {
  --bg: #f6f4ef;
  --ink: #161513;
  --ink-2: #5a554c;
  --ink-3: #8a847a;
  --primary: #1f4d3a;
  --primary-ink: #f6f4ef;
  --success: #1f4d3a;
  --success-soft: #e7f2ec;
  --focus: #1f4d3a;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

A negative delta uses --danger on --danger-soft (#9b2c2c on #f8e8e6). This frame is the positive case. Do not show both on one screen.

Typography

Role	Family	Size	Weight	Tracking	Colour
Label	sans	12px	500	0.04em	--ink-2
Answer	mono	72px	500	-0.04em	--ink
Delta words	sans	14px	400	0	--ink-2
Badge	mono	12px	500	0	--success
Explanation	sans	14px	400	0	--ink-2
Button	sans	14px	500	0	--primary-ink

The answer line-height is 1. This demo uses mono. When the locked pairing sets numbers to display, the amount uses that display face instead. Do not force mono onto a pairing whose CSS keeps .num off mono.

Motion

None. The number is already the answer when the screen opens. A count-up delays the decision. Reduced motion has nothing to remove.

Thing	Trigger	What changes
Button	click	label becomes “Week opened”, disabled, opacity 0.55

States

• Button resting: fill --primary, height 36px, radius 2px, padding 0 14px.
• Button hover: keep the fill. Do not invent a second green.
• Button focus-visible: 2px outline, offset 2px.
• Button disabled: opacity 0.55, label “Week opened”.
• Badge: height 22px, padding 0 8px, radius 99px, background --success-soft.
• There is no selected state. There is no empty state inside this piece. If the count failed to load, use the failed-load piece instead of a dash in the 72px slot.

Accessibility

• The number is the h1. The label is not a heading.
• The badge text “+8” is in the reading order before “more than yesterday”, so the sentence is heard as “+8 more than yesterday”.
• The button name is “See the week”, then “Week opened” when disabled.
• Hit target is the 36px button. Do not make the number clickable as a second target.
• Contrast: #161513 on #f6f4ef, #1f4d3a on #e7f2ec, and #f6f4ef on #1f4d3a all clear 4.5.
• Do not encode the delta by colour alone. The words “more than yesterday” carry the direction. A negative frame says “fewer than yesterday”.

Responsive rules

• At 1280 the padding is 48px 64px and the number is 72px. The rest of the frame stays empty on purpose.
• At 1024, keep 72px.
• At 768, padding becomes 24px. The number may drop to 56px. The explanation stays within 360px.
• Below 640, the number drops to 48px and the button becomes full width, height 44px. Still one number. Do not stack three more metrics under it to fill the phone.

Acceptance checklist

• The first frame shows 46 at 72px mono.
• The label “Runs today” is 12px and sits above the number.
• The badge reads +8 on #e7f2ec with #1f4d3a text.
• The words “more than yesterday” sit beside the badge, in --ink-2.
• The sentence “Friday closed at 38. The yard is ahead of that close.” is present, max-width 360px.
• One button, “See the week”, height 36px, primary fill.
• Clicking the button sets “Week opened” and disables it at opacity 0.55.
• No sparkline, no second number at 72px, no card around the figure.
• The number does not count up.
• Focus ring is 2px, offset 2px.
• The number is the only heading.

Implementation notes

The hierarchy is the point. If you add a chart, it goes under this block as a separate piece, and it does not get a second 72px number. If you need yesterday’s 38 on the same screen, it stays inside the sentence. It does not become a second h1.

h1 {
  margin: 0;
  font-family: var(--mono);
  font-size: 72px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}
.delta b {
  height: 22px;
  padding: 0 8px;
  border-radius: 99px;
  background: var(--success-soft);
  color: var(--success);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
}

A negative delta, when the product has one, replaces the badge colours and the words:

• Badge background #f8e8e6, text #9b2c2c, label “−8”.
• Words: “fewer than yesterday”.
• Do not use a red number at 72px. The number stays --ink. Only the badge carries the direction.

Common mistakes:

• Four equal KPI cards in a row.
• A count-up animation on 46.
• A sparkline glued to the right of the number. That is charts-kpi-spark-row, a different piece.
• Putting the delta in a larger size than the label and competing with 46.
• Colouring the 72px number green or red.
• A card, a shadow, and an icon above the label.
• Two buttons: “See the week” and “Export”.
• An arrow icon with no words.
• A second sentence that starts a marketing claim.
• Centering the number in the viewport. It is left-aligned with the page padding, like the rest of the yard desk.

Where it sits in a product:

1. It is the first thing on an ops home when the decision is “how heavy is today”.
2. The next action is “See the week”, which opens chart-bar-week or chart-line-range.
3. Only one metric on the view uses 72px. A second figure, if they asked for it, is 28px or smaller.
4. People, billing, and the table are other screens. They do not sit beside this number.
5. The button is the primary action of this view. The chart screen has its own primary action.
6. Do not repeat 46 in a table caption under the number.
7. The comparison is yesterday, named in words. Do not add a percent the reader has to interpret.
8. Friday’s 38 is context, in the sentence, at 14px.
9. If today’s count is zero, this piece is the wrong one. Use the empty list.
10. If today’s count failed to load, use the failed-load piece. Do not render ”—” at 72px.
11. The page does not need a title called “Dashboard” above the label. “Runs today” is the where and the what.
12. Keep the credit line on the token block when you copy these colours into a product.

Rebuild order:

1. Set the paper, the sans, and the mono.
2. Place the 12px label.
3. Place the 72px number.
4. Place the badge and the comparison words on one row.
5. Place the one-sentence explanation at max-width 360px.
6. Place the primary button.
7. Wire the button to “Week opened” and disabled.
8. Check the number is the largest type, and that the rest of the frame is empty.
9. Confirm a negative delta is described, not drawn, on this frame.
10. Map the greens onto the locked theme if a kit is on. Do not keep #1f4d3a once a theme is locked.