## 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/beehiiv-com/23eb8ac3-d7aa-449f-95ad-92bcd925810d-1789067455-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/beehiiv-com/23eb8ac3-d7aa-449f-95ad-92bcd925810d-1789067406-full.webp
- Component on Kage: https://kage.design/component/beehiiv-stats

## Before you start
Ask what the user's product is, who it is for, and what brand personality, typefaces, colours, and content they want to use. Then apply the principles below to create an original stats-introduction section for that product—not a copy of the reference.

## Build this section
Create a dark, editorial introduction to a statistics or proof section. It should feel like a deliberate pause after a preceding testimonial, story, or content block, then clearly announce that the next section is evidence-led.

### Layout and alignment
- Use a full-width section with a deep near-black navy background, approximately `#07051C`.
- Constrain content to the same responsive max-width as the rest of the page, with comfortable horizontal gutters: roughly 32px on desktop and 20px on mobile.
- Leave substantial vertical breathing room above the heading—approximately 180–260px on desktop, reduced responsively to 96–144px on mobile. This whitespace is intentional and should create anticipation.
- Center the heading horizontally and place it near the lower portion of the section, with enough bottom padding to separate it from the next content block.
- If this follows a testimonial carousel, allow the preceding card and its controls to sit above this section with clear separation. Controls should not compete with the headline.
- Make the section height responsive rather than fixed; preserve the visual pause without creating excessive empty space on small screens.

### Typography hierarchy
- Use one prominent, short statement as the focal point—an original phrase appropriate to the user's product, such as a declaration that introduces measurable outcomes.
- Set it in bold or extra-bold display typography with tight tracking and compact line-height. Aim for approximately 44–64px on desktop, scaling to 30–40px on mobile.
- Use uppercase only if it suits the user's brand; otherwise preserve the same emphatic hierarchy with sentence case.
- Keep the heading to one line on wide screens where possible, but allow a balanced two-line wrap on narrow screens. Use `text-wrap: balance` when available.
- Use a high-contrast off-white such as `#F7F6F2`, not pure white, and avoid adding supporting copy unless the product genuinely needs context.

### Spacing, colour, and surface treatment
- Keep the background visually quiet: no gradients, illustrations, decorative patterns, or competing colour fields.
- Use off-white text against the deep navy background for strong but slightly softened contrast.
- If a boundary is needed between adjacent sections, use a very subtle navy-purple line around `#191631`; do not box in the heading.
- Maintain a generous vertical rhythm and let empty space do most of the visual work.

### Interaction and responsive behaviour
- This section can be static, but it should transition naturally from any preceding interactive testimonial or carousel.
- If carousel controls are present above it, use small circular outline buttons with a transparent background, a subtle border around `#302C48`, muted icon strokes, and a modest hover state that lightens the border and background.
- Ensure keyboard focus states are visible and accessible, and keep the heading readable at all viewport widths.
- Respect reduced-motion preferences; do not animate the headline unless a restrained fade or upward reveal is genuinely appropriate.

## Never
- Never reuse the reference's logos, product names, brand names, exact copy, testimonial names, or page-specific wording.
- Never copy the reference's typeface, layout measurements, or visual treatment exactly; adapt the principles to the user's brand.
- Never include illustrations, photographs, avatars, or other imagery from the reference.
- Never invent statistics or claims that the user's product cannot substantiate.
- Never sacrifice responsive readability for a single-line desktop composition.