SaaS Metrics Section — AI image prompt

SaaS Metrics Section - Stills

Style DNA

Browser-frame framing. The section is a near-white page floating on a soft neutral gray surround inside a minimal browser frame: three small traffic-light dots, one rounded address bar showing an invented https domain, rounded outer corners. The chrome stays quiet - no tabs, no bookmarks, no extension icons.
Serif + sans contrast. Headline and stat numbers set in an elegant high-contrast serif display; kicker labels, sublines, and explainers in a neutral gray geometric sans. This pairing is the style's signature and is non-negotiable.
Kicker pill anatomy. A white pill with a hairline border, containing a small colored accent square followed by a short uppercase letter-spaced label ("SECURITY IMPACT" energy). One kicker centered above the headline; each stat gets its own simpler kicker - the uppercase word on a pale accent background, no square.
Header stack. Kicker pill, then a serif display headline in near-black over two lines, then one gray sans subline. All centered, all breathing.
Stat trio rhythm. Exactly three stats in the right column, each reading top-down: accent kicker pill / big serif number / one gray explainer line, with a thin hairline separating stats. Numbers stay short and typographic: "98.4%", "<48 hours", "5x fewer".
Product-collage panel recipe. A pale blue field with a halftone dot texture band. On it: one dark navy anchor card with a white check icon, the panel's biggest number, and a short label; one or two portrait photo cards (square-ish, rounded, neutral expressions); a white checklist card with a title and three rows of green check dots beside gray placeholder bars; one or two small rounded icon chips; thin dashed connector lines joining the cards. Cards overlap slightly with soft shadows.
Whitespace discipline. The page breathes - wide margins, a balanced two-column body (panel left, stats right), nothing touching the browser bar or page edges.

Subjects & framing

Best subjects: SaaS products whose value is provable in numbers - compliance, QA, security review, support SLAs, hiring, monitoring, auditing. The portrait cards stand in for the people involved (customers, reviewers, candidates).
Aspect ratios: 4:3 or 16:9 for the full section. The collage panel alone crops to 1:1 or 4:5; the stat column alone to 4:5 or 9:16. Choose one ratio per plate purpose and keep it across variants.
Stats are invented but must stay believable: no 100%, no "#1", no awards, no revenue claims. Explainers are one factual sentence-case line ("Critical issues caught before release"), never marketing copy.
Safe areas: the anchor card's number is the largest number in the panel; dashed connectors touch card edges, never text; nothing crosses the browser bar or the column gutter.

Still set

A set of independent standalone images - never one gridded sheet or split-screen board:

Full section - browser frame, centered header stack, collage panel left, stat trio right, hairlines in place.
Collage panel alone - the pale blue panel full-bleed at 1:1 or 4:5, halftone band, anchor card, portraits, checklist card, chips, connectors. No browser chrome, no header.
Stat column alone - the three-stat rhythm on the plain page background with its hairlines, cropped tall. Locks pill, number, and explainer typography.
Dark-mode variant - the full section flipped: near-black page, off-white serif type, panel field deepened to slate blue, anchor card inverted to white with dark text, the accent family kept.

HTML/CSS route

This style composes almost entirely in code:

Type: serif from Google Fonts (Fraunces, Source Serif 4, or Playfair Display) for headline and numbers; Inter for kicker, subline, and explainers, with letter-spacing: .08em; text-transform: uppercase; on kickers.
Halftone band: background-image: radial-gradient(rgba(70,110,180,.25) 1.5px, transparent 1.6px); background-size: 14px 14px; faded to a band with a linear-gradient mask.
Dashed connectors: empty positioned divs with border-left/border-top: 1.5px dashed rgba(70,110,180,.4) and one rounded corner where the line turns.
Hairlines: border-top: 1px solid rgba(0,0,0,.08) between stats; the dark anchor card, kicker pills, and checklist rows are plain flex layouts.
Browser frame: a rounded container with a flex bar - three small dot spans and a pill-shaped address div.
Only the portrait photos need real photography or an image model; everything else is markup, which keeps stats and labels editable per campaign.

Failure modes

Sans-serif headline or sans stat numbers - losing the serif contrast kills the style.
More or fewer than three stats; multi-line explainers; two pills stacked on one stat.
Implausible numbers: 100%, "#1", awards, unverifiable revenue claims.
A different accent color per stat pill - the trio shares one pale accent family.
Halftone flooding the entire panel; solid, thick, or arrowheaded connectors.
Charts, graphs, or dashboard screenshots in the panel - the recipe is cards plus connectors only.
Heavy browser chrome (tabs, bookmarks, extension icons); real domains, brands, or logos.
A colored page background in the light version; harsh shadows; text crossing the browser bar.
Panel and stat column disagreeing on numbers - the anchor stat must reappear in the trio.

Copy-ready prompt

Copy the block as-is and paste your subject at the end. The colors named in it are this style's defaults - swap any of them for your own.

A SaaS website metrics section rendered as a still, in an editorial
marketing style. A near-white page floats on a soft neutral gray surround
inside a minimal browser frame - three small traffic-light dots, one rounded
address bar showing a generic https address, rounded outer corners, no tabs,
bookmarks, or extension icons. Centered header stack, all breathing: a white
kicker pill with a hairline border holding a small accent-colored square and
a short uppercase letter-spaced sans label, then an elegant high-contrast
serif display headline in near-black over two lines, then one gray
geometric-sans subline. The body sits in two balanced columns. Left: a
product-collage panel on a pale blue field with a halftone dot texture band -
one dark navy anchor card with a white check icon, the panel's biggest
number, and a short label; one or two square-ish rounded portrait photo cards
with neutral expressions; a white checklist card with a two-word title and
three rows of green check dots beside gray placeholder bars; one or two small
rounded icon chips; thin dashed connector lines joining the cards, which
overlap slightly with soft shadows. Right: exactly three stats separated by
thin hairlines, each reading top-down as an uppercase kicker word on a pale
accent pill, a big elegant serif number, and one gray sans explainer line in
sentence case. Numbers stay short, typographic, and believable - never 100%,
never "#1", no awards or revenue claims - and the anchor card's number
reappears as one of the three stats. Wide margins, generous whitespace,
nothing touching the browser bar or page edges; serif for headline and
numbers, sans for everything else. Palette: near-white page on a soft neutral
gray surround, near-black serif type, neutral gray sans, indigo accent square
in the kicker pill, pale blue stat pills and panel field, dark navy anchor
card with white type, green check dots (default palette - replace any of
these with your own colors). 16:9 landscape; explainers are one line each,
checklist rows stay placeholder bars, and no real domains, brands, or logos
appear anywhere.

Subject: [PASTE YOUR HEADLINE + the three stats and what the collage panel should show - one or two sentences]

Example subject

Headline "Hiring outcomes you can measure" - stats: 97.8% background-check coverage, under 48 hours to clear a candidate, 5x fewer manual escalations; panel anchored on the coverage number with a screening checklist and recruiter portraits.