## 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/strawberrybrowser-com/0a6dd4bb-409f-4c45-aa48-6abac7e2076e-1789060564-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/strawberrybrowser-com/0a6dd4bb-409f-4c45-aa48-6abac7e2076e-1789060532-full.webp
- Component on Kage: https://kage.design/component/strawberrybrowser-cta

## Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, typography, and primary action they want to use. Then apply the principles below to create an original trust-and-security CTA section for that product rather than reproducing the reference.

## Build this section
Create a responsive website section that communicates confidence, safety, compliance, or reliability while giving users one clear next action. The layout should combine a prominent left-hand message block with a compact supporting proof-point grid on the right.

### Layout and alignment
- Use a warm, very light neutral background across the section, with a centered max-width container of approximately 1080–1200px.
- On desktop, use a three-column composition: the left column is wider and contains the headline plus one primary CTA; the right area is a two-column grid of assurance items.
- Align all content to a consistent vertical grid. Let the left column occupy roughly 34–38% of the container and the proof grid occupy the remaining space.
- Each proof item should have an icon badge above or beside its text, followed by a concise title and one or two lines of explanatory copy.
- Use subtle vertical and horizontal dividers between proof items, but do not let the borders dominate the design.
- On smaller screens, stack the message block above the proof points. Convert the proof grid to one column or a comfortable two-column layout depending on available width, and remove dividers where they create visual clutter.

### Typography hierarchy
- Use a bold, contemporary sans-serif with a compact feel and strong legibility.
- Make the primary heading large and clearly dominant, approximately 28–36px on desktop with a tight line height around 1.1–1.2. Limit it to a readable measure of roughly 12–16 words per line.
- Proof-point titles should be semibold, approximately 16–18px, with a line height around 1.3.
- Supporting descriptions should be neutral and readable at approximately 16–18px with a 1.45–1.6 line height.
- Keep the CTA label short, specific, and action-oriented. Avoid adding secondary links that compete with the main action.

### Spacing and structure
- Give the section generous vertical padding, approximately 64–96px on desktop and 48–64px on mobile.
- Use 32–48px between the headline and CTA, 40–56px between proof items, and 24–32px internal spacing within each item.
- Keep the icon-to-title relationship tight while leaving enough space for the description to breathe.
- Ensure the section remains visually balanced even if proof-point copy varies slightly in length.

### Colour and surface treatment
- Start with a soft warm background around `#F5F1EB` or another brand-appropriate light neutral.
- Use a near-black text colour around `#242321` for headings and titles.
- Use a muted charcoal or warm grey around `#6C6964` for descriptions.
- Use a high-contrast dark fill around `#252525` for the primary CTA, with off-white text around `#FAF8F4`.
- Icon badges should use an off-white surface around `#FFFFFF` or `#FCFBF8`, with dark icons and a faint shadow or border.
- Dividers should be low-contrast, around `#E7E1D9`; check contrast and accessibility against the background.

### Borders, radius, and icons
- Use pill-shaped corners for the primary CTA, with a radius of 999px and comfortable horizontal padding of approximately 20–26px.
- Use circular icon containers around 52–56px in diameter, with a 1px soft border and a restrained shadow.
- Keep icons monochrome, simple, and recognisable: use a check, shield, lock, key, or comparable symbols that match the product’s actual claims.
- Do not use decorative iconography as a substitute for specific, truthful copy.
- Keep dividers at 1px and use them only to establish grouping and rhythm.

### Interaction and accessibility
- The CTA should have a clear hover state: slightly lighten or darken the fill, add a subtle upward or scale transition, and preserve strong contrast.
- Provide visible keyboard focus styles for the CTA and any interactive elements.
- Respect reduced-motion preferences.
- Make the entire section responsive, semantic, and accessible: use a real heading, descriptive text, a real button or link, meaningful icon labels where needed, and sufficient colour contrast.
- If the product has compliance or security claims, only show claims supplied by the user and do not imply certifications that do not exist.

## Never
- Never copy the reference’s logos, product names, brand identity, or exact wording.
- Never reuse the reference’s copy, icon artwork, illustrations, imagery, or certification marks.
- Never invent compliance, security, privacy, or safety claims for the user’s product.
- Never make the section a pixel-for-pixel clone; preserve the information architecture and design principles while creating an original composition for the user’s brand.
- Never allow the proof grid to overpower the main message and primary CTA.