## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/elevenlabs-io/25703c4f-1ec9-434f-a8f0-8548c2191604-1789060912-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/elevenlabs-io/25703c4f-1ec9-434f-a8f0-8548c2191604-1789060751538.webp
- Design on Kage: https://kage.design/designs/elevenlabs-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have, including the product name, logo, colours, typography, imagery, and any existing component or accessibility requirements. Wait for their answers before designing. Apply the reference's structural and visual principles to their product, never copy the reference's content or identity.

## Page structure
1. **Global navigation:** Start with a slim, airy header on a white background. Place the user's brand at left, a compact row of primary navigation links in the middle, and a light secondary action plus a dark primary action at right.
2. **Hero introduction:** Use a generous two-column hero with a large, compact headline on the left, a short explanatory paragraph on the right, and two pill-shaped calls to action below the headline.
3. **Interactive product showcase:** Follow with a large rounded light-gray panel containing a small tab strip, a central visual carousel of oversized soft-gradient circular media objects, a play control, short labels and descriptions, arrow controls, and a bottom row of product capability filters with a right-aligned action.
4. **Customer proof:** Add a restrained enterprise-trust section with a small heading, an outlined story-link button, and a spacious grid of low-contrast customer marks arranged in several rows.
5. **Platform overview:** Introduce the core product families with a large left-aligned heading and two short platform descriptions above a wide rounded product-interface image showing two applications side by side.
6. **Creative platform section:** Use a bordered content block with a two-column heading and description, a dark pill CTA, then a bento grid. Feature one large colourful editor card and one large speech card, followed by four smaller capability cards. Finish with a customer proof strip and a right-side action.
7. **Agents platform section:** Repeat the same high-level rhythm for the second platform: eyebrow, large two-column heading and description, CTA, then two large cards for conversational agents and analytics followed by three smaller cards for testing, guardrails, and workflows. End with a customer proof strip and action.
8. **API section:** Present the API family as a more technical, denser sequence. Use a heading and an outlined documentation button, then alternating two-column rows: descriptive API/model information on the left and code or abstract interface artwork on the right. Include text-to-speech, speech-to-text, and music API rows.
9. **Impact and media showcase:** Center a heading about the product's wider impact, add a small segmented toggle, and create an asymmetrical media grid with one large central story, smaller side stories, rounded image cards, and text overlays.
10. **Research section:** Use a two-column heading and explanatory paragraph, followed by a large rounded research timeline panel with navigation arrows, a horizontal progression indicator, a highlighted milestone, and supporting copy. Beneath it, place a short research description, a learn-more button, and two small dated article cards.
11. **Safety section:** Add a simple heading with a learn-more control, then three equal rounded cards. Each card should contain a sparse monochrome line illustration area, a principle title, and a short description for moderation, accountability, or provenance-like concerns relevant to the user's product.
12. **Latest updates:** Use a heading and an all-posts control above three equal editorial cards. Give each card a soft abstract gradient image area with centered title text, followed by article title, category, and date metadata.
13. **Bottom CTA bar:** Add a full-width bordered band with a concise platform-level heading on the left and two pill actions on the right: one light secondary action and one dark primary action.
14. **Footer:** Finish with a spacious multi-column footer. Put the brand and language selector in the first column, then organize links into clearly titled product-family, resource, social, and company columns. Keep the type small, black/gray, and highly scannable with generous vertical spacing.

## Design language
- Build hierarchy with a restrained type scale: compact 11–13px navigation and metadata, 14–16px body copy, 24–32px section headings, and a 34–46px hero or major section headline. Use a clean modern sans-serif with slightly tight headings and relaxed body leading.
- Keep the page predominantly white or near-white, approximately `#ffffff` and `#f7f7f5`, with black text around `#090909` and secondary gray around `#777777`.
- Use colour sparingly. Reserve soft, blurred gradients and textured media for feature cards and stories: warm orange/red around `#f26b32`, cool blue around `#6fa6d9`, green around `#78a86b`, purple around `#9c76cf`, and pale yellow around `#e4c66d`. Do not tint every control.
- Change rhythm down the page: keep the opening sparse and spacious, make the platform feature sections denser with bento cards, make the API section information-rich and grid-like, then return to larger editorial whitespace for research, safety, updates, and the footer.
- Use a centered content frame with narrow vertical rules or subtle section borders. Let most major sections align to the same left and right edges while allowing hero media and large showcase panels to approach the container width.
- Treat cards as quiet surfaces: use 1px borders near `#e8e8e6`, very light gray fills, 14–20px corner radii, and almost no shadow. Use larger radii for media panels and product demos; keep controls as compact pills.
- Use rounded black buttons with white text for primary actions and white or transparent buttons with thin gray borders for secondary actions. Keep labels short, with modest horizontal padding and no oversized marketing treatments.
- Make bento grids asymmetrical but orderly. Pair one or two large visual cards with smaller informational tiles, align their bottoms and gutters, and keep card copy anchored near the lower edge when the card contains media.
- For product screenshots and demos, use pale application chrome, fine dividers, compact labels, and realistic but generic interface content. For technical rows, pair readable explanatory copy with a large code panel using a monospace font and restrained syntax colour.
- Use image treatments that feel tactile but controlled: blurred gradients, grain, soft abstract forms, and occasional monochrome photography. Keep all media inside rounded containers and use text overlays only where contrast remains strong.
- Motion should be subtle and purposeful: allow carousel tabs, play buttons, timeline arrows, and segmented toggles to transition with short fades or gentle horizontal movement. Add hover lift or border darkening to cards and buttons, but avoid bouncy animation or continuous distraction.
- Maintain strong accessibility: preserve contrast for text and controls, provide visible focus states, label carousel and timeline controls, and ensure the dense grids collapse into a readable single-column or two-column mobile flow.

## Never
- Do not use ElevenLabs logos, wordmarks, product names, navigation labels, copy, screenshots, code samples, customer marks, illustrations, photography, or icon sets from the reference.
- Do not reproduce the reference's exact text, branded gradients, content categories, or visual assets. Replace them with the user's own product language, data, imagery, and brand system.
- Never present the result as ElevenLabs or imply affiliation with it.