mercury.com
Design analysis
A centered statement about durability leads into four large metrics with small labels, creating a concise credibility checkpoint.
Prompt preview
## Reference images Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language. - Component: https://kage-design-assets.t3.tigrisfiles.io/components/mercury-com/99bed992-0157-4d82-b4d6-a0016ce1a166-1789141945-7.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mercury-com/99bed992-0157-4d82-b4d6-a0016ce1a166-1789138980717-full.webp - Component on Kage: https://kage.design/component/mercury-stats ## Before you start Ask what the user's product, audience, and brand are, then apply the following principles to that product rather than copying the reference. Build a dark statistics band with a centered two-line statement above a four-column metric row. Make the numbers visually dominant at 28–40px, use concise labels below each, and separate columns with ample whitespace rather than heavy borders. Add subtle eyebrow text if useful. Use white numbers, muted gray labels, and one accent color such as #766cff for highlights against #171721. Ensure metrics wrap gracefully into a 2×2 grid on small screens and provide accessible text equivalents if animated. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage