Price Difference - Everyday Interface Patterns

A static price difference readback shows $12/month, $29/month, +$17/month, and Estimate only status.

Program

Price readbacks should make the comparison visible without pretending to calculate invoices, taxes, prorations, or charges.

price_difference_readback.html

Visuals: captured from real browser rendering

<section class="price-difference" aria-labelledby="price-difference-title"><h2 id="price-difference-title">Price difference readback</h2><dl>
  <div><dt>Current price</dt><dd>$12/month</dd></div>
  <div><dt>New price</dt><dd>$29/month</dd></div>
  <div><dt>Difference</dt><dd>+$17/month</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Estimate only</span></dd></div></dl>
  <p class="note">Static price difference only; no payment service, billing API, invoice service, tax engine, proration engine, storage, route, API, network, script, or live charge runs.</p></section>
<style>
  .price-difference { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .price-difference dl { display: grid; gap: 8px; margin: 0; }
  .price-difference dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .price-difference dt { color: #475569; }
  .price-difference dd, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dbeafe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the price difference readback.
The section is labelled by its visible heading.
Show the current price.
The current price is exact pinned data.
Show the new price.
The new price is exact pinned data.
Show the difference.
The difference is exact pinned data.
Render the estimate status.
The status badge says this is only an estimate.
Check price honesty.
Current price, new price, difference, status, and no live charge.

price readback The section heading names the price difference surface.

price rows Current price, New price, Difference, and Status values are exact pinned data.

no live charge The lesson should not imply payment services, billing APIs, invoice services, tax engines, proration engines, storage, routes, APIs, networks, scripts, or live charges.