## 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/clerk-com/b0a171ff-4b4c-415f-ac9b-4885f02b49d0-1789060783-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/clerk-com/b0a171ff-4b4c-415f-ac9b-4885f02b49d0-1789060731-full.webp
- Component on Kage: https://kage.design/component/clerk-pricing-table

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

## Goal
Build a responsive subscription-pricing section for a software product. The section should make the value of the product clear on the left and make plan differences easy to compare on the right. Use realistic content generated for my product, with no reference-specific names or wording.

## Design language

### Layout and alignment
- Use a wide, centered container with a two-column desktop layout: an explanatory value column on the left and a pricing-card group on the right.
- Let the left column occupy roughly 38–42% of the width and the pricing area the remaining 58–62%.
- Align the top of the pricing cards with the main heading or introductory content.
- Place two or three equal-width plan cards in a tight horizontal group with consistent gaps; allow the group to stack vertically on small screens.
- Keep the section spacious, with a large amount of calm whitespace around the content. Do not force the pricing table to fill the entire viewport.
- On mobile, put the value proposition first, then make cards full width. Preserve clear separation between cards and avoid cramped multi-column layouts.
- Use a small introductory eyebrow or contextual line above the pricing area if useful, followed by a concise heading and supporting sentence.

### Typography hierarchy
- Use a modern sans-serif with a clean, technical SaaS feel; prefer the product's existing font if available.
- Make the primary section heading bold and prominent, approximately 32–44px on desktop, with tight line-height around 1.05–1.15.
- Use 15–17px body text with a relaxed 1.5–1.65 line-height and a softer neutral colour.
- Plan names should be compact and semibold, around 12–14px.
- Make prices visually dominant within each card, around 20–26px and bold, with the billing unit smaller and lower contrast.
- Feature labels should be small but highly legible, around 13–14px. Use weight and colour—not excessive size—to establish hierarchy.

### Spacing
- Use a generous section padding, approximately 72–120px vertically on desktop and 48–72px on mobile.
- Keep 20–28px between the left heading, paragraph, and benefit list.
- Give each card a compact header padding of roughly 18–22px, followed by a separated CTA area and feature list.
- Use 12–16px vertical spacing between feature rows and 8–12px between related price elements.
- Keep the card grid gap around 20–28px, with consistent internal padding throughout.

### Colour
- Start with a warm or cool near-white page background, approximately `#f8f8f7` or `#fafafa`.
- Use near-black for primary text, approximately `#151515` to `#202124`.
- Use a muted slate gray for supporting copy, approximately `#686b72`.
- Use white or a very subtle tinted white for cards, approximately `#ffffff` or `#f7f8fa`.
- Use a dark neutral CTA, approximately `#2d2f33` to `#17181a`, with white text; adapt the colour to the product brand if its system calls for a clear accent.
- Keep borders subtle, approximately `#dedfe2` or `rgba(20, 20, 25, 0.12)`.
- Feature checkmarks should be understated gray or use the product's accent colour sparingly. Avoid turning every element into a high-saturation highlight.

### Borders, radius, and depth
- Give cards a medium rounded radius, approximately 8–12px. Keep the visual language polished and restrained.
- Use a 1px border around each card and subtle horizontal dividers between the plan header, CTA, and feature list.
- Add a soft, broad shadow beneath cards, such as `0 12px 28px rgba(20, 24, 35, 0.08)`, rather than a dark or dramatic shadow.
- Make all cards equal height where practical so their feature lists align cleanly.
- Buttons should use a modest radius around 5–7px, with a clear hover state such as slightly lighter background, stronger contrast, or a small elevation change.

### Content and interaction
- In the left column, explain the outcome the product enables, followed by three concise benefit bullets with small circular check or status icons.
- Include a low-emphasis text link below the benefits for users who want to explore more detail; pair it with a small directional arrow.
- Each plan card should include: plan name, price, billing period, an annual-billing toggle or checkbox, a primary action button, and a short list of included features.
- Keep the billing control visually simple and accessible. Label it clearly, provide a visible focus state, and ensure it works with keyboard and screen readers.
- Make the primary action button span most or all of the card width and remain easy to tap on touch devices.
- Use consistent checkmark alignment and feature-row heights so users can scan vertically across cards.
- If there is a recommended plan, distinguish it with a restrained border, small badge, or accent treatment; do not rely on colour alone.
- Add hover and focus states for links, buttons, cards, and toggles. Respect reduced-motion preferences.
- Ensure contrast meets WCAG AA, prices and plan labels remain readable at zoom, and the layout does not depend on colour alone to communicate differences.

## Never
- Never use logos, product names, plan names, pricing, feature copy, or exact wording from the reference.
- Never reproduce the reference's brand identity, distinctive copy, illustrations, imagery, or decorative assets.
- Never hard-code the section for the reference product; derive content, accent colours, and terminology from my product and brand.
- Never make the cards visually dense, use aggressive gradients, or add decorative imagery that competes with the pricing decision.
- Never hide important pricing terms, billing changes, or feature differences behind hover-only interactions.