## 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/ai-observability-by-openobserve/e945d001-9c66-4981-a493-d9cb08ea77ee-1789106506-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ai-observability-by-openobserve/e945d001-9c66-4981-a493-d9cb08ea77ee-1789106452566-full.webp
- Component on Kage: https://kage.design/component/ai-observability-by-openobserve-feature-grid-3

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

## Goal
Build a vertically stacked feature showcase that explains several related product capabilities as a sequence of clear, benefit-led modules. The section should feel like a guided journey from understanding a problem to inspecting, improving, or completing a workflow. Pair every explanation with visual product proof such as a dashboard mockup, interface panel, diagram, or other product-relevant visual.

## Layout and alignment
- Place the section inside a full-width visual background with a smooth saturated gradient, approximately from cyan-blue `#159FC5` at the upper area through blue `#3688E5` to periwinkle `#716CF4` lower down. Adapt these colours to the user's brand.
- Constrain the content to a centered max-width of roughly `1180–1240px`, with generous horizontal gutters of `32–64px`.
- Add a centered section heading above the feature panels. Keep it short, outcome-oriented, and visually prominent.
- Stack 3–5 large white feature cards vertically with approximately `28–36px` between cards.
- Give each card a two-column desktop layout: text on the left at roughly 48–52% width and a product visual on the right at roughly 48–52% width. Vertically center the two columns, while allowing the text column to define the card's height.
- Use generous card padding of approximately `48–52px` on desktop. On smaller screens, collapse to one column, put the visual below the text, and reduce padding to `28–32px`.
- Maintain a consistent left edge for the icon, title, paragraph, and checklist within every card. Keep the visual aligned to a consistent right-side frame across cards.

## Typography hierarchy
- Use a modern sans-serif with a friendly, slightly rounded feel if that matches the user's brand.
- The section heading should be approximately `32–38px`, semibold or bold, with tight line-height around `1.1–1.2`.
- Feature titles should be approximately `20–22px`, bold, and placed beside a small icon.
- The lead paragraph should be approximately `16–18px`, with `1.55–1.7` line-height and strong contrast. Bold the first sentence or key benefit to create an immediate scan point.
- Checklist item titles should be `15–16px`, semibold or bold. Supporting descriptions should be `14–15px`, regular weight, with muted contrast and about `1.45` line-height.
- Keep paragraph measure controlled—roughly `42–52ch`—so the copy remains easy to scan.

## Spacing and structure
- Use `12–16px` between the icon/title row and the lead paragraph.
- Use `22–30px` between the lead paragraph and the checklist.
- Separate checklist rows by approximately `16–20px`.
- Give each checklist row a small circular check indicator, followed by a title and one concise supporting line.
- Use section-level vertical padding of approximately `88–120px` above and below the card stack.
- If there is supporting navigation or a small link above the heading, keep it understated and centered rather than letting it compete with the feature cards.

## Colour, borders, and surfaces
- Feature cards should be near-white, approximately `#FFFFFF` or `#FCFCFD`, against the saturated gradient.
- Use dark navy or charcoal text, approximately `#172238` or `#202333`.
- Use a pale lavender icon tile, approximately `#F0EDFF`, with a purple accent around `#5C36C9` or a brand-equivalent colour.
- Checklist checks should use the same accent colour and sit inside a very light tinted circle.
- Use a subtle border such as `1px solid rgba(30, 40, 90, 0.08)` and a soft shadow such as `0 10px 30px rgba(25, 50, 120, 0.10)`.
- Use a large card radius of approximately `24–28px`; use smaller `8–12px` radii for icon tiles and controls.
- Product visuals should sit in a framed surface with a thin, colourful or brand-relevant border and a restrained glow. Avoid making the glow more prominent than the UI itself.

## Product visual treatment
- Use a realistic but simplified product screenshot, dashboard mockup, diagram, or generated UI illustration that directly proves the feature described beside it.
- Keep the visual at a readable aspect ratio, usually around `16:9` or `4:3`, with rounded corners and a subtle shadow.
- Ensure visual content is crisp enough to communicate the concept at a glance, but do not overcrowd it with tiny unreadable labels.
- Vary the visual content from card to card while preserving the same frame, scale, and alignment so the stack feels systematic.
- If real screenshots are unavailable, create abstract interface mockups using panels, tables, charts, nodes, timelines, or status indicators rather than generic decorative art.

## Interaction and responsive behaviour
- Cards may remain static, but add a restrained hover treatment if appropriate: a slight lift, stronger shadow, or subtle border glow. Do not use exaggerated motion.
- If the visual is interactive, allow a gentle zoom or highlight on hover while preserving layout stability.
- On mobile, stack the copy and visual, keep checklist rows readable, and ensure the gradient and card padding do not feel cramped.
- Respect reduced-motion preferences and maintain keyboard-visible focus states for any links or controls.

## Content guidance
- Create 3–5 modules that represent distinct steps, capabilities, or outcomes in the user's product.
- Use benefit-led titles and a short explanatory paragraph, followed by exactly 3 concise proof points where possible.
- Make the first sentence answer why the feature matters; use the remaining copy to clarify how it works.
- Use original copy appropriate to the user's product. Do not reuse the reference's wording.

## Never
- Never copy the reference layout's exact copy, product names, brand language, or visual labels.
- Never use logos, product names, screenshots, illustrations, diagrams, or imagery from the reference.
- Never invent a visual that implies unsupported functionality in the user's product.
- Never let decorative gradients, glows, or mockups overpower the explanatory content.
- Never make every card visually identical if the product benefits would be clearer with varied, relevant UI proof.