## 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-1789060821-9.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-card-2

## Before you start
Ask the user what their product does, who it is for, and what visual brand system it uses. Then apply the principles below to create an original security, trust, or reliability section for that product—not a copy of the reference.

## Build this section
Create a spacious, editorial feature section that explains how the product protects, supports, or reliably serves its users. Use a centered composition with a headline and supporting statement at the top, a single prominent CTA beneath, and a large product interface visual as the visual anchor below.

Arrange concise feature callouts in two columns around the central visual:
- Use one highlighted callout in a soft tinted panel to establish visual variety and draw attention to a primary benefit.
- Place additional benefits as simple text blocks with a short heading and two-to-three lines of explanatory copy.
- Keep the callouts vertically staggered or grouped so they frame the central visual rather than forming a rigid card grid.
- Give every benefit a clear, user-facing outcome; avoid technical feature lists.

## Reusable design language

### Layout and alignment
- Use a full-width section with a centered content container, approximately 1120–1280px wide.
- Center-align the introductory heading, supporting text, and primary CTA.
- Use a three-part lower layout: left feature column, central product mockup, and right feature column.
- Let the central visual occupy roughly 28–34% of the desktop width and remain the dominant object.
- Align feature blocks to the visual’s vertical rhythm, with generous gaps between unrelated benefits.
- On smaller screens, change to a single-column flow: introduction, product visual, then feature blocks. Keep the most important highlighted feature first.
- Use responsive spacing rather than shrinking all content proportionally; preserve readable text and comfortable tap targets.

### Typography hierarchy
- Use a friendly, modern sans-serif with rounded or humanist details.
- Set the main heading in a heavy weight, around 40–52px on desktop, with tight line-height around 0.98–1.08.
- Keep the supporting statement at approximately 20–24px with a relaxed 1.25–1.35 line-height and a muted colour.
- Use feature headings around 19–22px, semibold or bold.
- Use feature descriptions around 16–18px with a 1.35–1.5 line-height for easy scanning.
- Keep the CTA label compact, direct, and action-led, around 15–16px semibold.

### Spacing
- Use a large top and bottom section padding, approximately 96–144px on desktop.
- Leave 20–28px between the headline and supporting statement, and 28–40px between the statement and CTA.
- Leave approximately 56–80px between the CTA and the product showcase.
- Use 32–56px between feature blocks, depending on viewport width.
- Keep highlighted panel padding around 20–28px.

### Colour
- Use a warm or cool near-white page background such as `#FFFFFF` or `#FBFCFA`.
- Use a very dark blue-black for primary text, approximately `#0B1F2A` or an equivalent brand colour.
- Use a soft desaturated mint, sage, blue, or cream tint for the highlighted feature panel, approximately `#EFF7F3`.
- Use a neutral grey for supporting text, approximately `#70777A`.
- Reserve a vivid accent colour from the user’s brand for small trust markers or interface details; keep accents subordinate to the main message.
- Ensure all text meets accessible contrast requirements.

### Borders, surfaces, and radius
- Keep most feature blocks borderless so the composition feels editorial and lightweight.
- Use a subtle 1px border such as `#E5ECE9` only when a highlighted panel needs extra definition.
- Give the highlighted panel a generous rounded radius, approximately 16–20px.
- Use a large, soft radius on the product mockup or device frame, matching the shape of the represented interface.
- Avoid heavy shadows; if needed, use a diffuse shadow such as `0 12px 36px rgba(11, 31, 42, 0.10)`.

### Product visual
- Show a realistic but product-appropriate interface preview, device mockup, dashboard, document, or workflow canvas in the center.
- Make the visual tall enough to create a strong focal point, but do not let it overpower the headline.
- Use believable interface details that support the security or reliability story: status indicators, alerts, activity, permissions, controls, or recent actions.
- If no real product screenshot is available, create a neutral, clearly fictional mock interface using the user’s own brand colours and content.

### Interaction and accessibility
- Make the CTA a clearly clickable button with a dark filled background, light text, rounded pill or softly rounded corners, and a visible hover state that slightly lifts or changes contrast.
- Keep focus states visible for keyboard users.
- If feature callouts are interactive, make the whole panel clickable and reveal a subtle active state without shifting the layout.
- Use meaningful semantic headings, accessible button labels, and descriptive alternative text for the product visual.
- Respect reduced-motion preferences; avoid distracting animated security effects.

## Never
- Never use logos, product names, brand marks, or proprietary interface elements from the reference.
- Never reuse the reference’s copy, headings, feature names, survey content, or exact wording.
- Never reproduce the reference screenshot or build a pixel-for-pixel imitation.
- Never use the reference’s phone image, badges, illustrations, or imagery.
- Never invent claims of fraud prevention, certifications, rankings, or security performance unless the user provides substantiated claims.
- Never make the section a dense collection of equal cards; preserve the central visual hierarchy and editorial rhythm.