## 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-8.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-feature-grid-4

## Before you start
Ask what the user's product is, who it is for, and what its brand personality and visual identity are. Then apply the principles below to create an original feature section for that product—do not reproduce the reference literally.

## Build this section
Create a dark, editorial feature section that introduces one product capability on the left and explains four related benefits in a two-by-two card grid on the right. The section should feel like a carefully typeset product page rather than a generic SaaS dashboard.

### Layout and alignment
- Use a wide centered content container with a maximum width of roughly 1180–1240px and generous horizontal padding of 40–56px on desktop.
- Add a small uppercase eyebrow at the top-left, followed by a thin horizontal rule extending across the remaining width. Use the eyebrow as a section label, not as a large heading.
- Below the rule, create a two-column layout: the introductory column should be approximately 45% wide and the card area approximately 55% wide.
- Align the top of the introductory heading with the top of the first row of cards.
- Give the card area a two-column grid with equal-width cards, consistent gaps of 16–18px, and two rows.
- Keep the left column intentionally quieter: heading, explanatory paragraph, a small contextual metadata line, and one text link are enough.
- On screens below about 800px, stack the introduction above the cards, then collapse the cards to one column while preserving clear grouping and rhythm.

### Typography hierarchy
- Use a clean modern sans-serif with slightly tight display tracking; use the product's own font if available.
- Make the main heading large and compact, around 48–58px on desktop with a line height near 0.98–1.05. Limit it to a few short lines.
- Use near-white for the heading and normal body text around 16px with a 1.55 line height.
- Make supporting copy visibly quieter than the heading using a medium gray.
- Set the eyebrow and metadata in small uppercase or monospace-like text with increased letter spacing, around 10–12px.
- Card titles should be semibold, around 16px, and card descriptions around 15–16px with a relaxed 1.5 line height.
- Use sentence case for titles and avoid making every element feel like a button.

### Colour and surfaces
- Use a near-black page background, approximately `#090909` to `#0C0C0D`.
- Use card surfaces only slightly lighter than the page, approximately `#151617` or `#171819`, so the cards remain subtle.
- Use a soft off-white such as `#F1F1F0` for primary headings and titles.
- Use muted gray values such as `#A0A0A0` for paragraphs and `#6F7070` for metadata.
- Reserve a warm orange accent, approximately `#E8753A` or `#F07A3C`, for the eyebrow, small line icons, links, and occasional emphasis. Keep it sparse.
- Do not use gradients or bright, high-contrast decorative backgrounds.

### Borders, radius, and spacing
- Use very thin, low-contrast rules and borders in approximately `#292A2B` or with low opacity.
- Give cards a modest radius around 14–16px; they should feel polished but not bubbly.
- Use generous internal card padding, approximately 24px, with the icon, title, and description arranged vertically.
- Place a small orange line icon or product-relevant glyph above each card title. Keep icons simple, 18–20px, and use a consistent stroke weight.
- Maintain a strong vertical rhythm: generous space between the section label, content row, and surrounding sections.
- Make the card heights equal within each row, allowing descriptions to breathe rather than cramming text.

### Interaction and responsive behaviour
- If cards are interactive, add a restrained hover state: slightly lighten the surface, brighten the border, and shift the icon or accent subtly. Avoid dramatic motion.
- Make the text link visibly orange and give it a clear hover treatment such as underline or increased brightness.
- Preserve keyboard focus states with an accessible orange outline or contrasting ring.
- Ensure the grid remains readable on narrow screens: stack cards, reduce heading size to roughly 36–44px, and keep touch targets comfortable.
- Use semantic HTML, meaningful headings, accessible icon labels where needed, and sufficient colour contrast.

## Never
- Never copy logos, product names, brand names, or proprietary terminology from the reference.
- Never reuse the reference's exact heading, paragraph, card titles, metadata, or link copy.
- Never copy illustrations, imagery, icons, or distinctive graphic assets from the reference; create or use generic equivalents appropriate to the user's product.
- Never turn the section into a literal clone—adapt the layout principles, proportions, tone, and visual system to the user's brand.
- Never add unnecessary badges, gradients, glassmorphism, oversized shadows, or decorative elements that weaken the editorial clarity.