## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/wealthfolio/bf50ab71-633d-4b86-816e-5951eb096cd4-1789106444729-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/wealthfolio/bf50ab71-633d-4b86-816e-5951eb096cd4-1789106442352.webp
- Design on Kage: https://kage.design/designs/wealthfolio-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have, including the product name, colours, type choices, logo, and imagery. Wait for their answers before designing. Apply the system below to their product, not to the reference site.

## Page structure
1. **Header/navigation** — Use a slim, spacious top bar with a small brand mark at left, compact navigation links in the centre, utility/social/theme controls, and one dark pill-shaped primary action at right.
2. **Hero** — Center a large editorial serif headline with an italic emphasis, followed by a short monospace description with a few highlighted keywords, primary and secondary actions, and a small reassurance line about free access or no account requirement.
3. **Product view selector** — Add a subtle rounded segmented control for switching between product areas before the main visual.
4. **Hero product mockup** — Show a large desktop finance dashboard screenshot with a smaller overlapping mobile device on the right; use a soft glow, pale green chart area, and restrained interface detail. Follow it with a centered caption and secondary demo link.
5. **Explore/features carousel** — Introduce an “Explore” eyebrow and left-aligned section heading, then lay out horizontally scrolling feature cards with screenshot thumbnails, category labels, short titles, descriptions, and understated previous/next controls. End with a centered all-features link.
6. **Privacy/local-first section** — Switch to a slightly warmer tinted background. Use a two-column layout: left-side serif heading, explanatory paragraph, and three compact icon-led principles; right-side a bordered system diagram showing device, local database, and optional sync service.
7. **Free versus optional automation section** — Center a two-line serif heading and explanatory paragraph, then place two large side-by-side bordered cards. Give each card a small eyebrow, title, description, checklist, and full-width dark bottom action; distinguish the free core product from the optional service without loud colour.
8. **Connection flow diagram** — Under the cards, add a restrained explanatory line and a wide dotted-border diagram showing local device/database flowing through a connector and aggregator to broker, bank, and crypto sources.
9. **Community/open-source proof** — Use a pale contrasting section with a centered serif heading and a row of four metric tiles. Add small external recognition badges and a community link beneath, keeping proof informational rather than promotional.
10. **Deployment choices** — Present a centered heading and short explanation, followed by two equal columns for standalone and self-hosted setups. Use thin rules, platform chips, short benefit lists, and text links rather than heavy card decoration; clarify below that the optional connector is not a third deployment mode.
11. **Extensibility/add-ons section** — Center a heading and explanation, then show four compact add-on tiles in a row for extensions such as open-source code, integrations, custom data feeds, and AI/agent support. Below, use a large bordered feature panel with layered product thumbnails on the left and a vertical list of add-on capabilities plus a dark browse button on the right. Finish with documentation and repository links.
12. **Final CTA** — On a quiet pale-gray section, center a two-line serif headline, concise supporting copy, two actions, and a small reassurance line repeating the low-friction starting point.
13. **Footer** — Use a spacious multi-column footer with brand description and social icons on the left, then Product, Resources, and Legal link groups. Add a separated newsletter row with explanatory copy, email field, and dark subscribe button, followed by a thin rule and copyright line.

## Design language
- Build hierarchy through contrast in type scale and weight: use oversized high-contrast serif display headings, often with one italic phrase, and compact monospace or typewriter-like body copy for a technical, transparent feel.
- Keep the palette quiet and paper-like: use warm off-white around `#faf7f2`, slightly deeper cream sections around `#f3efe8`, near-black text and buttons around `#1d1d1b`, muted gray text around `#77736d`, and occasional pale sage product surfaces around `#e9edd8`.
- Use yellow only as a small textual marker or highlight, approximately `#e6d54a`; never let accent colour dominate the page.
- Start with generous whitespace and centered alignment in the hero, then increase information density through feature cards, checklists, diagrams, metrics, deployment columns, and add-on panels as the page progresses.
- Use a restrained editorial grid: wide centered content, two-column explanatory sections, four-up tiles, and equal-width comparison cards. Let section background changes and horizontal rules establish rhythm instead of oversized decorative graphics.
- Treat screenshots as product evidence: place them in pale frames with subtle shadows, soft glows, and occasional layered overlaps. Preserve enough UI detail to make the product credible while keeping the surrounding page calm.
- Prefer 1px charcoal or warm-gray borders, dotted borders for system/data diagrams, and low-radius corners. Use larger rounded corners only for primary buttons, device frames, and the two main comparison cards; avoid glassmorphism and strong drop shadows.
- Make controls compact and direct: black pill buttons with white uppercase or small monospace labels, plain text links with arrows, understated segmented controls, and small icon utilities.
- Use small uppercase or letter-spaced eyebrows to label categories, then pair them with sentence-case serif titles. Keep body measures narrow and line-height relaxed, especially in explanatory sections.
- Keep interaction subtle: horizontal feature-card scrolling, simple carousel arrows, hover emphasis on links and cards, and gentle image or button transitions. Do not introduce flashy animation; diagrams and product imagery should remain legible and stable.
- On responsive layouts, collapse navigation and multi-column sections cleanly, preserve the serif/monospace pairing, and keep the main product mockup legible rather than shrinking it into an unreadable thumbnail.

## Never
- Do not copy the reference product’s logos, wordmarks, product name, copy, illustrations, photography, screenshots, icons, badges, or exact diagrams.
- Do not present the result as Wealthfolio or imply an affiliation with it.
- Do not reuse the reference’s financial figures, community metrics, navigation labels, or branded claims; replace them with content appropriate to the user’s product.
- Do not turn the page into a loud fintech dashboard, gradient-heavy SaaS template, or generic pricing page; preserve the quiet paper editorial language while adapting the structure to the user’s needs.