## 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/render-com/a2f1bfec-cff8-46a3-938e-5c68bed6eccd-1789073950-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/render-com/a2f1bfec-cff8-46a3-938e-5c68bed6eccd-1789073879-full.webp
- Component on Kage: https://kage.design/component/render-feature-grid-3

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colours, and typography are. Then apply the principles below to create an original feature-grid section for my product—not a copy of the reference.

## Build this section
Create a responsive feature-grid section for a modern developer-focused SaaS or infrastructure product. The section should communicate a clear product promise followed by several practical capabilities.

### Layout and alignment
- Use a white or near-white canvas with a centered content container, approximately 960–1120px wide on desktop.
- Begin with generous top spacing, around 110–140px, so the section feels like a deliberate transition from the content above.
- Align the heading, supporting paragraph, and feature grid to the same left content edge.
- Use a large editorial heading constrained to roughly 650–760px so it wraps naturally into two lines on desktop.
- Place a short supporting paragraph beneath the heading, constrained to about 560px.
- Position the features in one horizontal row on wide screens, using four equal columns with a 28–40px gap. Each column should be top-aligned.
- On medium screens, allow two columns per row; on small screens, stack the cards vertically while preserving generous vertical rhythm.
- Keep the grid visually light: cards do not need filled containers or heavy shadows. Let spacing and subtle separators create hierarchy.
- Optionally add a very faint technical grid or ruled band above/below the section as a background detail, but keep it secondary and never let it reduce readability.

### Typography hierarchy
- Use a clean modern sans-serif with a slightly technical, precise feel. If the product has a brand font, use it; otherwise choose a neutral sans-serif with excellent screen rendering.
- Main heading: approximately 56–64px desktop, 1.02–1.08 line-height, normal or light weight, with slightly tight tracking. On mobile, reduce to around 38–44px.
- Supporting copy: approximately 23–26px desktop, around 1.25–1.35 line-height, medium gray, and no more than two or three short lines.
- Feature titles: approximately 18–20px, medium weight, around 1.2 line-height.
- Feature descriptions: approximately 16–17px, 1.4–1.5 line-height, muted gray, and limited to a few concise lines.
- If a feature has a status label, use a small uppercase or compact label at about 11–12px with increased letter spacing.

### Colour
- Base background: near-white, approximately #FFFFFF or #FCFCFB.
- Primary text: very dark charcoal, approximately #151515 or #171717.
- Secondary text: neutral gray, approximately #5C5C5C to #666666.
- Use a restrained accent for icons and status labels, such as violet-purple #8B5BC7, #9759C9, or an equivalent colour from the product brand.
- Technical grid lines and dividers should be extremely subtle: approximately #E6E6E6 or rgba(20,20,20,0.10).
- Ensure all body text and interactive states meet accessible contrast requirements.

### Icons and feature treatment
- Give every feature a small, simple line icon above its title. Use consistent stroke width, optical size, and the accent colour.
- Prefer abstract product-relevant symbols—runtime, configuration, environments, storage, security, workflow, or deployment—without using logos.
- Keep icons around 20–24px and provide approximately 18–22px of space before the feature title.
- Write each feature as a short title plus one clear sentence explaining its user benefit.
- A compact “coming soon” or status badge may sit between the title and description. Style it as a thin outlined label with the accent colour, small type, minimal padding, and a modest radius.

### Borders, radius, and depth
- Avoid card shadows and glossy effects.
- If cards have boundaries, use only 1px lines in a very light gray; otherwise rely on whitespace.
- Use small radii, around 2–6px, for labels and any outlined interactive elements.
- Keep the overall visual language crisp, flat, technical, and editorial.

### Interaction and responsiveness
- If feature items are clickable, make the entire item an obvious focusable target and add a subtle hover state: accent-colour title/icon, a faint background tint, or a light bottom border.
- Include visible keyboard focus styles with sufficient contrast.
- Do not require animation for comprehension. If motion is used, keep it subtle and fast—such as a 150–220ms colour or border transition.
- On mobile, preserve the heading-to-grid relationship and ensure icons, labels, titles, and descriptions remain easy to scan.
- Use semantic HTML: a section with a heading, an introductory paragraph, and a list of feature items. Keep text lengths adaptable to the user’s product.

## Never
- Never copy the reference’s logos, product names, brand marks, or proprietary symbols.
- Never reuse the reference’s exact copy, feature names, wording, or status labels.
- Never use illustrations, screenshots, or imagery from the reference.
- Never reproduce the section as a pixel-perfect clone; preserve only the reusable layout, hierarchy, and interaction principles.
- Never invent brand colours or typography when the user has supplied an existing product system; adapt the rules to that system instead.