## 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/gojo/109391a8-f454-43af-b6cd-05815ad35e3c-1789106543-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/gojo/109391a8-f454-43af-b6cd-05815ad35e3c-1789106501929-full.webp
- Component on Kage: https://kage.design/component/gojo-feature-grid-3

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

## Build this component
Create a polished feature-grid row that explains one product capability beside a wide UI preview. The section should feel editorial, calm, and product-led, with the written explanation doing equal work to the interface visual.

### Layout and alignment
- Use a full-width section with a thin horizontal divider at the top and bottom.
- Center the content inside a generous max-width container, approximately 1150–1200px wide.
- Use a two-column layout on desktop: the text column should occupy roughly 42% of the row and the preview column roughly 58%.
- Align the text and preview vertically around the middle rather than forcing both to start at the same y-position.
- Keep a substantial horizontal gap between columns, around 48–64px.
- Give the section generous vertical padding, around 72–96px desktop and 48–64px mobile.
- On smaller screens, stack the text above the preview, preserving a clear gap between them.
- Make the preview responsive and prevent it from becoming too small to understand.

### Text hierarchy
- Begin with a small eyebrow label containing a minimal neutral icon and uppercase or small-cap text. Keep it restrained and letter-spaced.
- Follow with a short, confident headline of one or two lines. Use a dark near-black colour such as `#171717`, a compact sans-serif typeface, and a size around 22–26px with tight line height.
- Add a muted explanatory paragraph below it. Use approximately 16–18px text, a line height around 1.55, and a grey such as `#777777`.
- Under the paragraph, include two or three concise benefit rows. Separate them with fine horizontal rules in `#E5E5E5`; use comfortable vertical padding, around 14–16px.
- Keep benefit copy short and scannable. Do not add unnecessary icons, badges, or calls to action unless they are genuinely useful for the product.

### Preview treatment
- Show a contained product UI preview that demonstrates the capability described by the text.
- Use a wide aspect ratio, approximately 16:7 or 3:1, with enough internal detail to suggest a real working interface.
- Place the preview inside a soft rounded container with a radius around 10–14px.
- Use a restrained border or subtle shadow rather than a heavy card treatment. A suitable border is `#D8D8D8`; an optional shadow can be `0 8px 24px rgba(0,0,0,0.08)`.
- The preview may use a dark interface surface such as `#080808` against a pale neutral outer surface such as `#BFC8D0`, but adapt the palette to the user’s brand.
- Include realistic but generic interface primitives—navigation controls, a content thumbnail or data area, a title, progress/status information, and a few controls—so the visual communicates function without becoming cluttered.
- Keep the preview visually subordinate to the headline: it should demonstrate the product, not compete with the copy.

### Colour, borders, and spacing
- Base the section on a warm or neutral white such as `#FFFFFF` or `#FAFAF9`.
- Use near-black for primary text, medium grey for supporting text, and very light grey for dividers.
- Keep borders 1px and low contrast. Avoid excessive cards, gradients, or decorative effects.
- Use an 8px spacing system where practical; maintain larger jumps between eyebrow, headline, paragraph, and benefit list.
- Use one consistent corner-radius family. The preview can be slightly rounder than text rows, but avoid pill-shaped containers unless the product requires them.

### Interaction and responsiveness
- If the benefit rows are interactive, provide a subtle hover or focus state using a slightly darker text colour or a soft background tint; never rely on colour alone.
- Ensure keyboard focus is visible and the layout remains readable at narrow widths.
- On mobile, let the preview scale to the container width and preserve its aspect ratio; allow internal UI details to simplify rather than overflow.
- Respect reduced-motion preferences and avoid animated decoration. Any preview animation should be subtle and functional.

## Never
- Never reuse logos, product names, brand marks, or copy from the reference.
- Never reproduce the reference interface, artwork, thumbnail, or exact media controls.
- Never use the reference product’s illustrations, imagery, screenshots, or distinctive visual assets.
- Never make the section dependent on the user knowing the reference page.
- Never overcrowd the row with extra features, badges, or decorative graphics; preserve the clear text-plus-preview composition.