## 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/teenage-engineering/02d63820-361c-4c31-b791-8f2d75691669-1789060824-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/teenage-engineering/02d63820-361c-4c31-b791-8f2d75691669-1789060797-full.webp
- Component on Kage: https://kage.design/component/teenage-engineering-gallery-7

## Before you start
Ask what the user's product is, who it is for, and what their brand language, palette, and catalog structure are. Then apply the principles below to create an original version for that product—not a copy of the reference.

## Build this section
Create a responsive product-gallery section followed by a dark exploration CTA and a compact utility footer. The gallery should feel like an editorial catalog: quiet, precise, image-led, and confident.

### Layout and alignment
- Use a three-column desktop grid with equal-width columns and full-height vertical dividers between them.
- Keep the gallery content inside a wide viewport-spanning container; on desktop, allow the columns to reach close to the page edges while preserving a small outer margin.
- Give each product card substantial vertical space. Position a compact product label near the upper-left of each card and center the product image horizontally in the available card area.
- Use consistent image frames rather than letting different source dimensions change the rhythm. Product images should be contained, not cropped.
- Place the exploration CTA directly beneath the gallery as a full-width horizontal band.
- Below it, place a footer divided by a thin horizontal rule: a locale selector on the left, a centered or flexible row of utility links, and a copyright/status line on the right.
- On smaller screens, collapse to one column or a horizontally scrollable catalog, preserving dividers and generous image breathing room. Stack footer groups cleanly rather than shrinking the type too far.

### Typography hierarchy
- Use a modern, lightweight sans-serif with slightly technical, neutral proportions.
- Product names should be small and regular-weight, approximately 12–14px, with comfortable line height.
- Secondary actions such as “view,” “shop,” or equivalent should be smaller or the same size, using a muted accent colour and a subtle underline or hover change.
- Make the exploration CTA notably larger, approximately 28–36px on desktop, with light weight and tight but readable tracking.
- Footer navigation should be compact, approximately 14–16px, low contrast but legible.
- Avoid heavy headings, decorative display type, and excessive capitalization.

### Colour and visual tone
- Use an almost-white gallery background, approximately #F4F6F5 or #F5F7F6.
- Use near-black for the CTA and footer, approximately #101014 or #111116.
- Use very subtle grey dividers, approximately #B9BDBD at low opacity, so the grid is visible without becoming dominant.
- Use a muted blue-grey or brand-specific accent for secondary links, approximately #547A86; replace this with the user's own accent when appropriate.
- Keep product imagery visually dominant and avoid extra decorative colour blocks around it.

### Borders, radius, and spacing
- Use 1px rules for column and footer dividers.
- Keep the gallery cards square-edged with no visible card radius, shadows, or floating containers.
- If interactive controls are needed, use a small radius of 2–4px and minimal styling.
- Give product labels approximately 24–28px of inset from the top and left edges on desktop.
- Use generous card padding and a tall image area—roughly 360–460px on desktop depending on the product ratio.
- Give the CTA approximately 28–36px of vertical padding, and the footer approximately 28–32px.
- Maintain a disciplined spacing scale rather than adding isolated decorative gaps.

### Interaction and responsive behaviour
- Make each product card or its action link clickable, with a quiet hover state: slightly darken the label, shift the accent link colour, or apply a subtle image scale of no more than 2–3%.
- Keep transitions short and restrained, around 160–220ms.
- Preserve the product image's contained aspect ratio and prevent layout shift while images load.
- Make the locale selector visibly interactive with a small chevron and a keyboard-accessible menu.
- Ensure all links have clear focus states, sufficient contrast, and touch targets of at least 44px where practical.

### Content model
- Support a product name, optional short action label, image, destination URL, and optional category or status.
- Let the number of products vary, but keep the first row visually balanced. If fewer than three items exist, use intentional whitespace rather than stretching cards awkwardly.
- Use real product imagery from the user's catalog or neutral placeholders during development.

## Never
- Never reuse logos, product names, wording, or exact copy from the reference.
- Never copy the reference site's products, imagery, illustrations, icons, or footer text.
- Never reproduce the exact layout as a branded clone; adapt the grid, scale, colours, content, and responsive behaviour to the user's product.
- Never add unrelated decorative illustrations, gradients, shadows, or promotional badges unless the user's brand requires them.
- Never sacrifice accessibility, responsive behaviour, or readable contrast for visual similarity.