## 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-1789060823-7.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-6

# Before you start
Ask the user what their product is, who it is for, and what visual brand language they want to use. Then apply the principles below to create an original product-family gallery for their product—not a copy of the reference.

## Build this section
Create a responsive product gallery for a product line with one featured overview followed by a grid of individual product cards. The section should feel like a calm, highly edited catalog: the products carry the visual interest, while the interface remains quiet and systematic.

## Design language

### Layout and alignment
- Use a very light, near-white page background and a full-bleed grid structure.
- Start with a wide featured panel spanning the entire content width. Center one large arrangement or representative group of products horizontally and vertically within a generous image stage.
- Place a small, unobtrusive caption near the lower-left of the featured panel.
- Follow it with a three-column product grid on desktop. Each card occupies an equal-width cell and is separated by 1px vertical and horizontal rules.
- Align card metadata to the upper-left of every cell. Keep the product image optically centered beneath it, with consistent scale and baseline treatment across the range.
- Use substantial vertical space around product imagery so the gallery feels premium rather than dense. On tablet, use two columns; on narrow screens, collapse to one column while preserving the same quiet rhythm.
- Keep the grid edges aligned with the featured panel and use a consistent page gutter, approximately 24–32px on desktop and 16–20px on mobile.

### Typography hierarchy
- Use a neutral sans-serif with a technical, contemporary feel; avoid decorative display fonts.
- Product names should be small, regular-weight text, approximately 12–14px, with compact line height.
- Secondary actions such as “view,” “shop,” or equivalent should be one size smaller or the same size, using a muted accent colour.
- Featured captions should be small and understated, never competing with the imagery.
- Use sentence case or restrained lowercase labels; avoid oversized headings inside the gallery.

### Colour
- Background: approximately #F5F7F6 or #F3F5F4.
- Primary text: soft black, approximately #202222.
- Grid rules: cool pale grey, approximately #C8CDCB, at 1px.
- Links and interactive accents: muted blue-green, approximately #397F8D; adjust to the user's brand accent where appropriate.
- Keep the UI mostly monochrome so colourful product variants can act as the visual punctuation.

### Borders and radius
- Use sharp-edged rectangular cells with no card shadows.
- Use 1px hairline dividers between cells and beneath the featured area.
- Avoid rounded containers; if the user's product requires a softer treatment, use only a very small radius such as 2–4px.
- Let product images retain their natural silhouette and avoid decorative frames.

### Imagery and product presentation
- Use consistent, high-resolution product cutouts or photography on a neutral background.
- Give every product approximately the same visual footprint, even when the physical dimensions differ.
- In the featured panel, show the family as a coordinated group or arrangement; in the catalog cells, show one product per card.
- Do not crop important product details. Preserve generous empty space around each object.

### Interaction
- Make the entire product cell or image area clickable, with a clear but quiet hover state.
- On hover, use a subtle text-colour shift, a slight image scale of roughly 1–2%, or both; do not add large shadows or animated distractions.
- Keep links keyboard accessible with a visible focus outline in the accent colour.
- If the gallery supports navigation or filtering, keep controls minimal and place them outside the image stage so the product lineup remains uncluttered.

### Responsive behaviour
- Preserve the featured overview on all breakpoints, reducing its height and image scale rather than removing it.
- Maintain equal card heights within each row where practical.
- On mobile, use a single-column flow with clear horizontal rules and slightly reduced image stages, while retaining generous whitespace.

## Never
- Never copy logos, product names, labels, trademarked marks, or exact marketing copy from the reference.
- Never reuse the reference brand's specific products, product photography, illustrations, or imagery.
- Never reproduce the exact catalog contents, variant names, or arrangement; use the user's own product and assets.
- Never turn the gallery into a colourful, shadow-heavy card UI or add unnecessary badges and decorative controls.
- Never sacrifice accessibility: provide alt text, keyboard focus states, sufficient contrast, and responsive layouts.