## 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/convex-dev/1b90134a-1727-4d68-9c37-d8b1750ddf17-1789074851-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/convex-dev/1b90134a-1727-4d68-9c37-d8b1750ddf17-1789074817179-full.webp
- Component on Kage: https://kage.design/component/convex-feature-grid

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and visual system are. Then apply the principles below to create an original feature section for that product—not a copy of the reference.

## Build this section
Create a responsive, proof-led feature section that explains why a product is dependable. Use a two-column composition: an editorial content column on the left and a restrained technical visualization on the right. The section should feel precise, calm, and confident rather than promotional or decorative.

### Layout and alignment
- Use a wide section container with a maximum width around 1180–1280px and generous horizontal padding of 40–64px on desktop.
- Align all left-column content to one vertical edge.
- Keep the left column approximately 55–58% wide and the right visual approximately 42–45% wide.
- Vertically center the right visual against the main content, allowing it to extend close to the section’s lower edge.
- On smaller screens, stack the content above the visual; preserve the order of heading, supporting copy, checklist, supporting statement, CTA, then visualization.
- Use a shallow section height on desktop, roughly 430–500px, but let content determine height on mobile.

### Typography hierarchy
- Use a bold, compact display heading at approximately 40–48px with a tight line-height around 0.95–1.05.
- Set supporting copy at 17–19px with a relaxed 1.35–1.5 line-height and a readable maximum width around 500px.
- Present feature rows at 15–17px. Bold the capability or technical phrase, then use regular weight for the outcome-oriented explanation.
- Use a short, bold supporting statement beneath the checklist at roughly 16–18px.
- Use sentence case throughout and keep copy direct, specific, and benefit-led.

### Checklist treatment
- Create four horizontally stacked rows inside a single bordered panel.
- Give each row a height around 36–38px with 1px dividers between rows.
- Place a small square status/check icon at the start of each row, approximately 19–21px. Use a muted cool accent fill and a simple light check mark.
- Keep row padding compact: around 8px horizontal and 7–9px vertical.
- Ensure the checklist remains legible at narrow widths; allow text to wrap rather than forcing horizontal overflow.

### Colour and surfaces
- Use a warm, lightly tinted page background, approximately #F5EEDF or another brand-appropriate soft neutral.
- Use near-black text, approximately #242321.
- Use thin low-contrast rules around #D8D1C4 or a related desaturated neutral.
- Give the technical visualization a subtly distinct surface, such as #F7F1E6, with a fine grid in #DDD8CC.
- Use restrained accent blocks in one cool muted tone such as #AAB8C9 and one warm muted tone such as #B98A62. Keep accents sparse so the section remains editorial.
- Make the CTA a dark filled pill, approximately #292824, with warm-white text.

### Borders, radius, and spacing
- Use mostly square or very lightly rounded panels: 0–2px radius for the checklist and visualization.
- Use a fully rounded CTA with a radius of 999px and compact padding around 13px 24px.
- Use approximately 16–20px between heading and supporting copy, 14–16px before the checklist, 16–18px after the checklist, and 20–24px before the CTA.
- Keep the visualization separated from the content by 40–64px on desktop.
- Add a strong dark horizontal boundary or footer transition below the section if it fits the surrounding page system, using approximately #171717.

### Technical visualization
- Build the right-side visual with CSS or SVG, not external imagery.
- Use a rectangular plotting area filled with a fine evenly spaced grid of horizontal and vertical rules.
- Add a few short horizontal bars or blocks positioned at different rows and columns, as if showing system activity, data flow, or a schedule.
- Keep most of the grid empty. The visualization is a quiet proof-of-system detail, not a chart that requires interpretation.
- Make the visualization responsive and clip or reflow decorative bars safely at its edges.

### Interaction and accessibility
- If the checklist rows are interactive, provide subtle hover or focus feedback without changing their layout; otherwise treat them as static proof points.
- Give the CTA a clear hover state, such as a slight brightness change or 2–3px upward translation, and a visible keyboard focus ring.
- Use semantic heading, list, and button/link elements.
- Maintain WCAG-friendly contrast and never rely on the muted grid or colour blocks alone to convey meaning.

## Never
- Never use logos, product names, branded marks, or recognizable wording from the reference.
- Never copy the reference’s feature claims, CTA text, or supporting copy; write new content for the user's product.
- Never reuse the reference illustration or any external imagery.
- Never reproduce the exact arrangement, dimensions, or decorative details if a different composition better serves the user's brand.
- Never make the grid, checklist, or accents so prominent that they compete with the product’s core message.