## 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-7.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-gallery

## 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 copy of the reference.

## Build this component
Create a responsive editorial updates gallery for a software or technology product. The section should present a prominent featured article on the left and a vertical list of three secondary articles on the right, with a section heading and a compact control for viewing all posts.

### Layout and alignment
- Use a wide centered content container with a maximum width of approximately 1180–1240px and comfortable horizontal gutters.
- Place a thin, low-contrast horizontal rule above the section and another below it to frame the content without creating a card-heavy appearance.
- Use a two-column desktop layout: the featured story occupies roughly 52–55% of the width, while the supporting list occupies the remaining 45–48%.
- Align the heading and view-all control on one horizontal row. Keep the heading left-aligned and the control right-aligned.
- Give the featured article a large landscape image, followed by a category label, a prominent headline, and a short excerpt.
- Build each secondary article as a horizontal media row: a compact thumbnail on the left and category, headline, and excerpt on the right.
- Separate secondary rows with subtle horizontal dividers. Avoid enclosing every item in a visible card.
- On smaller screens, stack the featured article above the supporting articles. Let each supporting row become a compact horizontal item, or stack its image above text if the viewport is too narrow.
- Preserve consistent left edges, image aspect ratios, and vertical rhythm throughout the section.

### Typography hierarchy
- Use a modern sans-serif with a slightly distinctive geometric or humanist character, chosen to match the user's brand.
- Set the section heading as a large, confident display heading, approximately 32–40px on desktop with tight line-height around 1.05–1.15.
- Use a bold featured headline around 20–24px with a compact line-height.
- Use secondary headlines around 18–21px, allowing two or three lines where needed.
- Use excerpts at approximately 13–15px with relaxed line-height and a muted colour; truncate gracefully when space is limited.
- Render category labels in small uppercase text, approximately 10–11px, with moderate letter spacing and strong contrast.
- Keep the view-all control compact, uppercase, and visually secondary to the heading.

### Spacing and sizing
- Give the section generous top and bottom padding, approximately 64–88px on desktop and 40–56px on mobile.
- Use a 32–40px gap between the heading row and the article grid.
- Keep 28–40px of space between the two desktop columns.
- Use approximately 18–24px between the featured image and its metadata, and 10–14px between headline and excerpt.
- Give supporting rows 20–24px of vertical padding and 14–18px of space between thumbnails and text.
- Use consistent thumbnail dimensions, approximately 220×116px on desktop, with a 16:9 or similarly wide ratio.
- Give the featured image a wide aspect ratio near 16:8 or 16:9.

### Colour, borders, and surfaces
- Use a warm or neutral near-white page background, approximately `#FFFFFF` or `#FCFCFB`.
- Use near-black text such as `#090909` or `#111111` for headlines.
- Use a soft grey such as `#6F6F6F` for excerpts and secondary information.
- Use very light rules around `#EEEEEC` or `#E8E8E6`.
- Category labels may use a pale neutral fill such as `#F1F1EF`, with a subtle border around `#E3E3E0`.
- Use modest corner rounding on images, approximately 3–6px. Keep the overall section mostly flat and editorial rather than applying shadows.
- The view-all control can use a soft grey background such as `#F0F0EE`, a 3–5px radius, and a subtle hover darkening.

### Interaction and accessibility
- Make the entire featured article and each supporting row clickable, with clear keyboard focus states.
- On hover, slightly reduce image opacity or apply a restrained scale of approximately 1.01–1.02 inside an overflow-hidden wrapper; do not use dramatic animation.
- Change headline colour or underline subtly on hover while preserving readability.
- Add visible focus rings with sufficient contrast.
- Use semantic section, heading, article, link, and image elements. Provide meaningful alt text or mark decorative thumbnails appropriately.
- Ensure the layout works at tablet and mobile widths without clipped headlines or horizontal scrolling.

### Content behaviour
- Support variable headline lengths while keeping the featured story visually dominant.
- Keep metadata short and consistent across all items.
- Use realistic placeholder content for the user's product, but do not hard-code content from the reference.

## Never
- Never reuse the reference product's logo, product name, brand marks, or exact copy.
- Never reproduce the reference article headlines, category names, excerpts, or imagery.
- Never copy the reference thumbnails, illustrations, screenshots, or colour artwork.
- Never make the result dependent on the reference site's assets or layout-specific implementation details.
- Never turn every article into a heavy bordered card, add excessive shadows, or compromise the clean editorial hierarchy.