## 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/mock-magic-video-presets/201a35ef-5103-4614-9439-92b73face5de-1789106561-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mock-magic-video-presets/201a35ef-5103-4614-9439-92b73face5de-1789106517952-full.webp
- Component on Kage: https://kage.design/component/mock-magic-video-presets-pricing-table

# Before you start
Ask the user what their product does, who it is for, and what their brand personality and visual identity are. Then apply the reusable principles below to create a pricing section for that product—not a copy of any reference.

## Goal
Build a responsive pricing-table section that makes two or more plans easy to compare at a glance. Use the reference as inspiration for its calm, dark, editorial presentation and disciplined card structure, while adapting the number of plans, content, and emphasis to the user's product.

## Design language

### Layout and alignment
- Place the section inside a wide page container, with a subtle horizontal divider or generous separation above it if it belongs to a longer landing page.
- Center a concise section heading above the cards. Keep the heading visually distinct but not oversized.
- Use a horizontal grid for desktop pricing cards, with equal widths and a consistent gap of roughly 28–36px. The cards should be centered within the content column rather than stretching edge to edge.
- Give every card the same internal structure: plan name and price at the top, feature groups in the middle, and a primary action anchored to the bottom. Use flex column layout so buttons align even when feature descriptions have different lengths.
- On smaller screens, stack the cards vertically with 16–20px spacing and preserve comfortable side padding.
- Keep content alignment consistent within each card. Center the plan header and CTA if the brand is product-led and approachable; use left alignment instead if the user's brand is more editorial or enterprise-oriented.

### Typography hierarchy
- Use a clean sans-serif or the user's brand typeface.
- Section heading: medium or regular weight, approximately 32–38px desktop and 28–32px mobile, with tight line-height around 1.1–1.2.
- Plan name: bold, approximately 28–32px, clearly more prominent than feature text.
- Price: 18–22px with the billing cadence visually subordinate to the numeric amount. For a free plan, show a simple price label rather than forcing a fake cadence.
- Feature text: 15–16px, regular weight, with a relaxed line-height around 1.5. Use muted text for unavailable features rather than removing them, so the comparison remains scannable.
- CTA labels: 15–16px, semibold, short, and action-oriented.

### Spacing
- Use a generous vertical gap between the section heading and cards: roughly 36–48px.
- Card padding should be approximately 24–28px on desktop and 20–24px on mobile.
- Reserve enough space in the card header for the plan name and price, then leave a larger transition into the feature list—roughly 64–90px where appropriate—so the card feels open rather than crowded.
- Separate feature groups with a thin divider and 24–32px vertical spacing.
- Use 12–16px between individual feature rows. Allow long feature labels to wrap naturally without disturbing the icon alignment.
- Keep the CTA near the card bottom with 24–28px of space above it.

### Colour
- Use a near-black page background, approximately #050505–#080808.
- Use slightly lighter charcoal cards, approximately #191919–#1D1D1D, to establish a quiet layer of depth.
- Use a subtle card border around #303030–#3A3A3A; avoid heavy shadows.
- Use near-white headings and plan names, approximately #F2F2F2–#FAFAFA.
- Use muted feature and secondary text, approximately #A7A7A7–#B5B5B5.
- Render enabled check icons and any positive accent in a fresh mint or green, approximately #35E6A0–#50E8B0.
- Render unavailable feature icons and labels in a low-contrast grey, approximately #666666–#777777.
- Use light neutral CTA buttons, approximately #F1F1F1–#FFFFFF, with dark text around #111111. The paid or recommended plan may use a subtly stronger border or accent, but do not let it overpower the comparison.

### Borders and radius
- Use a restrained radius of approximately 14–16px on cards.
- Use a smaller radius of approximately 5–7px on CTA buttons.
- Keep borders thin: 1px solid with low-contrast charcoal. Dividers inside the cards should be even subtler, around #353535.
- Avoid decorative gradients, excessive badges, or ornamental treatments unless they are essential to the user's brand.

### Features and states
- Represent each feature as a compact row with a circular check or status icon at the left and text beside it.
- Group universally included features above a divider and plan-specific or upgraded features below it.
- Show unavailable features in muted grey with a disabled-looking status icon, but retain their labels to make plan differences explicit.
- Keep feature wording concise and parallel across plans so users compare row by row.
- If one plan is recommended, communicate that with a small, accessible label or a modest border treatment rather than a large visual sticker.

### Interaction and accessibility
- Buttons should have clear hover, focus-visible, active, and disabled states. On hover, slightly brighten the surface or add a restrained accent border; do not rely on motion alone.
- Make the entire pricing section keyboard accessible. Use semantic headings, lists for features, real buttons or links for CTAs, and sufficient colour contrast.
- On mobile, ensure buttons remain full width and easy to tap, with at least 44px height.
- If billing frequency is relevant, add a compact monthly/annual toggle above the cards, but only when it supports the user's product and does not distract from plan comparison.
- Avoid automatic carousels or interactions that hide plan information.

## Never
- Never copy logos, product names, plan names, pricing, feature copy, CTA copy, or other brand-specific wording from the reference.
- Never reuse illustrations, imagery, icons as branded assets, or decorative artwork from the reference; use a neutral icon system or the user's own assets.
- Never reproduce the reference as a pixel-for-pixel clone.
- Never make unavailable features ambiguous, hide important pricing terms, or use colour alone to communicate plan status.
- Never sacrifice responsive layout, keyboard navigation, focus states, or readable contrast for visual similarity.