Fey

An original Penrose announcement letter on a #FAFAFA page with a 3.5% film grain. Nothing but a 520px column, centred on the screen both ways and nudged 20px down: at x 460, y 195 the first paragraph opens with the near-black Inter Tight run-in lead Penrose is joining Harbourline. and runs on in #595959 21px semibold for four lines; a six-line second paragraph at y 355 tells why the team built it; a two-line closing at y 580 says new accounts are paused. At y 689 three small hand-drawn signatures sit in a row, 52px tall, in faded grey strokes. Far left, its first line at x 178, y 216, a five-line 13px index — Announcement, The longer story and three founder handles — aligned with the top of the letter. No header bar, no hero, no buttons, no footer.

• Best forAcquisition and merger notes, shutdown or sunset letters, founder announcements, new-chapter and rebrand notices, and any moment a small team wants to say one thing quietly and well.
• Tech stack- Next.js (App Router) - React - TypeScript - CSS custom properties Use Next.js App Router, React and TypeScript with plain CSS custom properties for the five colours, the type sizes and the easing curve cubic-bezier(0.16, 1, 0.3, 1). Render the page as a single server component; the word-by-word reveal is CSS only — split the letter into word spans at build time and give each a fixed animation-delay from its index, so markup is identical on every render. Self-host Inter (weights 400 and 600) and Inter Tight (weight 700), both SIL Open Font License, as woff2 through next/font/local — no remote font request. Draw the signatures and the grain as inline SVG. Provide page metadata with the letter's first sentence as the title. Build and run the production page before capturing its preview.

Build the "Fey" kickstart — A single-letter announcement page on warm off-white: one 520px column of 21px semibold prose in two greys, a near-black run-in lead, a tiny 13px index at the far left and three hand-drawn signatures in place of a button.

## Design
Build a rebrandable one-letter announcement page for a small product team: a single page that says one important thing — an acquisition, a shutdown, a new chapter — as a short signed letter, not a marketing site.

Create the page for Penrose, a fictional personal-finance research app announcing that it is joining Harbourline, a fictional larger money app. This is a concept presentation, not a real company — no real product, person or logo. Use original copy and drawn artwork throughout.

Color: Paper #FAFAFA is the only surface — the page and everything on it; never add cards, panels or fills. Graphite #595959 is the letter's narrative text, the index links and the signature strokes. Ink #1C1C1C is the run-in lead, its link hairline and every hovered link — the only emphasis colour; there is no other accent. Mist #F2F2F2 is the text-selection highlight and the mobile index sheet. Hairline #D9D9D9 is the mobile index sheet's top rule and the skip link's border. Ink #1C1C1C with Paper #FAFAFA text is the skip link pill. No gradients, no shadows, no borders on text.

Typography: the lead uses "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif at weight 700; everything else uses "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif. Letter text 21px/32.55px weight 600, letter-spacing -0.01em, paragraphs 1.4em (29.4px) apart. Index 13px/15.6px weight 400, letter-spacing -0.002em. No h1–h6 styling, no other sizes, no italics.

Layout: a 1440×900 first screen. The body is a full-height grid that centres one 520px column (width min(520px, 100vw - 3rem)) both ways with 7vh top and bottom padding, then nudges it 20px down; the column is about 549px tall, so it starts at x 460, y 195. A fixed film-grain layer covers the screen: a 180px SVG feTurbulence fractal noise tile (baseFrequency 0.9, 3 octaves) at 3.5% opacity, multiply blend.

Index (a nav labelled Index): positioned absolutely inside the column so its text starts at x 178, y 216 — far left, level with the letter's first line. Five 13px lines, 8px apart, in Graphite: Announcement, The longer story, @adawren, @milobeck, @noorhale. Each handle links to the signatures; the first two link to the letter.

Letter (id letter): three paragraphs and nothing else — no headline above it. Paragraph one begins with the run-in lead Penrose is joining Harbourline. in Ink at weight 700 Inter Tight, the word Harbourline its only link, then continues in Graphite: Everything we made—our research engine, quiet interface and respect for your attention—now lives inside Harbourline's saving and spending apps. (four lines). Paragraph two at y 355: We started Penrose to show that a few people could make money software that felt considered, not loud. We sweated details nobody asked for and kept asking how a balance sheet could read like good prose. Harbourline gives that work a far bigger home. (six lines). The closing paragraph at y 580, with an extra 1em above it, breaks deliberately into two lines: New accounts on Penrose are paused. / The next chapter is being drafted…

Signatures (id signatures): 2.75rem below the closing, at y 689, a row of three original hand-drawn signatures as inline SVG, each about 52px tall and 60–85px wide, 14px apart: a looped initial crossed by a long baseline flourish; a tall cross-barred B-like knot with a trailing tail; a small looped initial that runs out into a long straight line ending in a tiny curl. Strokes are 1.15px, round-capped, Graphite at 62% opacity within an 82% opacity row, so they read as faded pen. They replace any button or call to action.

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

Use Next.js App Router, React and TypeScript with plain CSS custom properties for the five colours, the type sizes and the easing curve cubic-bezier(0.16, 1, 0.3, 1). Render the page as a single server component; the word-by-word reveal is CSS only — split the letter into word spans at build time and give each a fixed animation-delay from its index, so markup is identical on every render. Self-host Inter (weights 400 and 600) and Inter Tight (weight 700), both SIL Open Font License, as woff2 through next/font/local — no remote font request. Draw the signatures and the grain as inline SVG. Provide page metadata with the letter's first sentence as the title. 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 Penrose and Harbourline clearly fictional and rebrandable: no real company, product, person, statistic or photograph. The page is a declaration, not a funnel: no header bar, hero, buttons, forms, footer, cookie banner, analytics or tracking script. Never introduce a third text colour or any accent; never add headings, cards, borders or shadows; never break the 520px column with images or a second column. Graphite #595959 and Ink #1C1C1C on Paper #FAFAFA clear WCAG AA. The run-in lead's link and every index link show a 2px #1C1C1C focus ring with a 3px offset, and a Skip to letter link appears as an Ink pill on focus. The signatures and grain are decorative and hidden from assistive technology; the letter text stays in the DOM as real paragraphs even while words animate. Content must be readable with JavaScript off and under prefers-reduced-motion. At 360px the column takes the full width minus 24px gutters, text stays 21px, the column starts below a 13px Index pill at the top left that opens the five links on a Mist sheet with a Hairline top rule, and the page never overflows horizontally.

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