## 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-1789106508-8.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-faq

## Before you start
Ask me what my product does, who it is for, and what its brand personality and visual identity are. Then apply the principles below to create an original pricing/conversion section for my product—not a copy of the reference.

## Build this section
Create a responsive pricing CTA section for a software product, especially one with multiple buying paths such as self-hosted, managed cloud, and enterprise. The section should feel like a confident handoff from product education to conversion.

### Design language

- **Overall composition:** Use a full-width, deep dark section with a centered headline and supporting paragraph above a three-card pricing choice. Keep the section visually self-contained and give it generous top and bottom padding. Finish with a small secondary link beneath the cards for users who want more detailed pricing information.
- **Background:** Use a near-black plum/navy base around `#100820` or adapt it to the product brand. Add a very subtle field of evenly spaced tiny square or dot marks across the background, with low-opacity violet tones around `#2A1748`. A restrained magenta-to-violet glow or gradient near the lower edge can add depth, but it should remain behind the content.
- **Alignment and layout:** Center-align the heading and description. Place the cards in a three-column grid with equal widths, consistent gaps, and a maximum content width of roughly `980–1120px`. On tablet and mobile, collapse to one column while preserving the highlighted card’s prominence.
- **Typography hierarchy:** Use a modern sans-serif with a friendly, slightly rounded feel. The heading should be bold and compact, approximately `28–34px` on desktop; supporting copy should be `16–18px`, relaxed line-height, and a muted lavender-gray. Card titles should be `18–20px` and semibold. Keep descriptions at `13–15px` with comfortable line-height. Buttons should use medium-to-semibold text at `15–16px`.
- **Cards:** Use two light cards and one visually emphasized featured card. Light cards can use an off-white surface around `#FAFAFA` with dark charcoal text around `#1B1B22`; the featured card can use a saturated violet/indigo gradient such as `#6332D8` to `#4F35D8` with white text. Use approximately `16px` corner radius, a subtle shadow, and consistent internal padding around `28–32px`.
- **Card structure:** Each card should have a short floating pill above its top edge for a useful qualifier, such as a trial length or usage allowance. Use a dark charcoal pill around `#202027`, white text, compact `12–13px` type, and a pill radius. Leave enough top padding so the pill never collides with the card content. Center the card title, short explanatory paragraph, and primary action.
- **Action hierarchy:** Give every card one clear full-width button. Use brand violet for light-card buttons, a white button with dark violet text on the featured card, and a dark near-black button for a high-touch enterprise option if appropriate. Buttons should be around `44–48px` tall, have `8–10px` radius, and include a subtle hover lift or brightness change. Use short labels and an optional directional arrow on the main self-serve action.
- **Spacing:** Provide roughly `64–88px` of top padding, `18–28px` between heading and description, `42–52px` between description and cards, and `28–36px` between cards and the secondary pricing link. Keep card content vertically balanced even when descriptions differ in length.
- **Responsive behavior:** At widths below approximately `800px`, stack the cards, reduce outer padding, and keep the featured plan either first or clearly marked. Ensure pills remain attached to their cards and buttons remain full width. Avoid horizontal scrolling.
- **Interaction and accessibility:** Make the entire button visibly interactive with hover, focus, and pressed states. Preserve strong contrast, provide keyboard-visible focus rings, use semantic headings and buttons/links, and make the cards readable at increased text sizes. If the background pattern is decorative, mark it as non-content.

## Content guidance
Use the user’s actual product terminology, plan names, offer details, and calls to action after asking for them. Keep the heading outcome-oriented, the supporting copy brief, and each card description focused on who the option suits.

## Never
- Do not use logos, product names, or exact copy from the reference.
- Do not reproduce the reference’s plan names, pricing claims, offer badges, or button labels verbatim.
- Do not copy its exact card proportions, gradients, decorative pattern, or layout measurements; treat them as inspiration only.
- Do not include illustrations, stock imagery, or decorative graphics beyond a subtle abstract background texture.
- Do not make the featured plan so dominant that the other legitimate choices become difficult to understand.
- Do not sacrifice accessibility, mobile usability, or readable contrast for visual similarity.