Midday

An original Fenwick page: a 37px Sand announcement bar, a 56px white navigation with a drawn horizon mark and grey links ending in a hairline divider and Sign in, then a centred hero — a hairline pill badge, a two-line 72px serif headline, an 18px grey lead, one square Charcoal Start your trial button, a 12px trial note and a row of six tiny assistant glyphs; below, a full-width black stage with a grainy grey light falling from the top right holding the white Fenwick overview window; then How it works with a live transaction ledger, a feature grid of eight icon tiles, a time-saved card grid, a pre-accounting checklist, customer story cards, an integrations strip and a light footer over a huge outlined wordmark.

• Best forInvoicing, bookkeeping, time-tracking and finance tools, and other calm, ledger-heavy software sold to founders, freelancers and small teams.
• 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 every colour, spacing and type token. Render the page as server components; only the How it works steps, the integrations strip arrows and the mobile menu need small client islands holding state in memory. Self-host Hedvig Letters Serif and Hedvig Letters Sans (both SIL Open Font License) as woff2 files through next/font/local — no remote font request. Draw the mark, every icon, the product stage grain and light, the overview window, its charts and the ledger as inline SVG and HTML built from committed sample arrays, never bitmap screenshots, video or stock photos, so the markup is identical on every render. Provide page metadata. Build and run the production page before capturing its preview.

Build the "Midday" kickstart — An editorial business-software homepage: a 72px book serif over spaced sans, one square charcoal button, hairline parchment rules and a grainy black stage holding the app.

## Design
Build a rebrandable landing page for an all-in-one back office for freelancers and small studios — invoices, transactions, receipts, time tracking, runway and an accountant-ready export in one app.

Create a complete landing page for Fenwick, a fictional back office. This is a concept presentation, not a real company — no real product, customer, person or logo. Use original branding, artwork and copy throughout.

Color: monochrome paper with one ledger green. Paper #FFFFFF is the page canvas, cards and the app window. Sand #E6E4E0 is the announcement bar, highlighted cards, icon tiles, table headers and the checklist panel. Parchment #DBDAD7 is every 1px hairline: section rules, card borders, the badge outline and table rows. Ink #121212 is headlines, body and icons. Smoke #616161 is the lead, nav links, captions and idle step titles. Charcoal #18181B fills the one primary button and the active step title. Snow #FAFAFA is text on Charcoal. Moss #4CAF50 marks money coming in — incoming amounts, a status dot, a chart bar — and is never a button, link or decoration. No other hue; the product stage is black-to-grey only.

Typography: display headings use "Hedvig Letters Serif", "Source Serif 4", Georgia, serif at weight 400; everything else uses "Hedvig Letters Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif (both SIL OFL). Hero display 72px/72px with -1.8px tracking in a 768px measure. Section headings 24px/32px, -0.6px tracking, centred. Hero lead 18px/28px Smoke in a 576px measure; body 16px/24px; navigation 14px/20px; the button 14px/20px weight 500; step titles 20px/28px; card titles 18px/28px; small text 14px/20px; captions 12px/16px with 0.3px tracking; ledger and window labels 10–11px with 0.5px tracking. Nothing is ever bold.

Layout: a 1440px canvas; the hero is centred on the full width and every section below sits in a 1248px column with 96px side margins. Sections are separated by 1px Parchment rules and 96px vertical padding. Radii: 0 for buttons, cards, tables and windows; 9999px for badges, tabs and integration chips. No shadows, no gradients outside the product stage.

Announcement bar: fixed, 37px, Sand, centred 14px Ink text Fenwick 3.0 is here — invoices that chase themselves. and an underlined Read the release notes link.

Navigation: 56px, white, from y 36. At x 24 a 24px Ink line mark — a half sun rising over a horizon line, with five short rays. Right side: Features with a caret, Story, Download, Resources with a caret in 14px Smoke with 8px 12px padding, then a 1px 24px Parchment divider and Sign in in Charcoal ending 24px from the right edge.

Hero (id top): centred. At y 228 a 30px hairline badge Fenwick 3.0 is here →; at y 282 the 72px serif headline The back office for / independent studios in two lines; at y 450 the lead Send invoices, match every receipt, log billable hours, see your runway and hand your accountant clean books — without a spreadsheet.; at y 546 the 138×44px square Charcoal Start your trial button; 12px below, 14-day free trial · Cancel anytime in 12px Smoke; 28px below, six 16px grey line glyphs 12px apart for the assistants Fenwick works with.

