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

## Before you start
Ask the user what their product does, who it is for, and what visual brand it uses. Then apply the principles below to create a version that belongs to their product rather than reproducing the reference.

## Goal
Build a responsive feature-grid section that explains several product capabilities through a sequence of visual previews and concise editorial copy. The section should feel calm, premium, and product-led: interface previews provide evidence, while the text explains the benefit and supporting details.

## Design language

### Layout and alignment
- Use a centered content container with a generous maximum width, approximately 1120–1200px, and responsive horizontal padding of 24–64px.
- Compose each feature row as a two-column grid: a visual preview column and a content column. On desktop, use roughly 42% for the preview and 58% for the copy, with a 48–64px gap.
- Alternate or vary the visual placement across rows when useful, but preserve a consistent reading rhythm and shared column edges.
- Vertically align the preview near the upper portion of the corresponding copy rather than centering it mechanically.
- Separate feature rows with very subtle horizontal rules and generous vertical padding, approximately 72–112px per row.
- On smaller screens, collapse to one column. Place the preview before its copy, reduce row padding to roughly 48–64px, and keep the content order logical for scanning.

### Typography hierarchy
- Use a clean modern sans-serif with a slightly heavier display weight for headings; use the product’s own typeface if available.
- Add a small eyebrow above each feature title. It may include a simple neutral line icon, but it should remain quiet and secondary.
- Feature headings should be compact and confident: approximately 24–28px desktop, 22–24px mobile, with tight line-height around 1.1–1.2 and a weight around 650–750.
- Supporting descriptions should be 16–18px with a relaxed 1.45–1.6 line-height and a muted tone.
- Supporting feature points should read like short rows, not full paragraphs. Keep them around 15–16px with 1.4 line-height.

### Colour
- Use a warm or neutral page background such as #FAFAF8 or #FFFFFF, chosen to suit the user’s brand.
- Use near-black for primary text, approximately #1D1D1B.
- Use a soft grey for descriptions and metadata, approximately #777774.
- Use a low-contrast divider, approximately #E6E6E2.
- Let the UI preview carry most of the visual colour; keep the surrounding section restrained. Any accent colour should come from the user’s product palette and be used sparingly for active states or emphasis.

### Borders, surfaces, and radius
- Use 1px dividers with low contrast rather than heavy cards or shadows.
- Treat each preview as a contained product surface with a modest radius, approximately 10–14px, matching the user’s interface language.
- Avoid decorative containers around the copy. The whitespace and dividers should establish structure.
- Use only subtle shadows when needed to separate a preview from a light background; keep them soft and broad, for example rgba(0,0,0,0.08).

### Interaction and responsive behaviour
- If feature rows are interactive, make the entire preview or row keyboard-accessible and provide a clear hover/focus treatment, such as a slight border or accent change.
- Do not rely on hover alone to communicate essential information.
- Use responsive previews that remain legible without forcing horizontal scrolling. Crop or simplify mock interface details on narrow screens.
- Respect reduced-motion preferences. Any reveal or hover animation should be short, subtle, and non-essential.
- Ensure text and dividers meet accessible contrast requirements, and preserve visible focus states.

## Content guidance
- Write one benefit-led heading, one short explanatory paragraph, and two or three concise supporting points for each feature.
- Keep the copy specific to the user’s product, but avoid bloated descriptions. The visual should demonstrate the capability while the text explains why it matters.
- Use realistic interface states from the user’s product domain rather than generic dashboard filler.

## Never
- Never copy the reference’s logos, product names, brand marks, or proprietary UI labels.
- Never reuse the reference’s exact copy, feature names, or wording.
- Never reproduce the reference’s screenshots, illustrations, imagery, or distinctive interface assets.
- Never make a pixel-for-pixel clone; translate the layout principles into the user’s own product and brand.
- Never add unnecessary gradients, heavy cards, excessive shadows, or decorative content that weakens the editorial rhythm.