## 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-1789067822-4.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-2

# Build a chronological feed feature-grid section

## Before you start
Ask the user what their product does, who it is for, and what visual brand it uses. Then apply the principles below to create an original feature-grid section for that product—not a copy of the reference. Use the product’s real capabilities and tone in the content, while preserving the structural and visual lessons.

## Purpose
Create a dark, editorial feature section that explains several connected capabilities through a strong headline, supporting copy, and an asymmetric grid of feature cards containing believable UI previews.

## Design language

### Layout and alignment
- Use a near-black page background, approximately `#090A0A`.
- Constrain the section to a centered max width of roughly 1120–1200px, with 40–56px horizontal padding on desktop and 20–24px on mobile.
- Begin with a thin horizontal divider spanning the section. Place a small uppercase eyebrow label at the left edge of the divider, with the rule continuing from it toward the right.
- Below the divider, use a two-column introductory row: a large headline on the left occupying about 55–60% of the width, and a short explanatory paragraph on the right, vertically aligned around the lower half of the headline.
- Follow with an asymmetric card grid. On desktop, use one wide card around two-thirds of the row and one narrower card around one-third. Keep card heights visually balanced, then allow a full-width or alternate-width card to begin beneath them.
- On smaller screens, collapse to one column while preserving the order: section label, headline, supporting copy, then feature cards.
- Align all card content to a consistent inner padding grid. Avoid excessive empty space inside cards, but give embedded previews enough room to read as interfaces.

### Typography hierarchy
- Use a modern grotesk or system sans-serif with a clean, slightly utilitarian character.
- Set the main headline large and tight: approximately 52–64px desktop, 38–46px mobile, with a line-height around 0.95–1.02 and modest negative letter spacing.
- Make the eyebrow labels small, uppercase, and widely tracked—around 10–11px with `0.16em` letter spacing.
- Use card titles at approximately 20–23px with a compact line-height and medium-to-semibold weight.
- Use supporting copy in a muted 15–16px size with a line-height around 1.55–1.7. Keep the paragraph width controlled so it remains easy to scan.
- Let labels and accents carry a warm highlight colour, while the main headline and card titles remain neutral and high contrast.

### Colour
- Page background: near-black `#090A0A`.
- Card surface: subtly lifted charcoal `#151617`.
- Embedded preview surface: black or near-black `#050606`.
- Primary text: soft white `#F1F2F2`.
- Secondary text: cool grey `#96999A`.
- Dividers and card borders: low-contrast grey `#292C2D`.
- Accent labels and selected controls: warm orange, approximately `#E77A3C` to `#FF6D1B`.
- If the product has a brand accent, replace the orange consistently rather than introducing several competing highlight colours. Use accents sparingly for labels, active states, focus lines, or selected tabs.

### Borders, radius, and surfaces
- Give feature cards a 1px border around `#2A2D2E` and a medium-large radius of roughly 15–18px.
- Use a slightly darker inner preview with its own subtle border and a smaller radius, around 8–12px.
- Keep shadows restrained: a soft black shadow may separate cards from the page, but the visual depth should come primarily from tonal contrast and borders.
- Do not use glossy gradients as decoration. Any glow should be limited to a functional active state or a very subtle screen edge.

### Feature card composition
- Each card should start with an uppercase category label, followed by a concise capability-led title and a short explanatory paragraph.
- Build previews that communicate the feature at a glance: lists, search results, tabs, grouped rows, timelines, filters, or other product-native UI. The previews should look like simplified product interfaces, not generic abstract shapes.
- In a wide card, let the preview occupy most of the lower area and use a broad, readable composition. In a narrow card, use a vertically stacked list or compact panel that fits the card width.
- Use small metadata, avatars, icons, timestamps, or status marks only when they help explain the feature. Keep them understated and reduce detail on mobile.
- Make the preview content feel real through varied row lengths, clear hierarchy, and a few selected/active states, without making it visually noisy.

### Interaction and responsive behaviour
- If the cards are interactive, add a restrained hover state: slightly brighter border, a small surface lift, or a subtle accent change. Avoid large motion or dramatic scaling.
- Ensure keyboard focus is visible with a clear accent outline or high-contrast border.
- If previews contain tabs, filters, search, or list rows, make them functional only when that supports the user’s product context; otherwise present them as polished static explanatory mockups.
- Preserve readable text and usable touch targets on mobile. Let wide previews scroll internally or simplify their density instead of shrinking everything too far.
- Respect reduced-motion preferences.

## Content guidance
- Write a headline that expresses the product’s central benefit in a memorable editorial sentence.
- Use supporting copy to explain the organising principle or user outcome, not to repeat the headline.
- Choose two or more features that naturally belong together. Give each one a distinct job and show that job in its preview.
- Keep feature copy concise and specific to the user’s product.

## Never
- Never use logos, product names, or branded marks from the reference.
- Never copy the reference’s exact headline, labels, feature names, body copy, or sample data.
- Never reuse the reference’s interface screenshots, icons, illustrations, imagery, domain names, avatars, or identifiable UI content.
- Never make the section a pixel-for-pixel recreation; reinterpret the layout and visual principles for the user’s product and brand.
- Never sacrifice accessibility for visual similarity: maintain semantic structure, sufficient contrast, keyboard access, and responsive behaviour.