## 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-1789060954-9.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-4

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

## Build this section
Create a spacious editorial feature-grid section for a modern software website. The section should present a small collection of recent updates, featured resources, or product announcements in a three-column card layout on desktop.

### Layout and alignment
- Use a centered content container with a maximum width of approximately 1080–1160px and comfortable horizontal padding of 24–32px.
- Place the section heading and a compact outlined action button on the same horizontal row. Align the button to the right and vertically center it with the heading.
- Add generous vertical separation between the preceding section and this section: approximately 96–140px on desktop.
- Place the cards in an evenly spaced three-column grid with 16–20px gaps.
- Each card should share the same vertical structure: visual thumbnail, title, then metadata.
- Keep card columns equal in width and align all titles and metadata to the same left edge.
- On medium screens, use two columns; on small screens, stack cards in one column and move the action below or beside the heading as space allows.
- Maintain an airy page rhythm. Do not force the section to fill the viewport.

### Typography hierarchy
- Use a clean contemporary sans-serif, with a large, calm section heading around 34–40px on desktop, 28–32px on mobile, regular or medium weight, and tight but natural line height.
- Use card titles at approximately 18–21px with a 1.2–1.3 line height and medium weight.
- Use metadata at 13–15px. Give the category slightly more emphasis than the date, while keeping both visually quiet.
- Avoid all-caps headings and excessive font-weight contrast.

### Colour
- Use a warm near-white page background around #FCFCFB or #FFFFFF.
- Use near-black primary text around #111111.
- Use muted secondary text around #6E6E6A.
- Use a very light neutral border around #E6E6E2 for the action button and any subtle card boundaries.
- Thumbnail artwork should be original to the user’s product. If no imagery is available, generate abstract, low-detail visual fields using soft gradients, grain, blurred colour transitions, or restrained geometric texture. Keep text legible if a thumbnail contains a label.
- Avoid making the surrounding UI colourful; reserve colour mainly for the media thumbnails.

### Cards and media
- Use large media thumbnails with a consistent approximately 1:1 aspect ratio.
- Give thumbnails a rounded radius of approximately 16–18px and clip all artwork to the radius.
- Keep the card body visually open: no heavy container shadow and no unnecessary background panel behind the title and metadata.
- Use consistent image treatment across all cards, while allowing each thumbnail to have its own abstract colour direction.
- Use realistic, product-specific titles and metadata supplied by the user rather than placeholder copy from the reference.

### Action and interaction
- Style the section action as a compact pill or softly rounded outlined button with approximately 44px height, 16–22px horizontal padding, and 999px radius.
- On hover, slightly darken the border or apply a very subtle background tint; keep the transition around 160–220ms.
- Make each card clickable if it represents a post or resource. On hover, gently lift or scale the thumbnail by no more than 1–2%, reveal a subtle underline or text colour shift, and preserve the calm editorial feel.
- Ensure keyboard focus is clearly visible with a high-contrast focus ring.
- Respect reduced-motion preferences.
- Include meaningful alt text for thumbnails and make the interaction accessible to keyboard and screen-reader users.

### Responsive behaviour
- At widths below roughly 900px, switch to two columns and reduce the section’s top spacing.
- At widths below roughly 640px, switch to one column, use 20–24px page padding, and let the header wrap naturally.
- Keep thumbnails square and titles readable at every breakpoint.

## Never
- Never reuse logos, product names, headlines, labels, metadata, or copy from the reference.
- Never reproduce the reference artwork, gradients, textures, illustrations, or imagery.
- Never assume the user’s product is the same as the reference product.
- Never add decorative elements that compete with the cards or make the section feel like a marketing hero.
- Never use heavy shadows, dense borders, cramped spacing, or arbitrary placeholder content when the user’s brand and content are available.