## 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/noodle-seed/892ab390-1bf9-4a7d-a1b3-8cebe5820ba8-1789106719-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/noodle-seed/892ab390-1bf9-4a7d-a1b3-8cebe5820ba8-1789106640138-full.webp
- Component on Kage: https://kage.design/component/noodle-seed-feature-grid-4

# Before you start
Ask me what my product does, who it is for, and what its brand personality and visual identity are. Then apply the principles below to my product rather than reproducing the reference literally.

## Build an editorial feature-grid section
Create a responsive feature section for a software product that explains a small sequence of capabilities or stages. The composition should feel restrained, premium, technical, and editorial: a structured list of features on the left and a large visual or proof panel on the right.

### Layout and alignment
- Use a full-width section on a near-black background with a centered content container, roughly 1120–1200px wide.
- On desktop, use a two-column grid: a narrower text column around 40–44% wide and a wider visual panel around 56–60% wide. Align both columns to the top.
- Keep the feature list vertically ordered and easy to scan. Each row should be a horizontal mini-grid with three zones: a small sequence number, a short feature title, and a concise explanatory paragraph.
- Add generous vertical padding to the section and enough empty space around the content that the layout feels calm rather than dashboard-like.
- Place a large bordered visual/proof panel beside the list. It can contain a product-specific abstract diagram, interface crop, data visualization, or other brand-appropriate visual—not a decorative image by default.
- On smaller screens, stack the list above the visual panel. Preserve the reading order, reduce column gaps, and allow the panel to use a practical aspect ratio rather than forcing desktop dimensions.
- If this section is part of a longer page, use a subtle full-width divider at its bottom to establish a clear transition.

### Typography hierarchy
- Use a clean sans-serif or the product’s existing typeface.
- Feature titles should be medium-weight, approximately 16–18px, with a bright off-white colour.
- Supporting descriptions should be approximately 15–16px, regular weight, with a muted grey colour and a relaxed line height around 1.5–1.65.
- Sequence numbers should be small, compact, and visually secondary; use a warm accent colour and optional tabular numerals.
- Keep paragraphs narrow enough to remain readable, around 28–34 characters per line where possible.
- Avoid oversized headings inside the grid unless the surrounding page requires one; let the numbered rows carry the narrative.

### Spacing and rhythm
- Use a consistent 8px spacing system.
- Give the section 80–128px of vertical padding on desktop and 56–80px on mobile.
- Separate feature rows with 1px rules and approximately 24–32px of vertical padding per row.
- Use 24–40px between the number and title, and 28–48px between the text column and the visual panel depending on viewport width.
- Keep the visual panel tall enough to balance the cumulative height of the feature list without feeling oversized.

### Colour, borders, and shape
- Start with a near-black base around #050505 or #070707.
- Use off-white for primary text, approximately #E8E6E2.
- Use cool neutral grey for body copy, approximately #858585 to #999999.
- Use a subdued warm accent for numbering, approximately #B56A4B or another colour drawn from the product brand.
- Use very low-contrast dividers around #242424 to #2D2D2D.
- Give the visual panel a 1px border and a square or very lightly rounded treatment, around 0–4px radius. Avoid card-heavy styling, shadows, gradients, or excessive chrome.
- Keep the panel interior dark and quiet so the visual feels embedded in the page rather than like a separate card.

### Interaction and responsive behaviour
- If the feature rows are interactive, make the entire row keyboard accessible and provide a clear hover/focus state: brighten the title, slightly increase the accent visibility, or reveal a related state in the visual panel.
- Do not rely on hover alone; the content must remain fully understandable without interaction.
- Use smooth, restrained transitions around 150–250ms. Avoid dramatic motion.
- Ensure visible keyboard focus rings, sufficient colour contrast, semantic headings, and screen-reader-friendly labels for any visual or controls.
- On mobile, keep each feature row readable with the number, title, and description arranged as a compact two-column layout; move the description beneath the title if horizontal space is limited.

### Content guidance
- Write concise, product-specific feature labels and descriptions based on my product after asking the preliminary questions.
- Structure the features as a meaningful progression, such as connect → configure → monitor → verify, but choose verbs that fit the product.
- Use the visual panel to reinforce the core promise with evidence or a product state, not a random stock image.

## Never
- Never copy the reference’s logos, product names, brand language, or exact copy.
- Never reuse the reference’s horse imagery, illustrations, visual assets, or any other imagery from the reference.
- Never make the implementation look like a pixel-for-pixel clone; adapt the layout, content, accent colour, typography, and visual panel to my product and brand.
- Never add unnecessary logos, stock photography, gradients, ornamental effects, or generic dashboard decoration.
- Never sacrifice accessibility or mobile readability for visual similarity.