Product stage (id product): at y 712, a 1248×900px black panel lit by a soft grey light falling from the top right, with fine film grain (an SVG noise filter at 40% overlay) — a drawn surface, never a photograph. Inset 107px from the left and 114px from the top, a 1034×672px white window with a 1px Parchment border: a 50px icon rail with the mark, a 49px top bar with a Find anything search and a round avatar, the serif greeting Morning Ines (the name in Smoke), a 11px line here's a quick look at how the studio is doing., 1 year / Overview / Metrics pill tabs, and a four-column grid of hairline cards — a Sand Weekly summary, Profit with a black-and-grey bar chart, Runway reading 11 months, Inbox — over a second row (Expenses, Invoices, Balance, Software with a line chart), a row of pill shortcuts and an assistant prompt box.

How it works (id how): two columns. Left: the 24px serif heading, then three steps on a 1px Parchment rail with a small square marker — Every account, one ledger (active, Charcoal, with a 14px/22.75px description), Invoices that get paid and Books that reconcile (Smoke). Right: a 592px hairline panel with 32px padding holding Transactions: four account icons linked by hairlines to a table (Date, Description, Amount, Category) with Sand header, Parchment rules, 11px cells, square category swatches and incoming rows in Moss.

Everything you need (id features): centred serif heading Everything you need to run your studio, a 16px Smoke line in a 672px measure, then a 4×2 grid of icon tiles: Invoicing / Invoice management, Transactions / Money movement, Inbox / Receipt matching, Time tracking / Project hours, Clients / Client performance, Files / Document storage, Exports / Accounting ready, Assistant / Connect your tools.

Less admin (id admin): centred serif heading Less admin. More focus. and a 16px line, then hairline cards in a 3+2 grid, each a 12px caption, an 18px title and a 14px line: Chasing receipts / 45 minutes per week; Cleaning transactions / 1 hour per week; Preparing invoices / 1–2 hours per week; Explaining the numbers / 1 hour per week; and a wide Sand card What disappears over time with 4–6 hours in 48px sans on the right.

Ready for accounting (id accounting): centred serif heading Ready for accounting, without extra work, a 16px line, a 560px Sand panel with five check-marked 14px lines, and an underlined Learn more about pre-accounting link.

Customer stories (id stories): centred serif heading Built alongside our users, a 16px line, a five-star row and four slightly rotated hairline cards (±1.5°), each a 10px tracked uppercase country (POLAND, ARGENTINA, GERMANY, UNITED KINGDOM), a 16px round initial avatar, a 14px name and studio, and a 14px quote; then View all customer stories.

Integrations (id integrations): centred serif heading Works with the tools you already use, a 16px line, and two rows of 9999px hairline chips with drawn glyphs — Email, Calendar, Bank feeds, Payments, Accounting export, Chat, Files, CRM, Payroll — with a View all integrations link.

Footer: a 1px Parchment rule, four 14px Smoke link columns (Features, Product, Company, Resources) with 14px Ink headings, on the right the 24px sans line Run your studio. Not the admin., a System status: Operational line with a Moss dot, © Fenwick sample · a fictional back office. Not a real company., and a 508px outlined fenwick wordmark in Sand cropped by the bottom edge.

## 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 every colour, spacing and type token. Render the page as server components; only the How it works steps, the integrations strip arrows and the mobile menu need small client islands holding state in memory. Self-host Hedvig Letters Serif and Hedvig Letters Sans (both SIL Open Font License) as woff2 files through next/font/local — no remote font request. Draw the mark, every icon, the product stage grain and light, the overview window, its charts and the ledger as inline SVG and HTML built from committed sample arrays, never bitmap screenshots, video or stock photos, so the markup is identical on every render. 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 Fenwick clearly fictional and rebrandable: no real company, product, customer, person or integration logo. The only filled button is the square Charcoal #18181B one; badges, tabs and chips are hairline pills; cards, tables and windows stay square. Moss #4CAF50 marks incoming money only. The serif is used at 72px and 24px only and never bolded; nothing on the page is bold. No shadows anywhere. Text pairs clear WCAG AA: #121212 and #616161 on #FFFFFF and #E6E4E0, #FAFAFA on #18181B; Moss figures always sit beside a + sign so colour is never the only signal. Every link leads to a real section on the page; nothing submits. The page loads no analytics or tracking script and shows no cookie banner. Content is initially visible: no autoplay video, typing effects, counters, parallax or scroll reveal; hovers take 150ms and every transition stops for prefers-reduced-motion. Every control shows a 2px #121212 focus ring with a 2px offset. The product stage, window and ledger are labelled figures; decorative glyphs are hidden from assistive technology. At 360px the navigation collapses to the mark, Sign in and a Menu button, the announcement bar wraps to two lines, the headline drops to 40px/44px, the lead to 16px/24px, the button goes full-width, the product stage becomes a 4:5 crop showing the window's left half, How it works stacks above its ledger, tiles become two columns, cards one column, 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.