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

## Before you start
Ask the user what their product is, who it is for, and what visual brand language they want to use. Then apply the principles below to create an original version for their product rather than reproducing the reference.

## Build a split feature-introduction section
Create a spacious, responsive feature section for a modern software landing page. The section should introduce a helpful product capability with a short heading, supporting paragraph, primary call-to-action, and a visual area containing a small group of friendly abstract product-related forms.

### Layout and alignment
- Use a centered content container around 1100–1200px wide with generous horizontal padding: approximately 32px on desktop and 20px on mobile.
- On large screens, use a two-column split: text on the left at roughly 42% width and the visual composition on the right at roughly 58%.
- Align the text block to the left and vertically center it within the section. Keep the copy width around 360–430px for comfortable reading.
- Use a generous section height or vertical padding, approximately 110–150px top and bottom on desktop and 72–96px on mobile.
- Place a very subtle horizontal divider near the bottom of the section to separate it from the following feature.
- On small screens, stack the text above the visual. Preserve the left alignment of the copy while centering or carefully balancing the visual composition below it.

### Typography hierarchy
- Use a clean, modern sans-serif with a friendly but confident tone.
- Set the heading in a bold or semibold weight, approximately 36–42px on desktop, 30–34px on mobile, with tight line-height around 1.05–1.15 and slight negative tracking.
- Set the supporting paragraph around 16–18px with 1.55–1.7 line-height. Keep it muted rather than pure black.
- Use a compact, high-contrast CTA label around 14px with semibold weight.
- Keep the hierarchy short: one heading, one concise paragraph, and one primary action.

### Colour and surfaces
- Use a warm near-white page background such as #fcfbf8 or #fdfcf9.
- Use a deep charcoal for headings and buttons, approximately #242424 or #252525.
- Use a soft neutral gray for body copy, approximately #737373.
- Use a very light warm-gray divider, approximately #eceae5.
- For the visual forms, use a small palette of gentle, optimistic accent colours—lavender around #9b8ce3, coral around #d77f7e, and soft aqua around #8cc9cc—against the quiet background.
- Avoid gradients unless the product brand specifically calls for them; prefer flat, softly coloured shapes.

### Illustration and composition
- Create an original abstract visual system related to the user's product: for example, three simplified companions, tools, panels, or avatars arranged with slight variation in scale and position.
- Keep the visual secondary to the message. Leave ample negative space around it and avoid a dense illustration scene.
- Use rounded organic silhouettes, minimal facial or interface details, and a playful but polished character. If using figures, vary their poses or expressions subtly so the group feels alive rather than duplicated.
- Anchor the visual elements along a loose baseline while allowing small vertical offsets for rhythm.
- Do not make the illustration depend on exact assets; build it with CSS, inline SVG, or the user's own visual assets as appropriate.

### Button and interaction
- Style the primary CTA as a dark pill with approximately 40–44px height, 18–22px horizontal padding, and a radius of 999px.
- Include a small contextual icon only if it is meaningful to the user's product; otherwise use a text-only button.
- Add a restrained hover state such as a slightly lighter charcoal background, a 1–2px upward movement, or a subtle shadow. Include visible keyboard focus styling.
- If the visual elements are interactive, use only gentle hover motion or a small change in expression/position. Do not let animation distract from the CTA.
- Respect reduced-motion preferences.

### Responsive behaviour
- At tablet widths, reduce the gap and visual scale before stacking.
- At mobile widths, keep the heading readable, allow the paragraph to span most of the available width, and ensure the CTA remains easy to tap.
- Make the illustration scale fluidly without clipping or causing horizontal scrolling.

### Accessibility and implementation
- Use semantic heading, paragraph, and button/link elements.
- Provide useful alternative text for meaningful visuals; mark purely decorative shapes as hidden from assistive technology.
- Maintain strong contrast for body text and the CTA.
- Build the section as a reusable component with configurable copy, CTA label/link, accent palette, and visual variant.

## Never
- Never copy the reference's logos, product names, brand marks, or exact copy.
- Never reuse the reference's specific characters, illustrations, imagery, or asset files.
- Never recreate the composition so precisely that it becomes a visual clone; use the layout principles while inventing new content and visual forms.
- Never use placeholder text that implies the reference product.
- Never sacrifice responsive behaviour, accessibility, or readable contrast for visual similarity.