## 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/elevenlabs-io/25703c4f-1ec9-434f-a8f0-8548c2191604-1789060951-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/elevenlabs-io/25703c4f-1ec9-434f-a8f0-8548c2191604-1789060912-full.webp
- Component on Kage: https://kage.design/component/elevenlabs-feature-grid

## Before you start
Ask the user what their product does, who it is for, and what visual brand system it uses. Then apply the principles below to create an original feature-grid section for that product—not a copy of the reference.

## Build this section
Create a responsive feature-grid section that introduces two related products, modes, or solution areas built on a shared foundation. The section should feel editorial, premium, calm, and product-led, with a short overview above a large visual product preview.

### Layout and alignment
- Use a centered page container with a maximum width of approximately 1120–1200px and generous horizontal padding of 32–48px on desktop.
- Start with a compact two-column information row. Place a large section heading on the left, spanning roughly half the container, and place the two product summaries beneath or alongside it in a balanced two-column grid.
- Keep all text aligned to a consistent left edge; avoid centered marketing copy.
- Follow the summaries with a wide showcase panel that spans the full container width.
- Give the showcase panel a softly rounded rectangular frame with generous internal padding. Place one or two product UI previews inside it, arranged side by side or as a layered composition depending on the user's product.
- On smaller screens, collapse the text and product summaries into a single column, then stack or horizontally crop the previews while preserving their important UI details.
- Maintain a clear vertical rhythm between the heading, summaries, preview frame, and any content that follows.

### Typography
- Use a modern sans-serif with a clean, neutral appearance.
- Set the main heading large and compact, approximately 40–52px on desktop with a line-height around 1.05–1.15 and normal-to-medium weight.
- Set product or category labels at approximately 15–17px, medium or semibold weight.
- Set descriptions at approximately 15–17px with a 1.4–1.55 line-height and a softer text colour.
- Keep the heading to roughly two lines where possible; use deliberate line breaks only when they improve composition.
- Avoid oversized display text, dense paragraphs, and excessive font-weight contrast.

### Spacing
- Use approximately 96–128px of top and bottom section padding on desktop, reducing to 64–80px on mobile.
- Leave 28–44px between the heading and the product summaries.
- Leave 40–56px between the summaries and the showcase panel.
- Use 20–32px gaps between the two summary columns.
- Give the showcase frame 32–56px of padding on desktop and 16–24px on mobile.

### Colour and surfaces
- Use an off-white or white page background, approximately `#FCFCFB` or `#FFFFFF`.
- Use near-black primary text, approximately `#111111` or `#171717`.
- Use muted grey secondary text, approximately `#737373`.
- Use a very light warm-grey showcase surface, approximately `#F3F3F1` or `#F5F5F3`, so the embedded interface feels elevated without a heavy card treatment.
- Keep interface previews predominantly white with subtle cool or warm-grey surfaces and restrained accent colours derived from the user's brand.

### Borders and radius
- Add a fine, low-contrast border around the showcase frame, approximately `#E7E7E4`, at 1px.
- Use a 20–28px radius for the outer showcase panel.
- Use smaller 8–14px radii for UI cards and controls inside the preview.
- Avoid strong shadows; if needed, use a barely visible shadow such as `0 8px 30px rgba(0,0,0,0.04)`.

### Product preview treatment
- Represent the product with believable, simplified interface mockups rather than generic decorative blocks.
- Show enough navigation, controls, panels, or data to communicate the product's purpose, but keep the mockups visually quiet and secondary to the section's hierarchy.
- Allow previews to extend close to or slightly beyond the showcase frame's lower edge if that creates a natural “window into the product” effect.
- If the section is interactive, make each product summary selectable and update the preview with a subtle crossfade or slide; otherwise use static previews with clear visual separation.
- Ensure hover and focus states are understated, accessible, and never dependent on colour alone.

### Responsive and accessibility requirements
- Preserve a readable heading width and avoid horizontal overflow.
- Use semantic headings, lists or grouped links where appropriate, and keyboard-visible focus states.
- Provide meaningful accessible labels for product selectors and preview links.
- Ensure sufficient contrast for muted text and controls.
- Respect reduced-motion preferences for any preview transitions.

## Never
- Never copy the reference's logos, product names, brand names, or exact marketing copy.
- Never reuse its illustrations, screenshots, imagery, interface text, icons, or distinctive visual assets.
- Never reproduce the exact layout if it does not fit the user's product; use the underlying principles to create an original section.
- Never make the mockup more visually dominant than the section's information hierarchy.
- Never use placeholder lorem ipsum, unexplained decorative UI, or inaccessible low-contrast text.