## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ai-observability-by-openobserve/e945d001-9c66-4981-a493-d9cb08ea77ee-1789106452566-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ai-observability-by-openobserve/e945d001-9c66-4981-a493-d9cb08ea77ee-1789106447582.webp
- Design on Kage: https://kage.design/designs/ai-observability-by-openobserve-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, type choices, logos, and imagery). Wait for their answers before designing. Apply everything below to their product, using their content and brand rather than copying the reference.

## Page structure
1. **Announcement bar and global navigation** — Put a slim dark-purple announcement strip at the very top with event text, date, time, and a compact registration button; follow it with a white navigation row containing the product mark, primary links, utility/search controls, download and demo actions, and a login menu.
2. **Breadcrumb and hero** — Add a small breadcrumb, a pill-shaped section label, a large centered headline with a multicolour gradient emphasis, a concise explanatory paragraph, paired primary and secondary buttons, and a wide product-interface collage below. Include a small carousel position indicator beneath the image.
3. **Purpose/value proposition** — Use a centered eyebrow and headline on white, followed by a short paragraph and three equal white cards explaining the main benefits. Keep the cards lightly bordered or shadowed and use small purple feature icons.
4. **Integration grid** — Transition into a pale cyan background. Center an eyebrow, heading, and intro, then show a dense three-column grid of integration cards. Each card has a product icon, external-link affordance, title, one-line description, and a small category tag; finish with a centered “view all” link.
5. **Feature walkthrough section** — Deepen the background into a saturated blue-to-indigo gradient. Introduce the section with a centered heading, then stack four large white rounded panels vertically: Trace & map, Debug sessions, Evaluate in production, and Close the loop. Each panel uses a two-column layout with explanatory copy, a short checklist, and a framed product screenshot; alternate or balance image placement for visual rhythm.
6. **Unified platform section** — Continue into violet/indigo. Add a centered eyebrow, heading, and supporting copy, followed by one large white rounded interactive diagram panel. Give it a small title, segmented tabs near the top, an expansive architecture illustration, and a subtle interaction hint along the bottom.
7. **Deployment options** — Use a darker blue-purple field with a centered eyebrow, heading, and paragraph. Present three equal white cards for managed cloud, self-hosted, and bring-your-own-storage, each with a purple icon, title, and compact explanatory text.
8. **Resources** — Shift to a near-black plum background. Center the resources heading and intro, then show three article/video cards in a horizontal row with image thumbnails, content type labels, and titles. Add carousel dots and a centered explore-all-resources link.
9. **FAQ** — Keep the dark background and place a centered FAQ heading above a narrow vertical accordion. Show a few expanded answers followed by collapsed questions; use translucent dark panels, fine borders, generous padding, and clear chevrons.
10. **Final pricing CTA** — Add a subtle dotted texture over the dark plum background. Center a final heading and supporting copy, then place three pricing/action cards in a row: enterprise professional, cloud free trial, and enterprise premium. Use a purple-filled middle card, top badges, prominent buttons, and a pricing-details link below.
11. **Footer** — End with a near-black footer containing multiple columns of small navigation links, a white newsletter signup card, certification/security marks, and the company/legal row. Include social icons and repeat the announcement strip as a compact footer banner above the legal details.

## Design language
- Build hierarchy with a restrained type scale: compact 12–14px utility text, 16–18px card titles, 28–40px section headings, and a 48–64px hero headline. Use a geometric rounded sans with heavy headings and regular-weight body copy.
- Keep the opening hero spacious and low-density, then increase density through the integration grid and feature walkthroughs. Restore breathing room in the platform and deployment sections, and finish with compact resources, FAQs, pricing, and footer navigation.
- Treat the page as a sequence of colour climates: white hero (`#ffffff`), pale cyan integration field (`#d8f4fa`), vivid blue/indigo feature field (`#178dcc` to `#695cf0`), violet platform field, and near-black plum content/footer (`#100620` to `#0d0d12`).
- Use purple as the primary action colour (`#5b2bd6` or `#6234d8`), with blue and cyan for environmental gradients. Reserve green for small status dots and use warm coral/pink only in screenshot accents or subtle gradient edges.
- Use white cards against coloured backgrounds to create clear layers. Prefer 1px low-contrast borders, 10–18px corner radii, and soft diffuse shadows; avoid heavy outlines, bevels, or excessive glass effects.
- Make card grids orderly: equal columns, consistent gaps, aligned icon/title/body/tag baselines, and short descriptions. Let the four feature panels become larger editorial compositions rather than another compact grid.
- Frame product screenshots inside clean white panels with thin cyan/pink edge highlights or a faint glow. Use diagrams and interface imagery as large explanatory anchors, not decorative background clutter.
- Buttons should be compact, rounded, and high contrast: filled purple for the main action, white or outlined controls for secondary actions, and dark charcoal for premium/contact actions. Include small directional arrows where the action leads elsewhere.
- Use interaction cues sparingly: carousel dots below image/card groups, pill tabs inside the platform diagram, chevrons in FAQ rows, hover lift or border-colour changes on cards, and subtle button colour transitions. Keep motion short and functional rather than theatrical.
- On responsive layouts, collapse navigation controls, turn three-column grids into one or two columns, stack feature-panel media below copy, and keep the pricing cards readable without shrinking type excessively.

## Never
- Do not use any logos, wordmarks, product names, copy, illustrations, photography, screenshots, diagrams, icons, or icon sets from the reference.
- Do not reproduce the reference brand, OpenObserve identity, or its exact text and claims.
- Do not present the result as OpenObserve or imply affiliation with it.
- Replace all reference assets and content with the user’s own product, audience, brand system, and original UI examples.