## 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/fly-io/55088b40-21c4-4b5b-a67c-8a1494f33e2d-1789073898-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fly-io/55088b40-21c4-4b5b-a67c-8a1494f33e2d-1789073866-full.webp
- Component on Kage: https://kage.design/component/fly-stats

# Build an editorial stats section for the user's product

## Before you start
Ask the user what their product is, who it is for, and what their brand identity looks like (colours, type, tone, and existing UI conventions). Then apply the principles below to create an original version for that product—not a copy of any reference.

## Purpose
Design a proof-point section that combines a short product narrative on the left with a compact grid of four measurable outcomes on the right. It should communicate confidence and scale through editorial restraint rather than cards, icons, charts, or dashboard decoration.

## Design language

### Layout and alignment
- Use a centered content container, approximately 1100–1200px wide, with generous horizontal gutters.
- Create a desktop two-column composition: a wider narrative column around 48–52% of the width and a metrics area around 42–48%.
- Align the top of the narrative with the top row of the metrics grid.
- Arrange metrics in a 2×2 grid. Each metric occupies a clearly defined cell; use thin vertical dividers between metric columns and a subtle horizontal divider between rows only if needed.
- Keep the grid open and airy: do not place each metric inside a rounded card or heavy panel.
- On smaller screens, stack the narrative above a single-column metric list or a responsive two-column grid if the content remains legible. Preserve consistent left alignment.
- Let the section breathe with approximately 96–140px of vertical padding on desktop and 56–80px on mobile.

### Typography hierarchy
- Use the product’s display typeface for the section heading if one exists; otherwise use a warm editorial serif or a distinctive high-contrast display face. Use the product’s sans-serif for supporting copy and labels.
- Heading: approximately 44–64px, line-height 0.98–1.08, with a confident but compact wrap.
- Narrative body: approximately 20–25px, line-height 1.35–1.45; constrain the measure to roughly 28–34em.
- Metric value: approximately 36–48px, line-height 1, medium or semibold weight. Make these the strongest visual elements in the grid.
- Metric label: approximately 15–17px, line-height 1.35–1.45, using a muted colour. Keep labels short and descriptive.
- Use a clear hierarchy: heading, narrative, metric values, then metric labels. Avoid all-caps unless it is native to the user’s brand.

### Colour
- Start with a warm, near-white background around #FAFAF8 or the user’s surface colour.
- Use a near-black text colour around #17151A for headings and primary copy.
- Use a muted slate/plum grey around #666473 for body copy and labels.
- Choose one brand-derived accent for metric values; a vivid violet around #7138C8 is an example, but derive the actual colour from the user’s brand.
- Use a very light neutral divider around #D8D5DF with sufficient contrast against the background.
- Keep the palette quiet: the accent should appear mainly in the metric values, not across every element.

### Borders, radius, and surfaces
- Prefer no outer border and no shadow for the stats section itself.
- Use 1px divider rules with low-contrast neutral colour; keep them crisp and full-height within the metrics area.
- If the section needs a containing surface, use a barely tinted background and a subtle 1px border, with a restrained radius around 4–10px. Do not use floating glass cards.
- Maintain consistent cell padding, approximately 24–32px horizontally and 24–28px vertically.

### Interaction and accessibility
- This section is primarily informational and should not require interaction.
- If metrics link to documentation, case studies, or a deeper analytics page, make the entire metric an accessible link and add a restrained hover state: accent-colour text, a slightly stronger divider, or a small underline—never a dramatic lift or scale effect.
- Use semantic headings, a meaningful section label if needed, and readable contrast. Ensure the metric value is not the only place where meaning is conveyed.
- Respect reduced-motion preferences and avoid animated number counters unless the user explicitly asks for them.

### Content guidance
- Use four concise, verifiable metrics that support the product’s main promise: speed, reliability, reach, capacity, adoption, or efficiency.
- Give every number a short qualifier so it is understandable without surrounding context.
- Keep the narrative focused on the product’s durable advantage, not generic marketing filler.
- Use the user’s actual terminology and brand voice; do not assume infrastructure, developer, or enterprise language.

## Never
- Never copy the reference’s logos, product names, brand terms, or exact marketing copy.
- Never reuse the reference’s illustrations, imagery, mascots, icons, or decorative artwork.
- Never reproduce the exact metric values or labels from the reference; invent or request product-appropriate proof points.
- Never turn the section into a dense analytics dashboard with charts, badges, gradients, or excessive controls.
- Never use arbitrary colours, typefaces, or spacing that conflict with the user’s product brand.
- Never sacrifice responsive layout, keyboard accessibility, semantic structure, or text readability for visual similarity.