## 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/adscope/d628eaa8-0259-4816-ad11-db69e3ce98d4-1789106703-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/adscope/d628eaa8-0259-4816-ad11-db69e3ce98d4-1789106621890-full.webp
- Component on Kage: https://kage.design/component/adscope-pricing-table

## Before you start
Ask the user what their product does, who the plans are for, and what their brand personality and visual identity are. Then apply the principles below to create an original pricing section for that product—do not reproduce the reference content or branding.

## Build this component
Create a responsive pricing-table section for a modern SaaS or digital product landing page. The section should make the recommended entry plan immediately understandable while presenting a second, more specialised plan as a credible alternative or upcoming option.

### Structure and layout
- Use a very light warm-gray section background, approximately `#f4f4f2`, with generous vertical padding.
- Center a wide heading at the top, followed by a short explanatory paragraph. Keep the content column constrained to roughly 680–820px so the heading remains readable and the supporting copy forms a compact block.
- Place a compact billing switch beneath the introduction. Use a white pill container with a thin light-gray border, two equal text options, and a dark filled active state. Add a small lime discount badge above or overlapping the relevant option.
- Below the switch, create two large pricing cards in a centered two-column grid. Keep the cards equal in width and visually aligned at the top; on small screens stack them vertically.
- Give the primary card a small, overlapping promotional badge at its top edge. The badge should communicate a launch, introductory, or recommended state without dominating the card.
- Inside the primary card, use this order: plan name, one-sentence audience description, price, optional struck-through reference price and billing note, primary CTA, reassurance text, then a vertical feature list.
- Inside the secondary card, use the same plan-title and description rhythm, but allow it to communicate a specialised, future, or contact-led offering. Include a clear status heading, explanatory copy, CTA, and a short paragraph describing how users can participate or get help.
- Add a small centered footnote below the cards to explain the duration or terms of the promotion. If appropriate for the product, follow the section with a separate rounded callout panel and one CTA.

### Alignment and sizing
- Use a centered max-width around 960–1100px for the complete pricing area.
- Align all card content to a consistent inner left edge, with approximately 32px horizontal padding on desktop and 24px on mobile.
- Make the primary CTA full width within each card and reserve enough vertical space for the feature list to feel deliberate rather than crowded.
- Let the cards be tall, spacious containers. Preserve comfortable whitespace in the secondary card even when its content is shorter.
- Use a responsive breakpoint around 720–800px: switch to one column, reduce heading size, and allow the billing control to remain comfortably tappable.

### Typography hierarchy
- Use a clean contemporary sans-serif with a neutral, slightly human feel.
- Make the main heading large and light-to-regular in weight, approximately 52–60px on desktop and 34–42px on mobile; use tight but not compressed line-height.
- Use plan names around 30–34px, price numerals around 38–44px with strong weight, and body text around 16–18px.
- Make supporting labels, billing notes, and footnotes smaller at 13–15px with muted gray colouring.
- Use bold weight selectively for important words such as the current price, plan status, or support level. Avoid making every line compete for attention.

### Colour and emphasis
- Use near-black for primary text and buttons, approximately `#080808` or `#111111`.
- Use white or near-white card surfaces, approximately `#ffffff` and `#fcfcfb`.
- Use muted charcoal-gray for descriptions and secondary text, approximately `#555555` to `#707070`.
- Use a vivid soft lime accent for discounts, badges, and feature check markers, approximately `#d9f56a` or `#dfff72`.
- If a subtle emphasis treatment is needed behind a sentence, use a very pale lavender-gray wash such as `#f2f1fa`; keep it quiet and localized.
- Keep the visual system mostly monochrome so the accent colour signals value, status, and positive confirmation.

### Borders, radius, and depth
- Use thin, solid dark-gray borders around the pricing cards, approximately `#222222`, with a radius around 22–26px.
- Use lighter borders for the billing toggle and secondary callout, approximately `#d8d8d5`.
- Use pill radii for the toggle, badges, check markers, and buttons where appropriate.
- Avoid heavy shadows. If a badge needs separation from the card, use a very subtle lime-tinted glow or a restrained shadow rather than a large elevation effect.
- Buttons should be near-black filled pills or softly rounded rectangles with white text and generous horizontal padding.

### Interaction and states
- The billing control should be a real accessible toggle or segmented control with a clearly visible selected state. Update displayed prices, discount messaging, and billing notes when the selection changes.
- Make plan CTAs keyboard accessible and provide hover, focus-visible, and pressed states. On hover, use a small brightness or translate change, not an elaborate animation.
- Feature checks should be visually consistent and easy to scan; use dark check icons inside lime circular markers.
- If the secondary plan is not yet available, label that state clearly and make its CTA lead to an interest form, contact flow, or feedback action rather than pretending it is purchasable.
- Ensure sufficient contrast, visible focus rings, semantic headings, and mobile-friendly tap targets.

### Content guidance
- Write original plan names, pricing, benefits, and calls to action based on the user's product. Keep the primary plan audience-specific and make the secondary plan meaningfully different.
- Show one or two concrete pricing details, such as a trial, annual savings, usage allowance, or locked-in introductory rate, but do not overload the card.
- Keep the feature list scannable: short noun phrases, one benefit per row, and no more than roughly 7–9 rows in the initial view.

## Never
- Never use the reference product's logos, product names, plan names, pricing, feature copy, or calls to action.
- Never copy the reference's exact wording, illustration, imagery, layout proportions, or visual assets.
- Never add unrelated logos, stock imagery, decorative illustrations, or brand marks from the reference.
- Never make the discount badge or promotional treatment more visually dominant than the plan comparison itself.
- Never hide billing terms, trial conditions, renewal pricing, or availability status behind ambiguous language.