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

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

## Build this section
Create a responsive integrations or ecosystem feature section for a modern B2B software product. The section should communicate broad compatibility through a centered introduction followed by a dense, highly scannable card grid.

### Layout and alignment
- Use a full-width section with a soft, pale cyan-to-blue background transition; adapt the hue to the user's brand rather than copying it literally.
- Constrain the content to approximately 1120–1200px and center it horizontally.
- Start with a compact outlined status/eyebrow pill containing a small green status dot and short compatibility-oriented text.
- Place a centered headline below it, followed by a centered, two-line maximum supporting paragraph with a comfortable reading width of roughly 650–760px.
- Leave a generous gap between the intro and the grid.
- Use a three-column grid on desktop, two columns on medium screens, and one column on small screens. Keep card widths equal and row/column gaps consistent, around 16–20px.
- After the grid, add a centered text link for viewing the complete directory, with a small arrow pointing right.
- Preserve generous vertical padding above and below the section so it feels like a major page module.

### Card anatomy
- Build cards as white or near-white rounded rectangles, approximately 220–240px tall depending on content.
- Align every card's content to the same left edge and use a predictable vertical rhythm:
  1. integration mark or abstract placeholder icon at the top left;
  2. small northeast/outbound arrow at the top right;
  3. bold integration name;
  4. one or two lines describing the supported workflow;
  5. compact category pill at the bottom.
- Use flex or grid layout so the category pill stays aligned near the bottom even when descriptions vary slightly.
- Keep internal padding around 26–28px on desktop and 22–24px on mobile.
- Use varied, simple abstract marks or product-neutral symbols only when the user's product needs them. Do not rely on real third-party logos.

### Typography
- Use the product's existing sans-serif brand font if available; otherwise choose a clean contemporary grotesk.
- Section headline: approximately 30–34px, 700 weight, tight line height around 1.1–1.2, near-black.
- Supporting copy: approximately 16px, 400–450 weight, 1.65 line height, dark slate.
- Card title: approximately 17–19px, 700 weight, near-black.
- Card description: approximately 14–15px, 400–450 weight, 1.4–1.5 line height, muted gray.
- Eyebrow, category pills, and utility link: approximately 11–14px; use weight and casing sparingly for hierarchy.

### Colour and surfaces
- Use an approximate background gradient from pale cyan `#d8f1f6` through medium blue `#54bdd8` to deeper cyan-blue `#1598c2`, but tune the values to the user's brand.
- Use card surfaces around `#ffffff` or `#fbfdfe`.
- Use primary text around `#17212b`, secondary text around `#5f646b`, and link/accent text around `#4336a8` or the product's accent colour.
- Use a small success/status dot around `#16a34a`.
- Category pills can use a very pale lavender or cool gray fill such as `#f1eff8`, with muted purple-gray text around `#5d5684`.
- Keep contrast accessible, especially for small pill and card-description text.

### Borders, radius, and elevation
- Use a subtle 1px border around cards, approximately `rgba(24, 43, 52, 0.08)`.
- Use medium rounded corners around 9–12px; keep the radius consistent across cards and pills, with pills more fully rounded.
- Use a soft, diffuse shadow such as `0 8px 18px rgba(35, 92, 105, 0.14)` rather than a sharp drop shadow.
- The eyebrow can use a thin accent border and a transparent or lightly tinted background.
- Avoid excessive decoration: the gradient, card rhythm, and small accent details should carry the visual interest.

### Interaction and responsive behaviour
- Make each card discoverable as an interactive target if it represents a detail page. On hover, slightly raise the card, strengthen its border or shadow, and shift the arrow/accent colour; keep the movement subtle, around 2–4px.
- Make the entire card clickable where appropriate, with a clear keyboard focus ring and visible focus state.
- Ensure the outbound arrow remains legible and aligned at every breakpoint.
- On mobile, stack the intro and cards, reduce section padding, preserve generous card spacing, and keep descriptions readable without truncation.
- If the directory is long, show a curated initial set and let the centered “view all” link expand or navigate to the full collection.
- Add accessible labels for icons and meaningful focus states; do not communicate category or status by colour alone.

## Never
- Never reuse logos, product names, integration names, copy, illustrations, imagery, or exact content from the reference.
- Never reproduce the reference page's brand identity or make the section look like a disguised clone.
- Never use arbitrary logo images or trademarked marks as placeholders; use neutral symbols or original marks.
- Never make all cards visually different in ways that damage scanning consistency.
- Never sacrifice responsive layout, keyboard access, colour contrast, or readable text for visual similarity.