## 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-1789106474-8.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-cta

# Build a product add-ons showcase CTA

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

## Purpose
Create a self-contained promotional CTA section that introduces several optional product capabilities or extensions. It should feel like a considered product moment inside a marketing page: informative enough to scan, but focused on one primary action.

## Design language

### Layout and alignment
- Use a wide, centered container with generous horizontal margins and a compact height.
- Place the section inside a lightly contrasting surface with a thin dark border and a large rounded rectangle radius.
- Use a two-column desktop layout: an expressive product-preview area on the left and a vertically stacked feature list on the right.
- Let the left visual occupy roughly 48–52% of the section width. Let the right content column occupy roughly 42–46%.
- Vertically center the two columns. Keep the right column aligned to a consistent left edge.
- On mobile, stack the preview above the feature list. Preserve comfortable padding and avoid letting the visual dominate the CTA.
- Include one primary CTA below the list, aligned with the feature text rather than centered across the entire section.
- If secondary navigation links follow the card, separate them with generous whitespace and keep them visually quieter than the primary CTA.

### Product preview treatment
- Represent the product with 2–4 overlapping interface panels, dashboards, or content cards relevant to the user’s product.
- Use slight offsets, subtle shadows, and modest rotation or scale differences to suggest a layered product ecosystem.
- Keep the preview cropped or contained so it supports the message without becoming a full hero illustration.
- Use realistic interface fragments—charts, tables, controls, or content blocks—but keep them secondary to the CTA.
- Ensure the preview remains legible at desktop size and becomes a clean, simplified stack on smaller screens.

### Typography hierarchy
- Use a warm, humanist or editorial sans-serif/serif pairing only if it fits the user’s brand; otherwise use the product’s existing type system.
- Feature titles should be compact, semibold, and visually distinct, approximately 15–17px on desktop.
- Descriptions should be smaller and quieter, approximately 13–15px, with relaxed line height around 1.45–1.6.
- Use sentence case for feature titles and CTA labels. Keep descriptions to one or two short lines where possible.
- The primary CTA should use a confident medium or semibold weight and be easy to identify without needing a large heading.

### Spacing and rhythm
- Use approximately 40–56px inner padding on desktop and 24–28px on mobile.
- Give each feature row 24–32px of vertical separation.
- Keep the icon-to-text gap around 10–12px and the title-to-description gap around 5–8px.
- Leave 28–36px between the final feature row and the primary CTA.
- Maintain a consistent baseline and avoid excessive text width; descriptions should generally stay under 34–38 characters per line where practical.

### Colour
- Start with a soft warm background such as `#F8F6F1` or `#FBF9F5`.
- Use a near-black ink colour such as `#242321` for headings, icons, borders, and the primary button.
- Use a muted warm grey such as `#716E67` for supporting copy.
- Use off-white interface panels such as `#FFFDF8`, with restrained pale neutrals or one brand accent inside the mock product screens.
- Keep contrast accessible. The card should feel quiet and premium, not washed out.

### Borders, shadows, and radius
- Use a 1.5–2px dark neutral outer border, approximately `#393733`.
- Use a 22–28px radius for the main container.
- Use smaller 8–14px radii for interface panels, buttons, and secondary elements.
- Keep shadows soft and low contrast, for example `0 8px 24px rgba(35, 33, 28, 0.10)`; avoid dramatic floating-card effects.
- The primary button can be a dark filled pill or softly rounded rectangle, with a subtle arrow or directional icon.

### Icons and interaction
- Give every feature row a small, simple outline icon that represents its function. Keep icons consistent in stroke width and visual weight.
- The primary CTA should have a clear hover state: slightly lighter or darker fill, a small arrow translation, and a smooth 150–220ms transition.
- If the feature rows are interactive, make the whole row focusable and reveal only a subtle colour, background, or icon change on hover; do not add distracting motion.
- Add visible keyboard focus states with a 2px outline or ring.
- Keep the product-preview collage static unless motion is genuinely useful; if animated, use restrained entrance or parallax movement and respect reduced-motion preferences.

### Responsive behaviour
- At tablet widths, reduce the preview footprint and narrow the gap between columns.
- At mobile widths, use a single column, show fewer preview panels if necessary, and make the CTA full-width or nearly full-width.
- Ensure the outer border, content, icons, and button never touch the viewport edge.
- Preserve the reading order: preview, feature list, primary CTA, then any secondary links.

## Content guidance
- Replace all feature names and descriptions with capabilities that are meaningful for the user’s product.
- Use three or four concise feature rows. Each should communicate a distinct benefit, not merely repeat a category label.
- Use a direct CTA such as “Explore extensions,” “See all tools,” or an equivalent action appropriate to the product.
- If adding links beneath the section, make them secondary actions such as documentation, repository, pricing, or learn-more navigation.

## Never
- Never copy the reference’s logos, product names, feature names, descriptions, CTA copy, or exact interface content.
- Never reuse the reference’s screenshots, illustrations, imagery, or branded visual assets.
- Never reproduce the exact composition, proportions, typography, spacing values, or colour palette when the user’s brand calls for something different.
- Never make the CTA compete with a larger page-level conversion goal.
- Never use decorative imagery that obscures the product’s capabilities or reduces accessibility.