## 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/monzo-com/b864c421-0184-411c-901f-a4ffc676dbcc-1789060818-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/monzo-com/b864c421-0184-411c-901f-a4ffc676dbcc-1789060760-full.webp
- Component on Kage: https://kage.design/component/monzo-feature-grid

## Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, typography, and visual assets they want to use. Then apply the principles below to create an original feature-discovery section for that product—not a copy of the reference.

## Build this section
Create a responsive feature-grid section that helps visitors discover several product areas, use cases, plans, or capabilities. It should feel editorial, confident, approachable, and conversion-oriented while remaining easy to scan.

### Layout and alignment
- Use a wide, centred container with generous horizontal padding; cap the content width so the section does not feel stretched on large screens.
- Place a compact intro block at the top: a large heading, a short supporting paragraph beneath it, and one prominent primary CTA below the paragraph.
- Keep the intro content left-aligned. Leave deliberate whitespace between the intro and the feature collection.
- Present the features as a horizontal row of cards on desktop. The row may extend beyond the viewport/container to suggest that more items are available.
- Use a carousel or horizontal scroll interaction when the full row cannot fit. Include two circular previous/next controls near the upper-right of the collection, with disabled styling for unavailable directions.
- Each card should have a consistent width. On desktop, show a mix of fully visible cards and a partial neighbouring card when appropriate to communicate overflow.
- Align each card's image, title, description, and secondary CTA to the same vertical rhythm. Do not force descriptions to be identical in length, but reserve enough space to prevent distracting jumps between buttons.
- Add a small legal or qualification note below the cards when the product category requires it. Keep it visually subordinate and readable.
- On smaller screens, switch to one prominent card at a time with horizontal swiping, or stack cards if browsing is more useful than comparison. Keep the section padding comfortable and preserve the overflow cue.

### Typography hierarchy
- Use a bold, friendly display sans-serif for the section heading, approximately 36–48px on desktop and 30–36px on mobile, with tight line-height around 1.05–1.15.
- Use a neutral sans-serif for supporting copy and card descriptions, around 18–20px for the intro and 16–18px for card text, with line-height around 1.35–1.5.
- Make card titles prominent but below the main heading, approximately 24–28px, bold, and easy to scan.
- Use semibold labels for buttons. Keep button text short and action-led.
- Use smaller 14–16px text for legal notes, with comfortable line-height and clear contrast.

### Colour and visual tone
- Use a warm near-white page background, approximately #FFFFFF or #FAFAF8.
- Use a deep blue-black for major headings and primary buttons, approximately #10212A or #0F2028.
- Use a medium neutral grey for supporting copy, approximately #697176.
- Use white or very pale surfaces for cards where a distinction from the page background is needed.
- Keep the palette restrained so imagery or product-specific colour can provide personality without reducing legibility.
- Ensure all text and controls meet accessible contrast requirements.

### Images and card treatment
- Give feature imagery a wide or near-square aspect ratio, with a consistent crop across cards.
- Use rounded corners with a generous radius, approximately 24–32px, to create a soft, approachable feel.
- Choose original product-relevant photography, abstract artwork, screenshots, or illustrations based on the user's brand. Images should communicate the feature without requiring dense text overlays.
- Avoid placing essential information over busy imagery; keep titles and descriptions below the image on the page surface.

### Borders, radius, and spacing
- Use a generous section top and bottom padding, approximately 72–112px on desktop and 48–72px on mobile.
- Use a spacing scale based on 8px increments, with roughly 16px between title and description, 28–36px before the primary CTA, and 28–40px between image and card title.
- Make primary CTAs dark filled pills with approximately 999px radius and 14–18px horizontal padding. Use a height around 48px.
- Make secondary card CTAs outlined pills with a 1.5–2px dark border, transparent or page-colour fill, and approximately 999px radius.
- Keep carousel controls circular, around 48px in diameter, with a subtle light border for disabled state and a dark border for the active state.
- Avoid heavy card borders or shadows unless they are necessary to separate cards from the background; rely on spacing and image shape instead.

### Interaction and accessibility
- Make the entire card or a clearly defined card link discoverable, while keeping the secondary CTA explicit.
- Add hover and focus states: slightly darken or lift interactive controls, but do not rely on motion alone to communicate state.
- Support keyboard focus, keyboard carousel navigation, swipe gestures, and screen-reader labels for previous/next controls.
- Announce the current carousel position where relevant and prevent keyboard users from getting trapped in an off-screen row.
- Respect reduced-motion preferences. Keep transitions short and subtle, such as 150–250ms opacity or transform changes.
- Make the primary CTA visually dominant and ensure the section still makes sense if images fail to load.

### Content structure
Include:
1. A concise, benefit-led section heading.
2. One sentence explaining the breadth of the product or how it supports different user needs.
3. One primary CTA.
4. Three to six feature cards, each with an image or visual, title, short description, and secondary CTA.
5. Optional small-print qualification text beneath the grid when required by the user's industry.

## Never
- Never use the reference product's logo, name, brand language, or exact copy.
- Never reuse the reference product's photographs, illustrations, screenshots, or other imagery.
- Never reproduce the exact card labels, wording, layout proportions, or visual assets from the reference.
- Never assume the user's product is in the same industry; adapt the feature categories and compliance notes to their product.
- Never sacrifice accessibility, responsive behaviour, or content clarity for visual similarity.