Wealthsimple

Build the "Wealthsimple" kickstart — A cashmere-lined vault with gallery lighting: a felt-dark bronze hero, editorial serif headlines, warm monochrome pills and one sculptural gold coin.

## Design
Build a rebrandable fintech landing page for a managed-investing app.

Create a complete landing page for Fernwell, a fictional app that builds a low-fee portfolio around someone's goals, rebalances it for them and stays out of the way. Its core idea: a cashmere-lined vault with gallery lighting — warm, monochrome, editorial calm, where the only colour on the page lives inside one sculptural object. This is a concept presentation, not a real financial product — no account opening, real returns, fund names, regulator marks, ratings, testimonials, press logos or real people. Use original branding, artwork and copy throughout.

Color: a warm monochrome system with no accent hue. Paper White #FCFCFC is the page canvas and the light pill. Linen Cream #FAF8F5 is the alternate warm section background. Fog Veil #F1F0F0 is the floating navigation card and quiet hover washes. Stone #E4E2E1 is the one hairline colour, for column rules, dividers and input outlines. Graphite Ink #32302F sets every headline and body line on light surfaces — never pure black text. Pebble #686664 sets eyebrows, helper copy and captions. Charcoal #09090A fills the primary pill, with Paper White #FCFCFC text on it. Bronze Field #3A3525 is the full-bleed dark hero: a warm dark khaki with a soft radial lift of Linen Cream at 16% opacity toward its lower right, a darker corner at its upper left, and a faint fractal-noise grain at about a third opacity in soft-light blend, so it reads like felt under gallery light. On Bronze Field, text is Paper White at 100%, 86% (serif eyebrow), 80% (lead) and 70% (fine print). Gold tones (#D9B66C, #C29A50, #A07A36, #8A672B and a #6E5223 rim) appear only inside the hero coin; never on text, buttons or backgrounds. No gradients except the hero field and the coin, no cool greys, blues or cool whites.

Typography: two families with a strict split. Display and editorial headings use the serif "Tiempos Headline", "Source Serif 4", Lora, Georgia, serif at weight 500 (400 for eyebrows), letter-spacing -0.01em: the hero headline 84px/1.08 at -0.84px, section headings 56px/1.1 at -0.56px, sub-section heads 36px/1.2 at -0.36px, and the hero eyebrow a 22px/1.24 serif line. Body, navigation and UI use the geometric sans "The Future", Jost, "Futura PT", Futura, "Century Gothic", sans-serif at 400 and 500, letter-spacing 0.005em: body 16px/1.5, lead copy 18px/1.4, column titles 20px/1.3 weight 500, navigation links 16px weight 500, eyebrows on light sections 14px/1.4 at +0.07px in Pebble. Every button label is the sans at 16px/1.2 with 0.025em tracking — the brand's stamp-like interactive mark. The wordmark is the serif at weight 600, 27px, -0.02em. Never set body copy in the serif and never set a section heading in the sans. Locally installed fonts only, no remote font request.

Shapes and spacing: every button, input and tag is a 1600px pill; small elements (the navigation card) use 12px; no other radius. Content sits in a 1200px centred column; sections have 80px vertical padding, 48px column gaps, 32px card padding and a 16px element gap. No drop shadows on cards, buttons or the navigation — the only shadow is a blurred warm floor shadow under the coin.

Navigation: a Floating Navigation Card inset 16px from the top, left and right of the viewport, 60px tall, Fog Veil #F1F0F0, 12px radius, 22px left padding, sitting on top of the Bronze hero. Left: the wordmark — a small Graphite fern-sprig glyph (a vertical stem with four pairs of curved fronds) beside Fernwell in serif 600. Then the 16px weight-500 Graphite links Save, Invest (with small chevrons), Plan, Fees, Learn and Questions, 24px apart. Right, 8px apart: a 44px round outlined search button (1px Graphite Ink border, magnifier glyph), an outlined pill See a plan (1px Graphite Ink #32302F border, transparent fill) and the Charcoal primary pill Get the sample.

Hero (id top): the Bronze Vault Hero, full-bleed Bronze Field #3A3525, about 740px tall, the content column starting 176px from the top. A two-column grid: a 600px text column on the left and the sculptural stage on the right. Left: the serif eyebrow Managed investing · a sample concept; the 84px Paper White serif headline on three lines, Grow what you have, quietly, for decades; an 18px lead, max 500px, Fernwell builds a low-fee portfolio around your goals, rebalances it for you, and stays out of the way.; then a row 36px below with a 340px × 62px outlined email pill (1px Paper White border at 55% opacity, Enter your email placeholder in 18px sans) and a 62px Paper White pill Join the sample with Graphite text, 16px apart; and a 14px fine-print line, Concept page. Nothing is sent, invested or stored. Right: the Fern Coin, a 470px sculptural gold coin drawn in CSS and inline SVG, never an image — a circular face tilted with rotateY(-26deg) rotateX(6deg) rotate(-6deg) in 1400px perspective, two translateZ layers behind it forming a darker rim, a radial gold face with a faint brushed-metal stripe and a warm highlight at its upper left, an inset raised ring 34px in, and an embossed fern sprig in the centre drawn twice (a dark offset stroke and a light stroke) so it reads as relief. Beneath it, a blurred warm floor shadow ellipse. The coin is static.

