Wise

Build the "Wise" kickstart — Deep forest green and one lime spark, with block-letter headlines that shout the plain answer.

## Design
Build a rebrandable money-transfer product landing page.

Create a complete landing page for Farthing, a fictional app for sending money to family in another country. Its core idea: you see exactly what arrives before you press send. This is a concept presentation, not a real financial service — no account, no rates, no fees and no licence claims. Use original branding and copy throughout.

Color: the canvas is Paper #FFFFFF. Forest Ink #163300 carries the brand — navigation text, dark section backgrounds, primary copy on light surfaces, icon strokes and the filled active navigation pill. Display headlines are Obsidian #0E0F0C on light and Lime Voltage #9FE870 on Forest Ink. Body copy is Charcoal #454745 (18px on white); helper text Slate #6A6C6A; input borders, hairlines and placeholder strokes Pebble #868685. Fog #E8EBE6 is the card and panel surface on the white canvas; Linen Mist #E2F6D5 is the pale green wash for tags and the light band; Spruce #054D28 is the secondary dark for cards inside Forest Ink sections. Lime Voltage #9FE870 is the only bright color: the primary action fill (with #163300 text), the active segmented tab and headline text on Forest Ink — one lime element per section, never lime text on a light background. No gradients, no decorative blur and no shadows beyond hairlines; the lime–forest pair inverts to create rhythm.

Typography: display headlines use "Arial Black", "Helvetica Neue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif at weight 900 — an open heavy-sans substitute for the source's licensed display face, with no remote font request — at 84px/0.9 with -0.03em tracking in ALL CAPS for the hero, 60px/0.9 for section openers. Everything else uses ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif: 36–45px at 700 for mid-tier headings, 18px/1.5 body at 400, 16px/1.5 at 500–600 for labels and buttons, 12–14px captions. Tighten tracking as size grows (-0.03em at 100px down to -0.003em at 12px). Use a centered 1200px column, 24px gutters, 8–12px element gaps and 64–80px between sections. Radii: every button, tag and navigation segment is a 9999px pill; cards and inputs 10px; large dark cards 28px; currency badges fully round.

Compact top navigation: 64px tall on white, no border or shadow. Left: an original mark — a 28px Forest Ink circle holding a lime upward arrow, drawn as inline SVG — and the word farthing in 20px Forest Ink at 800. Next to it a three-segment pill switcher (Personal / Family / Help) where Personal is a filled Forest Ink pill with white text and the others are Forest Ink text on transparent. Right: a How it works text link, an outlined 1px Forest Ink pill Questions and the lime pill Try the sample; every link is an anchor to a real section.

Shouting hero with a sample transfer card: two columns on desktop. Left: a Linen Mist pill tag CONCEPT · NOT A REAL SERVICE in 12px Forest Ink at 600, then the h1 MONEY HOME, WITHOUT THE GUESSWORK. in the heavy display stack at 84px Obsidian, three lines. Under it a 20px Charcoal lead: Farthing shows the exact amount your family receives before you send, in their currency, and tells you when it lands. Then a single lime pill Try the sample paired with an underlined Forest Ink text link See how it works — never two filled buttons. Right: a 28px-radius Forest Ink card, 40px padding, headline in 28px lime at 800 Send to Lagos; inside it two white 10px-radius field cards: You send with 500.00 in 32px Obsidian and a round GBP badge, They receive with 312,450.00 and a round NGN badge, each with a Change outlined pill; between them a 12px Linen Mist line Sample figures for layout only — not a quote. Below, a lime pill Continue across the card width and a 14px Paper line Arrives by Friday in this sample. The currency badges are 32px circles with the three-letter code in 11px bold — no national flags, no real logos.

Three-column feature row (id how): a Fog band with 80px padding. A 60px Obsidian display heading THREE THINGS, DONE PLAINLY. then three columns, each a 24px Forest Ink stroke inline SVG icon, 24px gap, an 18px 700 Obsidian heading and 16px Slate body: See it before you send. / The receiving amount is shown first, in the currency your family spends.; Know when it lands. / Every transfer carries a single arrival day you can share with the person waiting.; Send again in two taps. / Saved people and amounts sit on the home screen, not in a menu.

Forest band with currency pairs (id pairs): a full-bleed Forest Ink section, 80px padding. Left, a 60px lime display heading ONE APP, MANY HOMES. and 18px Paper body. Right, a five-column grid of Spruce 10px-radius tiles, each a 40px round badge in Linen Mist with a Forest Ink currency code (EUR, INR, PHP, MXN, KES, NGN, BRL, PLN, VND, GHS) and a 14px Paper country name beneath. A small lime pill tag Illustrative list sits above the grid.

Native questions (id questions): white, a 45px 700 Obsidian heading Honest answers. and four full-width details elements with 1px Pebble hairlines, 18px 600 Forest Ink summaries and a round Linen Mist plus glyph. Is Farthing real? — no, it is a fictional design study. Are the figures real rates? — no, they are sample numbers for layout. Can I sign up? — there is no account, waitlist or download. Who is it for? — anyone who sends money to family abroad and wants to know what arrives. Answers are server-rendered with visible Forest Ink focus rings.

Quiet footer: Fog background, 56px top and 40px bottom padding, the farthing wordmark, three columns of 14px Forest Ink links (How it works, Currency pairs, Questions, Back to top) that all resolve to real anchors, and a 12px Slate line Farthing is a fictional product concept. Not a bank, not a money transmitter, not affiliated with any payment company. No app-store badges, QR codes, customer logos, testimonials, ratings or pricing.

At 760px and below: 16px gutters, a 44px hero h1, 40px section headings, the transfer card under the headline, full-width pills, a one-column feature row and a two-column currency grid. The page fits a 360px viewport with no horizontal overflow. Use semantic landmarks, one h1, a skip link, visible focus, WCAG AA contrast (lime only as fill or on Forest Ink) and keyboard-operable details. Everything works without JavaScript.

## 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. Preserve equivalent tools already installed in the host project. Implement this as a server-rendered page; the transfer card is static HTML with sample figures, and native details and anchors need no client component or dependency. Use system font stacks only — no remote font, image, flag, icon 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 Farthing clearly fictional and rebrandable: no source wordmark, globe-and-coins illustration or copy, no real company or bank names, no flags, no exchange rates or fees presented as real, no licence or safety claims, no testimonials, user counts or pricing. Every figure is labelled sample. Every link leads to a real section on the page. Deliver initially visible content, WCAG AA contrast on every text/background pair, 150ms color transitions only with prefers-reduced-motion respected, keyboard-operable questions and a 360px layout without horizontal overflow.

### 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.