## 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/together-ai/60591018-8706-471e-a3f2-ad3109f52987-1789073940-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/together-ai/60591018-8706-471e-a3f2-ad3109f52987-1789073908-full.webp
- Component on Kage: https://kage.design/component/together-feature-grid

## Before you start
Ask the user what their product is, who it is for, and what brand personality, colours, typography, and content they want to use. Then apply the principles below to create an original version for that product—not a replica of the reference.

## Build this section
Create a wide editorial feature-grid section for a technical product website. The section should feel like a curated stream of research, releases, case studies, or other high-value resources, with a clear heading, a horizontal row of feature cards, carousel controls, and an optional credibility strip beneath it.

### Layout and alignment
- Use a full-width dark section with a centred content container, approximately 1180–1240px wide.
- Give the section generous vertical padding, roughly 110–140px on desktop and 64–88px on mobile.
- Place the heading and supporting sentence on the left of the top row. Keep the heading to one or two lines and align all content to a consistent container edge.
- Put compact previous/next controls on the far right of the heading row. Controls should remain visually secondary to the content.
- Below the heading, show four cards in a horizontal track on desktop, with equal widths and a small, consistent gap. Let the next card edge or connector partially continue beyond the viewport when appropriate to suggest more content.
- On smaller screens, convert the track into a horizontally scrollable carousel or show one card plus part of the next card. Avoid shrinking the cards until their text becomes difficult to read.
- Add a small recognition or trust row below the cards, separated by generous space. Use text-based partner/category markers or neutral placeholders supplied by the user; keep it subordinate to the feature cards.

### Feature cards
- Use tall, near-square or slightly portrait cards with a subtly lighter surface than the section background.
- Place a small uppercase category pill near the top, centred or aligned according to the product’s visual system.
- Centre the feature title within the card’s main body. Titles should be compact, high-contrast, and allowed to wrap naturally across several lines.
- Put a small uppercase author, source, date, or metadata line near the bottom edge.
- Create a strong vertical rhythm: category at the top, title in the middle, metadata at the bottom, with generous empty space between them.
- Use a thin horizontal connector or short luminous bar between adjacent cards if it supports the product’s visual language. It should read as a subtle system motif, not as a literal diagram.
- Make cards interactive: on hover, slightly raise or brighten the card, increase the contrast of the category pill, and reveal a clear focus ring for keyboard users. If cards link to detail pages, make the entire card the hit area.

### Typography
- Use a clean contemporary sans-serif with a technical/editorial feel. Use a distinctive display face only if it is already part of the user’s brand.
- Heading: approximately 34–42px desktop, 28–34px mobile, medium or semibold weight, tight line-height around 1.05–1.15.
- Supporting text: approximately 15–17px, muted colour, 1.4–1.6 line-height.
- Card title: approximately 16–19px, semibold, centred, with 1.2–1.35 line-height.
- Category and metadata: 9–11px, uppercase, modest letter spacing, and a restrained mono or condensed treatment when appropriate.
- Preserve readable contrast and avoid using all caps for long titles.

### Colour and materials
- Start with a deep near-black navy background around #05051F or #070721.
- Use a card surface around #151431 or #181633, with a barely perceptible tonal difference from the background.
- Use warm white or cool white text around #F4F3F7 for primary content.
- Use a muted lavender-grey around #8D8BA5 for supporting text and metadata.
- Use a pale periwinkle/lilac accent around #B8AEFF for connector bars, active states, or small highlights.
- Keep recognition marks subdued, around #68677B, unless the user’s brand requires stronger emphasis.
- Use subtle borders or inset shadows around #22203F rather than heavy outlines. Avoid gradients unless they are native to the user’s brand.

### Borders, radius, and spacing
- Use small corner radii, approximately 2–6px, for a precise technical feel; choose a larger radius only if the user’s existing system calls for it.
- Card padding should be approximately 28–32px horizontally and 18–22px vertically.
- Keep 16–20px between cards and 24–32px between the heading row and cards.
- Use 1px low-contrast borders and restrained shadows; the cards should feel embedded in the dark field rather than floating like generic dashboards.
- Ensure the layout has a coherent 8px spacing rhythm.

### Responsive and accessible behaviour
- Keep the heading, controls, cards, and trust row inside the same responsive container.
- Ensure carousel controls have accessible labels, visible focus states, and disabled states at the ends when the track cannot move further.
- Support keyboard navigation and touch dragging or horizontal scrolling.
- Respect reduced-motion preferences by removing sliding and hover animations.
- Maintain at least WCAG AA contrast for all meaningful text and provide a clear focus outline against the dark background.

## Never
- Never use the reference company’s logo, product name, brand name, or exact wording.
- Never copy the reference card titles, labels, author names, recognition marks, or any other source-specific copy.
- Never reuse the reference’s logos, publication marks, illustrations, imagery, or decorative assets.
- Never assume the user’s product is a research platform; adapt the card subjects, metadata, trust row, and vocabulary to the user’s product.
- Never reproduce the exact layout if it conflicts with the user’s brand system; preserve the underlying principles of editorial scanning, credible content, modular cards, and restrained technical polish.