## 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-1789106505-2.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

# Build a differentiated B2B feature-grid section

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

## Goal
Create a responsive marketing section that communicates three or more product advantages in a compact feature grid. It should feel credible, technical, calm, and easy to scan—appropriate for a developer-focused SaaS or infrastructure product.

## Design language

### Layout and alignment
- Use a full-width section with a very light, cool-tinted background that can transition softly from the preceding section; approximate base colour `#F3FCFD` or a similarly pale cyan.
- Center the introductory content in a constrained container around `760–820px` wide.
- Place a small outlined eyebrow above the heading. It should be horizontally centered and contain a small coloured status dot plus a short, product-specific label.
- Follow it with a large centered heading, then a centered supporting paragraph with a comfortable reading width of roughly `680–760px`.
- Below the introduction, place a three-column card grid in a wider container around `1180–1240px`. Keep the columns equal in width and use a gap of approximately `22–28px`.
- On tablet, move to two columns; on mobile, stack the cards in one column with consistent vertical spacing.
- Align the contents of every card to the top and keep the icon, title, and body copy in the same vertical rhythm across cards.

### Typography hierarchy
- Use a modern sans-serif with a clean, slightly geometric feel. Use the product’s existing typeface when available.
- Eyebrow: `14–16px`, semibold, compact line height.
- Main heading: approximately `36–42px` on desktop, `30–34px` on mobile; bold or semibold; tight line height around `1.1–1.2`.
- Supporting paragraph: `16–18px`, regular weight, line height around `1.55–1.7`.
- Card title: `18–20px`, semibold or bold, line height around `1.25`.
- Card body: `15–16px`, regular weight, muted but highly readable, line height around `1.45–1.6`.
- Use sentence case and keep card titles short enough to scan quickly.

### Spacing and sizing
- Give the section generous top and bottom padding: approximately `72–104px` on desktop and `56–72px` on mobile.
- Separate the eyebrow from the heading by `16–20px`, the heading from the paragraph by `14–18px`, and the introduction from the cards by `48–64px`.
- Cards should have approximately `30–34px` of internal padding on desktop and `24px` on mobile.
- Make cards visually substantial without forcing equal text lengths; use a minimum height only if needed to preserve a tidy row.

### Colour, borders, and radius
- Use a white or near-white card surface such as `#FFFFFF` against the pale background.
- Main text should be a deep charcoal, approximately `#202124`; secondary text can be `#5E6268`.
- Use a vivid but controlled accent for icons and eyebrow details, such as violet `#5B2DB3` paired with green `#18A957`, or adapt these hues to the user’s brand.
- Give cards a subtle border such as `1px solid rgba(30, 55, 70, 0.06)` and a soft shadow like `0 8px 18px rgba(30, 80, 90, 0.10)`.
- Use a modest card radius of `8–10px`; the design should feel polished but not playful or overly rounded.
- The eyebrow can use a thin accent-coloured border and a slightly smaller radius around `7–9px`.

### Icons and interaction
- Place one simple, monochrome or two-tone accent icon at the top of each card. Use familiar line or filled symbols that communicate the benefit, not decorative illustrations.
- Keep icons visually consistent, approximately `32–40px`, with enough space below them before the title.
- If cards are interactive, add a subtle hover state: slightly strengthen the border, lift the card by `2–4px`, and deepen the shadow. Preserve accessible keyboard focus styles.
- Do not add links or buttons unless the product strategy requires them; the cards should work as an explanatory value grid first.
- Ensure sufficient colour contrast, semantic heading structure, responsive wrapping, and reduced-motion support.

## Content guidance
- Write an eyebrow that frames the section’s point of view.
- Use a confident, benefit-led headline that explains why the product is meaningfully different.
- Use the supporting paragraph to establish the category problem or product philosophy in one or two sentences.
- Give each card a distinct advantage, with a concise title and two or three sentences of specific supporting copy. Prefer concrete operational outcomes over generic adjectives.

## Never
- Never copy the reference’s logos, product names, brand identity, exact copy, icon artwork, illustrations, or imagery.
- Never reuse the reference’s exact headline, card titles, paragraph text, or distinctive wording.
- Never make the cards visually identical to the reference; adapt the layout principles, hierarchy, and atmosphere to the user’s product and brand.
- Never use vague filler claims, excessive gradients, ornamental illustrations, or dense paragraphs that undermine quick scanning.