## 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-1789060390-3.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-feature-grid

## Before you start
Ask the user what their product does, who it is for, and what brand personality, typography, colour palette, and primary action they want to express. Then apply the principles below to that product—do not reproduce the reference literally.

## Build this section
Create a dark, editorial feature-grid section for a modern software product. It should explain several major capabilities through a sequence of large interface showcases followed by compact descriptions and aligned calls to action.

### Structure and layout
- Use a full-width near-black section with a centered content container around 1180–1280px wide and generous horizontal padding: approximately 40px desktop, 20px mobile.
- Begin with an optional slim social-proof row of monochrome customer or ecosystem marks, evenly spaced and centered above the feature content. Use neutral placeholders or text labels appropriate to the user’s product.
- Add a section heading with a large, tightly set two-line statement on the left and one compact primary button aligned to its right on wide screens. Stack these on smaller screens.
- Build the feature area as a vertical sequence of 3–5 rows. Each row contains:
  1. A large framed product visual or interactive mock interface.
  2. A description block beneath or beside the visual, depending on width.
  3. A short capability title, supporting sentence, and text-link CTA aligned toward the opposite edge.
- Let the visual widths vary subtly: use wide full-row demonstrations, split layouts with a floating panel, and occasional asymmetric compositions so the section feels like a product story rather than a repetitive card grid.
- Separate each feature with very thin horizontal rules and generous vertical breathing room. Keep the overall rhythm consistent while allowing the showcased interface to determine each row’s height.
- On mobile, convert every row to a single column: visual first, then copy and CTA. Ensure mock interfaces remain legible and do not overflow the viewport.

### Visual language
- Canvas: near-black, approximately `#050505` or `#000000`.
- Primary text: soft white, approximately `#F5F5F5`.
- Secondary text: muted grey, approximately `#8A8A8A`; tertiary labels can use `#5E5E5E`.
- Borders and dividers: extremely subtle charcoal, approximately `rgba(255,255,255,0.10)`; use slightly brighter borders around important mockups.
- Mock interfaces should use layered dark surfaces such as `#101010`, `#171717`, and `#222222`, with restrained accent colours that belong to the user’s brand.
- Use modest corner radii: 10–16px for large interface frames, 8–12px for controls, and pill shapes only for compact buttons or status labels.
- Avoid decorative gradients unless they support the product’s brand. Prioritise contrast, depth, and believable interface detail.

### Typography
- Use a clean contemporary sans-serif or the user’s brand typeface.
- Section heading: bold, approximately 42–56px desktop with 0.95–1.05 line-height; reduce to 32–40px on mobile.
- Feature titles: 16–20px medium or semibold.
- Descriptions: 15–17px with a relaxed 1.4–1.55 line-height and a restrained measure of roughly 420–520px.
- CTAs and interface labels: 13–15px, medium weight. Use sentence case rather than all caps.
- Keep tracking close to normal; only use slight negative tracking on large headings.

### Spacing and alignment
- Use an 8px spacing system with larger section gaps around 96–144px between major groups.
- Give each showcase generous internal padding, approximately 24–56px depending on scale.
- Align headings, visual edges, descriptions, and CTAs to a clear container grid. Do not center every element; the editorial left alignment is essential.
- Keep CTA placement predictable so users can scan the rows quickly.

### Showcase behaviour and interaction
- Make the visual panels feel like real product surfaces: include believable navigation, tables, cards, editor canvases, terminal output, or assistant panels relevant to the user’s product.
- Add subtle hover treatment to interactive mockups and text links: a small border-brightness change, slight surface lift, or arrow translation of 2–4px.
- If using an assistant or command panel, show it as a layered floating surface with a clear input area, compact controls, and a restrained status state. Keep it supportive rather than visually dominant.
- Use gentle reveal-on-scroll or opacity/translate transitions if the surrounding product supports motion. Keep animations short, purposeful, and respectful of `prefers-reduced-motion`.
- Buttons should have clear hover, focus, and disabled states. Preserve visible keyboard focus rings.

### Responsive and accessibility requirements
- Maintain readable contrast for all text and controls.
- Provide meaningful alt text or accessible labels for every product visual and interactive control.
- Ensure the section works without animation and with keyboard navigation.
- On narrow screens, avoid tiny interface text: simplify mock data or crop decorative detail while preserving the core concept.

## Never
- Never use the reference’s logos, product names, brand marks, or proprietary interface labels.
- Never copy the reference’s exact headline, body copy, CTA wording, layouts, screenshots, illustrations, imagery, or mockup content.
- Never make a pixel-for-pixel clone; reinterpret the hierarchy and interaction model for the user’s product and brand.
- Never rely on imagery or decorative effects where a clear product interface demonstration would communicate the capability better.