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

# Before you start
Ask me what my product does, who it is for, and what its brand personality, colour palette, and visual assets are. Then apply the principles below to create an original feature-grid section for my product—not a replica of the reference.

## Goal
Build a polished SaaS feature section that introduces a broad product capability, makes the main features tangible through lightweight UI previews, and ends with a compact set of supporting capabilities plus a low-friction call to action. The section should feel editorial, calm, premium, and highly scannable.

## Structure and layout
- Use a centered, wide content container with generous horizontal padding; target roughly 1120–1240px maximum width.
- Begin with a small eyebrow label, then a two-column intro row: a large headline on the left and a concise explanatory paragraph on the right.
- Place the primary CTA directly below the headline. Use one clear action rather than competing buttons.
- Follow with a two-column feature area. Make the left feature slightly more visually expressive and the right feature more interface-focused; both should have equal visual importance.
- Add a second row of four compact capability cards beneath the primary feature cards. On desktop, use four equal columns; on tablet, use two columns; on mobile, stack them or use a horizontally scrollable row only if it remains easy to scan.
- Finish with a slim proof or conversion row containing small neutral partner/customer markers, one short supporting sentence, and a secondary CTA aligned to the opposite side.
- Preserve a strong vertical rhythm between the intro, hero cards, compact cards, and proof row. Avoid filling every area with content.

## Alignment and spacing
- Align all major content to the same container edges.
- Use a 12-column mental grid, with the intro split approximately 1:1 and the main feature cards split approximately 1:1.
- Use generous section padding: about 80–120px vertically on desktop and 48–72px on mobile.
- Use 32–40px gaps between major groups, 16–24px gaps between cards, and 12–16px internal card spacing.
- Keep card content anchored near the bottom when a visual preview occupies the upper area, creating a consistent editorial baseline.

## Typography
- Use a modern sans-serif suited to the product brand. Keep the type clean and unornamented.
- Eyebrow: 14–16px, medium weight, muted neutral colour.
- Main heading: approximately 48–64px on desktop, 36–44px on mobile; use a tight line-height around 0.98–1.08 and a regular or medium weight.
- Intro paragraph: 17–19px with a 1.45–1.6 line-height and a comfortable maximum width.
- Feature labels: 15–16px, muted and medium weight.
- Feature descriptions: 16–18px with 1.4–1.55 line-height.
- Compact card labels should be quieter than their descriptions; descriptions should remain short enough to scan in two to four lines.
- Use near-black text such as #111111 or #151515, with muted text around #6F6F6B.

## Colour and surfaces
- Start with a warm, near-white page background such as #FAFAF8 or #FFFFFF.
- Use very light warm-grey card surfaces around #F4F3F0 or #F2F1EE rather than stark white-on-white cards.
- Use black or near-black for the primary CTA, with white text; use a white or transparent treatment for secondary actions.
- Keep borders subtle: #E5E3DE or rgba(20,20,20,0.10).
- If the product has rich visual media, reserve colour and texture for one feature preview so the overall section remains restrained. Adapt the accent colours to the user's brand rather than copying any reference palette.

## Cards, borders, and radius
- Use large feature-card radii around 22–28px and compact card radii around 18–22px.
- Use thin borders instead of heavy shadows. If depth is needed, use a very soft shadow such as 0 8px 30px rgba(0,0,0,0.04).
- Let the primary visual cards be tall enough to feel substantial, roughly 460–570px on desktop depending on the preview.
- Keep compact cards around 250–300px tall, with icon or symbol near the top and text anchored toward the lower half.
- Clip previews to the card radius. Do not let UI mockups overpower the explanatory copy.

## Product previews
- Create original, simplified representations of the product's capabilities: for example, an editor surface, media panel, generation prompt, timeline, chart, workflow, or playback control.
- Use believable interface details—small controls, input fields, tabs, thumbnails, sliders, or status indicators—but keep them decorative and legible rather than fully functional.
- A primary preview may use a subtle gradient, grain, or abstract brand texture behind a light interface panel. A second preview can use a white floating panel with concise controls and one obvious action.
- Ensure the previews support the feature message and do not rely on stock photography or decorative illustrations.

## Icons and interaction
- Use small, simple line icons or abstract product symbols in compact cards, inside lightly bordered square containers.
- Buttons should have clear hover, focus, and pressed states. Primary buttons can slightly brighten or invert; secondary buttons can gain a subtle border or background.
- Cards may lift by 2–4px or strengthen their border on hover, but keep motion restrained.
- If feature cards are interactive, make the entire card keyboard-focusable and provide a visible focus ring. Do not make decorative previews compete with the CTA.
- Respect reduced-motion preferences.

## Responsive behaviour
- On smaller screens, stack the intro columns and place the CTA immediately after the headline.
- Stack the main feature cards, keeping preview height proportional and avoiding oversized empty areas.
- Convert the four-card row to a two-column grid or a well-labelled horizontal scroller.
- Stack the proof row vertically, with the CTA full-width or aligned to the start.
- Maintain comfortable touch targets of at least 44px.

## Content principles
- Write original, product-specific copy with one clear idea per card.
- Keep the headline outcome-led, not feature-jargon-heavy.
- Make the two major cards demonstrate complementary benefits, while the compact cards cover adjacent capabilities.
- Use short labels, concrete descriptions, and a single decisive CTA.

## Never
- Never copy the reference's logos, product names, company names, customer names, or exact wording.
- Never reuse the reference's copy, UI text, illustrations, imagery, gradients, or branded artwork.
- Never assume the product is an AI audio or media platform; adapt the structure to the user's actual product.
- Never overcrowd the cards with paragraphs, excessive badges, or decorative controls.
- Never use stock imagery or unrelated illustrations where an original product UI preview would communicate the idea better.
- Never sacrifice accessibility, responsive behaviour, keyboard focus, or readable contrast for visual similarity.