## 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-1789060562-3.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-2

## Before you start
Ask the user what their product does, who it is for, and what visual brand or design system it should use. Then apply the principles below to create an original feature-grid section for that product—not a copy of the reference.

## Goal
Build a responsive feature section that introduces a product as a unified workspace for several connected capabilities. The section should feel quiet, premium, useful, and visually easy to scan. Use the product’s own feature names, examples, and visual language.

## Layout and alignment
- Use a warm, near-white page background and a centered content container approximately 1040–1200px wide.
- Start with a centered introductory block: a compact, two-line-capable headline followed by a short explanatory paragraph. Keep the text measure narrow, around 520–650px.
- Place generous vertical space between the introduction and the feature grid; the section should breathe rather than feel densely packed.
- Follow with a centered section heading that frames the feature collection as one coherent system.
- Build the feature area as a two-column grid on desktop, with equal or near-equal cards and a 16–24px gap. Cards may have different internal compositions, but maintain a consistent outer rhythm.
- Use a single column on small screens. Preserve the visual order: introduction, section heading, then the most important feature cards.
- Align card content to the card edges and keep all outer card edges on a shared grid. Avoid excessive floating elements or irregular masonry alignment.

## Typography hierarchy
- Use a modern sans-serif with a neutral, highly legible appearance; use the product’s brand typeface if available.
- Main introduction headline: bold, approximately 42–56px desktop, tight line-height around 0.98–1.08, with restrained letter spacing.
- Supporting paragraph: 16–18px, line-height 1.45–1.6, medium gray, and limited to a readable width.
- Section heading: bold, approximately 30–40px, with tight line-height and a clear but understated presence.
- If cards include labels or captions, use 14–18px text with strong contrast and short line lengths. Keep UI annotations smaller and quieter.
- Use sentence case. Let hierarchy come from scale, weight, and spacing rather than decorative styling.

## Spacing
- Use a generous top and bottom section padding, roughly 96–144px on desktop and 64–88px on mobile.
- Keep 16–24px between the headline and paragraph, 72–120px between the introductory block and section heading, and 40–56px between the section heading and cards.
- Give each card generous internal padding, generally 24–40px, while allowing media to reach the card’s inner edges when that improves the composition.
- Maintain consistent 8px-based spacing increments throughout.

## Colour and visual treatment
- Page background: approximately #FAF9F7 or #FCFBF9.
- Card surfaces: white or softly tinted neutrals such as #FFFFFF, #F7F5F1, or #F3F1ED.
- Primary text: near-black #20201F or #242321.
- Secondary text: warm gray #6F6C67.
- Borders: subtle warm gray #E8E5E0, ideally 1px and low contrast.
- Use one restrained brand accent for active states or small UI details; derive it from the user’s brand rather than inventing a competing palette.
- Keep contrast high enough for accessibility. Avoid heavy gradients, loud shadows, or overly saturated backgrounds.

## Cards and media
- Use large rounded cards with approximately 14–20px radius and a delicate 1px border.
- Each card should communicate one capability through an abstract, product-specific visual: layered panels, a dashboard crop, a workflow diagram, an interaction preview, or another UI-like composition.
- Prefer soft depth, diffuse highlights, subtle blur, and low-contrast surfaces over literal illustrations.
- Keep media visually contained and intentionally framed. Use clipping and overflow hidden so screenshots or interface fragments do not break the card silhouette.
- Design cards so the visual is understandable even without reading a long caption. Use a short label or sentence only when needed.
- If showing a prompt, input, command, or assistant interaction, make it feel like a believable interaction from the user’s product, with a clear input boundary and understated action affordance.

## Interaction and responsiveness
- Cards may lift by 2–4px on hover with a subtle shadow or border-color change; keep motion short and calm, around 160–220ms.
- If media contains animated UI, use a gentle, purposeful transition rather than continuous distracting motion. Respect `prefers-reduced-motion`.
- Ensure focus states are visible for any interactive card, tab, button, or link.
- On mobile, reduce headline size to approximately 34–42px, reduce card padding, and preserve comfortable touch targets of at least 44px.
- Do not let decorative media push the grid beyond the viewport or cause horizontal scrolling.

## Content guidance
- Write original copy for the user’s product. Explain how the capabilities work together, not just a list of isolated features.
- Use concrete, benefit-led language and keep each message concise.
- Choose feature visuals that reflect the product’s real workflows and audience.

## Never
- Never use logos, product names, copy, illustrations, icons, screenshots, or imagery from the reference.
- Never reproduce the reference layout pixel-for-pixel or imitate its exact feature examples.
- Never use placeholder brand assets when the user’s own product assets are available.
- Never make the section dependent on decorative imagery to communicate its purpose.
- Never sacrifice accessibility, responsive behavior, or readability for visual similarity.