TechnicalStats band built from real numbers with sources
Act as a designer who has been burned by fake stats. Build a stats band for {{business_name}} in this style: {{visual_style}}.
First, ask me for 3 or 4 numbers and the source of each (analytics, database, survey, third-party report) with its date. If I can't source one, drop it and suggest provable alternatives: years in business, median response time, jobs completed, average rating with review count.
Each stat: the number, a short label in plain words ("median reply time"), and a footnote marker, a real link with a visible focus ring, pointing to a sources line below the band ("Bookings from our system, January to June 2026").
Formatting:
- Intl.NumberFormat in the visitor's locale; compact notation only above 10,000 ("12.4K")
- tabular-nums, the same precision across stats, units set close to the number
- no "+" unless the number is a real floor you can defend
Layout: 360: 2 by 2 grid; 768: 4 in a row if they fit, else 2 by 2; 1280: 4 columns separated by 1px dividers, max width 1100px. Padding 48 / 64 / 80px. Numbers 40 / 48 / 64px, weight 700, tracking -0.02em; labels 14 to 16px at 4.5:1.
Semantics: a dl, or a list with each number and label read together. Screen readers hear "4.9 out of 5 average rating", not "4.9" alone.
Count-up (optional): runs once when in view, 800ms ease-out, and the real final value is in the HTML from the start, so no-JS readers and crawlers see it. Under prefers-reduced-motion, show the final value.
States: long labels wrap to 2 lines, centered under their number; a stat older than 12 months shows its as-of date. If data comes from the database, cache it and fall back to the last good value, never zero.
Avoid: "10,000+ happy customers", uptime claims with no status page, icons in gradient circles above each number, counters that restart on every scroll.