## 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/stowdrop-app/2ca5946d-e8e0-4e0c-8652-e4352b3d8fe1-1789067824-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/stowdrop-app/2ca5946d-e8e0-4e0c-8652-e4352b3d8fe1-1789060554-full.webp
- Component on Kage: https://kage.design/component/stowdrop-stats

## Before you start
Ask the user what their product does, who it is for, and what their brand personality and visual identity are. Then apply the principles below to create an original stats-or-feature section for that product—not a replica of this reference.

## Design language

Build a dark, editorial product section that communicates several meaningful facts, capabilities, or product outcomes through a strong narrative block and a supporting card grid. The section should feel like a considered product story rather than a generic dashboard.

### Layout and alignment
- Use a full-width near-black section with a centered content container, approximately 1120–1240px wide.
- Organize the content as a two-column composition: a left narrative column around 40% wide and a right feature/stat grid around 60% wide.
- Align the top of the narrative with the top of the grid. Keep the left column visually quieter so the right-side cards can carry detailed proof points.
- Begin the section with a small uppercase eyebrow and a thin horizontal rule extending across the remaining container width.
- Place the main heading below the eyebrow with a maximum width of roughly 440px. Use a 2×2 grid of cards on the right, with an optional wide card spanning both columns for a highlighted stat or product snapshot.
- Preserve generous vertical breathing room: roughly 96–144px of section padding, 40–64px between the eyebrow and content, and 16px between cards.
- On smaller screens, stack the narrative above the cards. Let cards become one column, while retaining the eyebrow rule and generous spacing.

### Typography hierarchy
- Use a clean contemporary sans-serif with excellent readability at large sizes; a restrained grotesk or neo-grotesk is appropriate.
- Set the eyebrow in uppercase, small monospace or tightly tracked sans-serif lettering at approximately 10–12px, with increased letter spacing.
- Set the main heading large and compact—roughly 48–60px desktop, 38–46px mobile—with a tight line height around 0.95–1.05. Use a medium or semibold weight, not an overly heavy display face.
- Use supporting copy at 16–18px with a 1.55–1.7 line height and a muted tone. Keep paragraph measure around 38–46 characters.
- Card titles should be around 16–18px, semibold, with a line height near 1.3. Card descriptions should be 14–16px, relaxed line height, and clearly subordinate.
- If showing numerical stats, make the number the strongest element in its card at roughly 32–48px, then add a short label and explanatory sentence.

### Colour
- Page and section background: approximately `#080909` or `#0B0C0D`.
- Card surface: approximately `#131516`.
- Primary text: soft white around `#F0F1F1` rather than pure white.
- Secondary text: cool grey around `#929496`.
- Rules and card borders: subtle charcoal around `#292C2D`; keep contrast low but visible.
- Accent colour: warm orange around `#E8753F` for the eyebrow, small icons, active details, links, or selected stat emphasis.
- Use the accent sparingly. The section should remain predominantly monochrome.

### Borders, radius, and surfaces
- Use 1px borders with low-contrast charcoal so cards are defined without looking glossy.
- Give cards a modest radius around 14–16px; avoid pill-heavy or highly rounded UI.
- Use consistent internal padding around 24px desktop and 20px mobile.
- Avoid shadows, gradients, glassmorphism, and decorative background effects. The hierarchy should come from spacing, type, rules, and tonal contrast.
- Keep card heights visually balanced. Allow text to wrap naturally rather than truncating it.

### Content and interaction
- Each card should express one concrete product benefit, measurable outcome, capability, or proof point. Pair a concise title with one or two sentences of context.
- Add a small line icon or typographic marker only when it supports the meaning of the card. Use a simple outline style in the accent colour; do not let icons become illustrations.
- If the section contains links, style them as understated accent-colour text links with a clear hover state such as brighter colour or a subtle underline.
- If cards are interactive, provide a restrained hover treatment: slightly lighter surface, brighter border, and a small upward or accent shift. Make the entire card keyboard accessible and preserve visible focus states.
- Respect reduced-motion preferences and ensure the layout works without animation.
- Make the section accessible: semantic heading order, sufficient contrast, meaningful link labels, responsive text sizing, and no information conveyed by colour alone.

## Never
- Never copy the reference’s logos, product names, brand names, or proprietary terminology.
- Never reuse the reference’s exact headline, labels, card copy, statistics, or content structure word for word.
- Never use the reference’s illustrations, screenshots, icons, or imagery; create neutral icons or omit them.
- Never reproduce the reference as a pixel-for-pixel clone. Adapt the layout principles, hierarchy, spacing, and visual restraint to the user’s own product and brand.
- Never invent specific performance claims or statistics unless the user provides them.