Proof (id invest): Linen Cream #FAF8F5, 48px top padding. A 14px Pebble eyebrow, Sample figures, for illustration only, and a 56px Graphite serif heading, max 760px, A portfolio that tends itself while you get on with life. Below, a row of three sample figures in 36px serif with 14px Pebble labels — 0.4% sample annual fee, Rebalanced automatically, Goals you name yourself — each under a 1px Stone rule.

Editorial (id plan): Paper White, the Light Editorial Section — left column (about 45%) with a Pebble eyebrow Plan, a 56px serif heading Start with what the money is for, an 18px Graphite paragraph and a single Charcoal pill Build a sample plan; right column a second, smaller CSS sculpture: three stacked rounded paper slabs in Linen Cream, Fog Veil and Stone, offset like a soft card stack, with the same warm floor shadow.

Features (id save): three equal columns, 48px gaps, each beginning with a 1px Stone #E4E2E1 rule, then a 20px weight-500 sans title — Save, Invest, Withdraw — and a 16px paragraph. No card backgrounds, no shadows; the hairline is the only chrome.

Try the numbers (id fees): Linen Cream, a centred 36px serif heading See how a fee compounds, a range input for a monthly sample deposit ($100 to $2,000, step $50) and two sample results side by side — after 20 years at 0.4% and at 1.5% — recomputed from local state, with a 14px Pebble note that the figures assume a constant 5% sample return and are not advice.

Questions (id questions): four native disclosures on Stone hairlines — Is Fernwell real? How are fees charged? Can I withdraw any time? Who picks the investments? — answered as concept copy.

Footer: Bronze Field #3A3525 band, the wordmark in Paper White, anchor links back to each section, and a 14px line, Fernwell is a fictional concept — every figure is sample data. A round 52px Paper White chat button with a speech glyph floats 24px from the bottom-right of the viewport and links to Questions.

## Tech stack
- Next.js (App Router)
- React
- TypeScript
- CSS custom properties
- Native HTML disclosures

Use Next.js App Router, React and TypeScript with plain CSS custom properties and original inline SVG for the fern glyph, the coin relief, the chevrons, the search and chat glyphs. Preserve equivalent tools already installed in the host project. Render the page as a server component; the only client component is the Try the numbers calculator, which keeps local React state. Draw the coin, the slab stack and the grain in CSS and SVG — no 3D render, photo or stock image. Native details and anchors need no JavaScript. Use local font stacks only — no remote font, image, logo or analytics host. Provide page metadata. Build and run the production page before capturing its preview.
Where the repo you are working in already has an equivalent in place, keep the repo's choice and say which one you kept.

## Everything else
Keep Fernwell clearly fictional and rebrandable: no Wealthsimple wordmark, copy, coin or product UI, no regulator or insurance marks, no real fund names, returns, ratings, press logos, testimonials or real people. Every figure is labelled sample and nothing is advice. The system stays warm and monochrome — Paper White #FCFCFC, Linen Cream #FAF8F5, Fog Veil #F1F0F0, Stone #E4E2E1, Graphite Ink #32302F, Pebble #686664, Charcoal #09090A and Bronze Field #3A3525; gold appears only inside the coin. Every interactive element is a 1600px pill, headings are always the serif and body always the sans, and no card, button or navigation takes a drop shadow. Every link leads to a real section on the page; the email field and buttons send, invest and store nothing. Content is initially visible — no scroll reveals, typewriter effects, marquees or parallax; hover and focus are a 150ms change of background or opacity, disabled for prefers-reduced-motion. WCAG AA contrast on every text/background pair (Pebble only on Paper White or Linen Cream), a keyboard-operable range input and disclosures with visible focus rings, and a 360px layout without horizontal page overflow, where the navigation collapses to the wordmark and the primary pill, the hero headline steps down to 44px and the coin moves below the text at 280px.

### Non-negotiables
- Responsive from 360px through desktop — no horizontal page overflow at any width. Deliberately scrollable regions stay within the viewport and remain keyboard and touch accessible.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.