## 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-1789060563-5.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-feature-grid-4

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colours, and typography are. Then apply the principles below to create an original use-case feature section for my product—not a copy of the reference.

## Build this section
Create a responsive feature-grid/use-case section that introduces several practical ways the product helps users. The section should feel calm, premium, approachable, and highly scannable.

### Structure and layout
- Use a warm off-white page background, approximately `#FCFBF9`.
- Constrain the content to a centered max-width of roughly `1040–1120px`.
- Add generous vertical separation from adjacent sections: about `96–136px` on desktop and `64–88px` on mobile.
- Place the section heading and supporting copy in a left-aligned content block.
- Use a large heading such as “Ways to use [product]” or an equivalent product-specific phrase. Keep it to one or two lines on desktop.
- Place optional carousel controls on the right side of the heading row. Use a subtle previous control and a slightly more prominent circular next button. Hide or reposition them on small screens if touch scrolling is used instead.
- Below the intro, show a horizontal row of three feature cards on desktop. Cards may overflow into a scrollable carousel on smaller screens rather than becoming cramped.
- Keep card widths consistent, with approximately `16–20px` gaps. On mobile, each card should occupy around `82–90vw` so the next card visibly peeks in.

### Card composition
- Each card should have a soft, very light tinted surface, using distinct but understated tints such as pale sage `#F0F4EF`, mist blue `#EFF4F5`, or pale lavender `#F4F0F5`.
- Use a large visual preview area at the top of every card. Build an original product-oriented mock interface or abstract UI scene that demonstrates the use case; do not use generic stock imagery.
- Give the visual area a subtle lower divider or tonal transition and maintain a consistent aspect ratio.
- Add a small white command-style pill near the top of the visual, with a short slash command or action label relevant to the product. Use dark charcoal text, a soft shadow, and a small rounded speech-tail or angled notch only if it improves the visual language.
- The lower portion of each card should contain a concise title and one or two lines explaining the outcome. Keep text left aligned and make the title more prominent than the description.
- If the reference visual includes browser or application chrome, represent it with simplified abstract shapes: muted window dots, pale bars, and a minimal interface preview. Do not reproduce another company’s UI or brand marks.

### Typography
- Use a modern sans-serif system or brand font with a friendly, slightly compact appearance.
- Section heading: approximately `32–36px`, weight `650–750`, line-height `1.05–1.15`, colour `#292927`.
- Supporting copy: approximately `16px`, line-height `1.45`, colour `#73736F`.
- Card action pill: `12–13px`, weight `650`, colour `#30302E`.
- Card title: `18–20px`, weight `650–700`, line-height `1.2`, colour `#292927`.
- Card description: `14–16px`, line-height `1.45`, colour `#777772`.
- Use natural sentence case and avoid dense blocks of copy.

### Spacing, borders, and shape
- Use a `12–16px` gap between the heading and supporting copy, then `44–52px` before the card row.
- Give cards a `16–20px` radius and keep their visual and content areas aligned.
- Use extremely subtle borders such as `1px solid #E9E9E5`; avoid heavy outlines.
- Use restrained shadows only for floating pills and controls, for example `0 4px 14px rgba(35,35,30,0.08)`.
- Keep the overall composition airy: generous whitespace is part of the design, not unused space.

### Interaction and responsiveness
- Make the cards horizontally scrollable or carousel-driven on narrow screens with smooth movement and no awkward wrapping.
- The next/previous controls should have clear hover, focus, and disabled states. Use a pale neutral background on hover and a visible keyboard focus ring.
- If implementing a carousel, include accessible labels, keyboard support, and indicate the current position without relying on colour alone.
- Let users click or tap a card if the use case has a destination; provide a subtle lift or shadow change on hover, but avoid exaggerated animation.
- Respect reduced-motion preferences.

### Content guidance
- Choose three distinct, outcome-focused use cases that make sense for my product.
- Use short action labels in the pills and concise benefit-led titles below the visuals.
- Ensure the section still communicates value if the visual previews are removed or fail to load.

## Never
- Never copy the reference’s logos, product names, brand marks, or exact copy.
- Never use the reference company name or its slash commands.
- Never reproduce the reference UI, illustrations, screenshots, or imagery; create abstract, product-relevant previews for my product instead.
- Never make the cards visually noisy, overly colourful, or dependent on decorative imagery.
- Never sacrifice accessibility, responsive behaviour, or readable contrast for visual similarity.