Kage Design logo kage
sponkly.com
Sponkly stats component

Design analysis

A compact four-column strip quickly communicates measurable product benefits beneath the hero.

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/sponkly/bd3f409f-e542-449e-8bba-263211d90a1c-1792735453-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/sponkly/bd3f409f-e542-449e-8bba-263211d90a1c-1792735346298-full.webp
- Component on Kage: https://kage.design/component/sponkly-stats

## Before you start
Ask me what measurable outcomes matter for my product and what brand system to use. Then build an original stats strip using the rules below.

Create a four-column horizontal stats band with large, highly legible values and short explanatory labels. Use a white or very lightly tinted background, thin #EEEEEE dividers, #202020 values at roughly 20–24px, and muted #777777 labels at 10–12px. Keep each cell equal width, vertically centered, and separated with generous whitespace rather than heavy card styling. Use a max-width container with a subtle outer border and 8–12px radius if a contained treatment is needed.

On mobile, convert the row into a two-column grid. Values should be exposed as text for accessibility and not depend on animation.

### Never
- Never copy the reference numbers, labels, product name, logos, or claims.
- Never use reference imagery or illustrations.

More components