## 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/wealthfolio/bf50ab71-633d-4b86-816e-5951eb096cd4-1789106472-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/wealthfolio/bf50ab71-633d-4b86-816e-5951eb096cd4-1789106444729-full.webp
- Component on Kage: https://kage.design/component/wealthfolio-pricing-table

## Before you start
Ask the user what their product does, who it is for, and what visual brand language they want to use. Then apply the principles below to create an original pricing section for that product—not a copy of the reference.

## Design the section
Build a pricing-table section for a thoughtful, privacy-conscious software product. The pattern should clearly distinguish a complete free or base offering from an optional paid add-on, while keeping both choices visually equal and low-pressure.

### Layout and alignment
- Use a warm, lightly tinted page background and a centered content container with a comfortable maximum width of approximately 1000–1100px.
- Start with a centered heading block: a two-line headline with a strong upright line followed by a contrasting italic or expressive line. Keep the text width narrow enough to create a deliberate editorial rhythm.
- Place a short supporting paragraph below the headline, centered and constrained to roughly 650–700px.
- Below the introduction, use two equal-width pricing cards in a responsive two-column grid with a gap of approximately 22–28px. Stack them vertically on small screens.
- Give each card the same overall height. Structure the card as a vertical flex layout so the action area stays aligned at the bottom even when feature lists differ in length.
- Within each card, align the small category label, title, description, feature list, secondary link if needed, and primary CTA consistently to the left.
- Keep the pricing comparison focused: this pattern can omit explicit prices when the product is free by default or when the distinction is feature-based rather than cost-based.

### Typography hierarchy
- Use a distinctive serif or editorial display face for the main heading and card titles; use an italic style selectively to create warmth and contrast.
- Use a compact monospaced or humanist sans-serif for supporting copy, category labels, feature lists, links, and buttons. The reference-like effect comes from the contrast between literary headings and technical interface text.
- Make the main heading large and confident, approximately 34–40px on desktop with tight line-height around 0.98–1.05.
- Set card titles around 24–27px, body copy around 15–16px, and feature rows around 14–15px.
- Render category labels in uppercase with generous letter spacing, approximately 0.14–0.18em, at 11–12px.
- Keep body copy muted and readable, with line-height around 1.45–1.6. Avoid oversized marketing claims.

### Spacing and sizing
- Use approximately 72–96px of top and bottom padding around the section on desktop, reducing this on mobile.
- Leave 24–32px between the heading, supporting paragraph, and cards.
- Give each card approximately 32px of internal padding, with slightly more room around the bottom CTA.
- Separate the card label, title, and description with compact but visible intervals; use 22–28px before the feature list.
- Use 10–14px vertical spacing between feature rows.
- Make the CTA full width, approximately 44px tall, and place it at the bottom of each card.

### Colour and surfaces
- Use an off-white or warm paper background, approximately `#F7F4EF` or `#FAF8F4`.
- Use near-black text, approximately `#292826`, for headings and primary actions.
- Use a softer charcoal gray, approximately `#706E69`, for descriptions, labels, feature text, and supporting links.
- Keep cards close to the page background but distinguishable through a subtle surface shift such as `#FBFAF7`.
- Use a thin, dark neutral border around cards, approximately `#393834`, at 1.5–2px. Avoid strong shadows, gradients, or glossy treatments.
- Make primary buttons near-black, approximately `#191918`, with warm white text, approximately `#F7F4EF`.
- Check contrast for all muted text and do not let the restrained palette reduce accessibility.

### Borders, radius, and controls
- Use a medium rounded card radius of approximately 20–24px; the corners should feel crafted rather than bubbly.
- Use pill-shaped primary buttons with a radius of 999px.
- Keep the card border visible and confident, with no large drop shadow.
- Add a small line icon or restrained symbolic mark beside each category label only if it fits the user’s product; keep it monochrome and secondary.
- Use check marks or another simple, consistent marker for feature rows. Align markers in a narrow column so the text edges form a clean vertical line.
- Buttons should include a short action label and a simple directional arrow. On hover, slightly lighten or darken the button and translate the arrow a few pixels; preserve a calm, subtle transition around 150–200ms.
- Underline secondary links by default or on hover, and make their hit area accessible.

### Content and interaction logic
- Make the base plan sound complete and useful on its own. Describe the paid plan as an optional extension that adds convenience, automation, collaboration, or scale.
- Use parallel card anatomy so users can compare quickly, but allow each feature list to express the product’s actual differentiators.
- Place the primary action at the same vertical position in both cards.
- Support keyboard focus states with a clearly visible warm-dark outline or ring. Ensure buttons and links have accessible names and cards remain usable at narrow widths.
- On mobile, preserve the ordering and hierarchy: introduction, base plan, optional plan. Avoid horizontal scrolling.

## Never
- Never reuse the reference product’s logos, product names, plan names, feature copy, button copy, icons, illustrations, imagery, or brand-specific language.
- Never reproduce the exact text, card proportions, spacing measurements, or visual assets from the reference.
- Never make the paid option visually aggressive, artificially urgent, or dominant over the free/base option.
- Never rely on colour alone to distinguish plans or communicate selection.
- Never use dense tables, loud gradients, excessive shadows, or decorative imagery that distracts from the comparison.