## 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/posthog-com/73877279-c1a4-4217-acde-d4b5e92c7eb5-1789060473-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/posthog-com/73877279-c1a4-4217-acde-d4b5e92c7eb5-1789060452-full.webp
- Component on Kage: https://kage.design/component/posthog-cta

## Before you start
Ask what the user's product is, who it is for, and what brand personality and visual identity it uses. Then apply the principles below to create an original version for that product rather than reproducing the reference.

## Build a playful product-offer CTA
Create a self-contained CTA section that presents a product or plan as if it were a lighthearted ecommerce checkout card. The section should feel polished and conversion-focused, but use one or two witty details to make the offer memorable.

### Layout and alignment
- Use a wide, centered card with a two-column desktop layout: a visual or product-preview area on the left and offer details on the right.
- Keep both columns vertically aligned inside the same container, with generous internal padding and a clear separation between visual proof and purchase controls.
- Place an attention-grabbing rectangular status or social-proof label near the upper edge of the card, slightly overlapping or sitting above the main content when appropriate.
- The right column should follow a clear sequence: small badge, product/plan title, supporting description, selector or option controls, price, primary CTA, then reassurance or urgency copy.
- On small screens, stack the columns, keep the offer details easy to scan, and make the CTA full width.
- Use a max-width of roughly 1100–1250px for the card and avoid letting the content feel like a generic pricing table.

### Typography hierarchy
- Use a bold, friendly sans-serif with a slightly editorial or contemporary feel.
- Make the offer title prominent at approximately 34–42px on desktop, with a compact line height around 1.05–1.15.
- Use 13–16px muted text for descriptions, qualifiers, and footnotes.
- Give section labels and field labels strong weight, around 16–18px.
- Make the price and primary CTA visually dominant; use heavier weight and clear contrast rather than excessive decoration.
- Keep the humor in a short badge, annotation, or microcopy line so the main offer remains immediately understandable.

### Colour
- Use a warm, lightly tinted neutral background for the overall page, approximately `#F1F2ED` or an equivalent brand-neutral tone.
- Use a pale card surface such as `#E8EBE3` or `#F7F7F2`, with dark slate text around `#263246`.
- Use one saturated accent for the social-proof/status banner, approximately `#2F80ED` or the product's equivalent brand colour.
- Use a warm conversion colour for the primary button, approximately `#F2A51A` or `#EFA51D`, with near-black text.
- Use a restrained green badge for sustainability, trust, or positive status, around `#6FA85A`, with white text.
- Reserve brighter colours for labels, selected states, and key moments; keep the rest of the palette calm and low contrast.

### Borders, radius, and depth
- Give the main card a thin neutral border around `#C9CDC5`, approximately 1px, and a modest 6–10px radius.
- Use minimal shadowing; the design should feel like a tactile print or catalogue panel rather than a glossy SaaS modal.
- Give the primary CTA a medium 7–10px radius, a slightly darker bottom edge or subtle shadow, and a visible pressed state.
- Keep option controls rectangular or gently rounded with clear 1px borders. The selected option should use a darker border and a lightly tinted background.
- Ensure small badges and banners have enough padding to read as deliberate interface elements, not floating text.

### Interaction
- Make selectable plans, regions, tiers, or configurations visibly interactive with hover, focus, and selected states.
- On selection, update the price and any supporting copy without disrupting the card layout.
- The primary CTA should have a clear hover darkening or lift effect and a pressed state that removes the bottom offset.
- Add a keyboard-visible focus ring using the accent colour, and ensure all controls have accessible labels.
- Treat urgency or activity messaging as secondary reassurance, not as a deceptive countdown. If using live activity, label it honestly and keep it visually subordinate to the CTA.

### Content structure
- Include a small benefit or status badge above the title.
- Add a concise title and one-line explanation of what the user receives.
- Include a clearly labelled option selector with two or more choices where relevant.
- Show an original price only when useful, visually de-emphasize it, and make the current price unmistakable.
- Use a direct action label such as “Start free”, “Choose plan”, or another phrase appropriate to the user's product.
- Add a small reassurance line below the CTA, such as setup guidance, availability, or a concise trust signal.

## Never
- Never copy the reference's logos, product names, brand mascots, or proprietary marks.
- Never reuse the reference's exact copy, pricing, labels, claims, social-proof numbers, or joke wording.
- Never reproduce the reference's product packaging, illustrations, badges, or imagery.
- Never make the component look like a pixel-for-pixel recreation; adapt the structure and principles to the user's product and brand.
- Never use fabricated urgency, endorsements, customer counts, or claims that the user's product cannot substantiate.
- Never sacrifice accessibility or responsive behaviour for visual similarity.