## 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/framer-com/fbc97830-061d-4fdf-8e20-ea2d86299263-1789060392-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/framer-com/fbc97830-061d-4fdf-8e20-ea2d86299263-1789060365-full.webp
- Component on Kage: https://kage.design/component/framer-card

## Before you start
Ask the user what their product is, who the audience is, and what their brand personality, colour palette, and typography are. Then apply the principles below to create an original version for that product rather than reproducing the reference.

## Build this section
Create a dark, community-focused website section that presents social proof above a product/community preview. The section should feel premium, spacious, and editorial, with a horizontal set of story cards that visibly continues beyond the viewport.

### Layout and alignment
- Use a near-black page background, approximately `#000000` or the user's equivalent dark brand colour.
- Place a full-width horizontal card rail near the top of the section. Use 3–4 equal-width cards with a narrow gap, and allow the final card to be partially clipped at the right edge to communicate horizontal browsing.
- Give each card a tall, compact editorial proportion, roughly 360–430px wide by 450–520px high on desktop. Keep the card contents vertically structured: brand/customer mark centred around the upper-middle area, then a text link anchored near the bottom.
- Below the rail, leave generous vertical breathing room before the section header. Use a responsive two-column header row: a large heading aligned left and a small resource count plus secondary action aligned right. Stack these elements on mobile.
- Place a large community/product preview directly beneath the header. It can be a browser-window-style panel or another relevant product surface, but it should support the section's community narrative rather than act as decoration.
- Constrain the lower content to a wide centred container while allowing the top rail to extend to or beyond the viewport edges.

### Typography hierarchy
- Use a clean contemporary sans-serif or the user's brand typeface.
- Set the main heading large and tightly leading, approximately 42–48px on desktop, 32–38px on mobile, with medium-to-bold weight. Keep it to two or three short lines.
- Use small supporting metadata at 13–15px with muted contrast.
- Render card links at 16–18px with a simple right arrow, using enough weight to remain legible without competing with the heading.
- Keep line lengths controlled and avoid dense paragraphs.

### Colour
- Page background: approximately `#000000`.
- Card and preview surfaces: approximately `#080808` to `#111111`.
- Borders: subtle charcoal, approximately `#1d1d1d` or `rgba(255,255,255,0.12)`.
- Primary text: soft white, approximately `#f5f5f5` rather than pure white.
- Secondary text: approximately `#8a8a8a`.
- Use the user's accent colour sparingly for interactive controls or meaningful status indicators; do not add decorative gradients unless the product's brand calls for them.

### Borders, radius, and spacing
- Use thin 1px borders with low contrast around cards and the browser/product preview.
- Apply a restrained 14–18px radius to cards and the main preview; use smaller radii for compact controls.
- Give cards generous internal horizontal padding, around 28–36px, and position their bottom links consistently along a shared baseline.
- Use a large section gap between the card rail and heading, around 180–240px on desktop, reducing substantially on smaller screens.
- Keep the heading/action row aligned to the same container edges as the preview below it.

### Interaction and motion
- Make each story card clickable. On hover, use a subtle border brightening, slight lift or background shift, and animate the arrow a few pixels to the right.
- If the rail is draggable or horizontally scrollable, hide intrusive scrollbars while preserving keyboard and touch access. Add visible affordance only when needed.
- Ensure the partially visible card does not prevent users from reaching the next item on touch devices.
- Make the browse action look like a compact dark filled button with a subtle hover lightening; preserve a clear focus ring for keyboard users.
- Keep motion short and restrained, roughly 160–240ms, and respect reduced-motion preferences.

### Responsive behaviour
- On mobile, convert the rail into a touch-scroll row with cards around 78–86vw wide.
- Reduce heading size and stack the resource count and browse action below or beside the heading according to available width.
- Keep the preview readable: allow controlled horizontal overflow only if the product surface genuinely requires it; otherwise adapt it into a responsive layout.

## Never
- Never copy logos, customer marks, product names, brand names, or exact wording from the reference.
- Never reuse the reference's specific community labels, resource count, testimonial copy, or navigation text.
- Never reproduce the reference imagery, browser mockup details, icons, illustrations, or interface screenshots.
- Never make the section a pixel-for-pixel copy; preserve only the underlying layout, hierarchy, spacing, and interaction principles.
- Never sacrifice accessibility for the visual treatment: maintain semantic headings, keyboard access, readable contrast, and reduced-motion support.