General Intelligence Company

Build the "General Intelligence Company" kickstart — A book-page lab site: a painted night meadow under a frosted nav pill, a glass headline card, thin editorial serifs and one green-tinted hairline.

## Design
Build a rebrandable landing page for an applied AI lab.

Create a complete landing page for Lanternfield, a fictional applied AI lab building one coordinator for the specialised agents a company already relies on. Its core idea: a book page with one painted window — a calm, literary site of thin serif headlines on warm off-white paper, opened by a single hand-painted night scene. This is a concept presentation, not a real company — no real product, customers, investors, team members or job listings. Use original branding, artwork and copy throughout.

Color: a near-neutral system with one blue. Parchment #FEFFFC is the page canvas — never pure white. Paper #FFFFFF is cards, the writing tiles and the footer band. Linen #F9FAF7 fills the input. Graphite #2C2C2C sets headlines and key text; Charcoal #444141 sets sub-heads, input text and button labels on light; Ash #646464 sets helper copy and captions; Fog #B4B8B4 is the muted phrase inside a statement, disabled states and the striped band. Mist #DEE2DE is the one hairline — every card and section border, green-tinted to sit with the painting. Twilight #282834 outlines secondary buttons and icon strokes. Dusk #1F1F29 is the only filled button, with Paper #FFFFFF text. Signal Blue #41A1CF is a border-and-text-only accent on outlined calls to action; Cerulean #0081C0 is one saturated atmospheric card surface. Never fill a button with either blue, never use #000000 for text, never add another accent hue. All text colours are solid hex values, never rgba.

Typography: two families with a strict split. Every heading 27px and above uses the serif "PP Mondwest", "EB Garamond", Garamond, Georgia, serif at weight 400 only (never 600 or 700 — the thin strokes are the personality), letter-spacing -0.02em, line-height 1.1: 48px in the hero card and the statements, 54px on the Cerulean card, 40px for section heads, 27px/1.2 at -0.04em for writing-card titles. Everything else uses the neo-grotesk sans "Aeonik", Inter, "Helvetica Neue", Arial, sans-serif: navigation links and buttons 15px weight 500 at -0.01em, body 16px/1.5 weight 400, hero and diagram copy 15px/1.4–1.5, sub-heads 18px/1.3 weight 500, captions and labels 13px weight 500. Never set display text in the sans. Locally installed fonts only, no remote font request.

Shapes and spacing: buttons 8px radius, cards 12–16px, large surfaces (the hero card, the Cerulean card) 24px; nothing above 24px except the navigation. No box-shadow on buttons — borders and backdrop blur do the separating; cards may take a whisper of shadow (0 1px 1px and 0 4px 5px at 8% black). Content sits in a 1200px centred column with 40px side padding; sections breathe 96–160px apart; one idea per screen.

Navigation: a frosted pill fixed over the hero, 16px from the top, centred: white at 12% with a 14px backdrop blur, a 1px white border at 28%, 12px radius, 8px padding, a faint 0 2px 6px shadow at 15%. Inside: a 34px square tile (white at 16%, 8px radius) holding an original line glyph of a half-sun rising over a horizon; the white 15px weight-500 links About, Writing and Careers; then the Dusk #1F1F29 button Meet the coordinator with a 1px Twilight #282834 border and a 16px circled chevron. At the top right of the hero, a small 13px white status label with a clock glyph: Night shift, followed by sample in Fog — static text, never a live clock.

Hero (id top): a full-viewport painting drawn as one inline SVG with preserveAspectRatio slice, never a photo or image file. An indigo night sky graded from #18204A at the top to a violet haze at the horizon, a few blurred cloud bands, scattered stars with five four-point sparkles, and a crescent moon with a soft blue glow just right of centre. Two layered violet ridges; a hill on the right crowned by a small observatory with warm lit windows; a scatter of tiny warm village lights on the far left hill; a lake that reflects the moon as broken white strokes and the lanterns as warm dashes. A tree line along the shore; a large blossom tree in pink and violet framing the left edge and a deep green tree framing the right; dark framing branches with leaves and pink buds reaching in from both top corners. Seven paper lanterns float above the meadow, each a small amber oval with a soft radial halo; fireflies dot the dusk. The foreground is a dark meadow of brushed grass strokes, golden wildflowers and a few violet ones. Give every mass a painterly edge with an SVG fractal-noise displacement filter, and lay a faint grain over the whole scene in soft-light. Overlaid at the bottom left, 16px from the edge and 58px from the bottom, the frosted headline card: 500px wide, 24px radius, white at 10% with an 18px backdrop blur, a 1px white border at 30%, 36px by 32px padding. Inside, white text: the 48px serif headline on two lines, AI that runs a company through the night; a 15px weight-500 lead, Lanternfield is a fictional applied AI lab building one coordinator for the specialised agents a company already relies on.; and the ghost link Get to know us, underlined, with a circled chevron. At the bottom right, a small sunrise glyph over a 13px white caption, Coordinated companies are on the horizon, and we are lighting the way.

Below the hero, a 22px band of 2px Fog #B4B8B4 stripes on 4px of Parchment — a ruled page edge.

Statement (id about): 160px of Parchment above, a 48px Graphite serif statement, max 760px: Today's specialised agents have shown promise in narrow fields, but each one works alone. — with narrow fields in Fog and a 1px Fog underline — then a second line 32px below, They need a coordinator.

Diagram: a 5 + 7 split. Left: a row of five 1px tick marks (the first darker, taller), an 18px weight-500 Charcoal sub-head Isolated systems, and two 15px Ash paragraphs about agents doing narrow tasks while people carry the work between them. Right: the diagram card — a 16px-radius Mist-bordered frame at 60% white with a 0 1px 8px shadow at 5%, 12px padding, around a 12px-radius Paper card 340px tall holding a sparse line-art diagram of three hollow squares and five small dots in Fog strokes, unconnected; under it a right-aligned 13px Fog caption, Fig. 1 Isolated agents, sample diagram.

Coordinator card: the one saturated moment — a 24px-radius Cerulean #0081C0 card with 96px by 80px padding, white 54px serif heading One coordinator for every function, awake while you rest. and a 16px white paragraph about handing work between agents, keeping a ledger and waking a person only when a decision is theirs.

Writing (id writing): a 40px serif heading Writing and three equal Paper #FFFFFF cards, 16px gap, 12px radius, 1px Mist #DEE2DE border, 16px padding: a 13px Ash label (Essay · sample, Research note · sample, Letter · sample) and, 48px lower, a 27px serif title — Why agents need a night shift, Handing work between strangers, A lab that sleeps on time.

Careers (id careers): a 40px serif heading Build the coordinator with us, then a paper-form row: a 280px email input with a Linen #F9FAF7 fill, no radius, no top or side border, only a 1px Charcoal bottom rule, and a Signal Blue #41A1CF outlined button Leave a note → (transparent, 1px Signal Blue border and text, 8px radius, 5px by 12px padding).

Footer: a Paper #FFFFFF band with a Mist top hairline, a 48px serif editorial statement, Lanternfield is a fictional lab. Everything here is sample copy, lit by lanterns., and a 13px Ash row with the wordmark on the left and anchor links About · Writing · Careers on the right.

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

Use Next.js App Router, React and TypeScript with plain CSS custom properties. Render the whole page as a server component — it needs no client state. Draw the night scene as one original inline SVG built from gradients, paths, circles and ellipses with feTurbulence + feDisplacementMap for painterly edges and a soft-light grain rect; generate any scattered stars, flowers and grass from a fixed seed at build time so the markup is deterministic. The frosted nav and card use backdrop-filter with an opaque-enough fallback for browsers without it. 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 Lanternfield clearly fictional and rebrandable: no General Intelligence Company wordmark, copy, painted skyline or product names, no investors, team members, job listings or press. Every claim is labelled sample. The system stays 95% neutral — Parchment #FEFFFC, Paper #FFFFFF, Linen #F9FAF7, Graphite #2C2C2C, Charcoal #444141, Ash #646464, Fog #B4B8B4, Mist #DEE2DE, Twilight #282834 and Dusk #1F1F29 — with Signal Blue #41A1CF only as borders and text and Cerulean #0081C0 only on the one atmospheric card; colour beyond that lives inside the painting. Headings are always the weight-400 serif and body always the sans; buttons are 8px, nothing exceeds 24px radius except the navigation, and buttons take no shadow. Every link leads to a real section on the page; the email field and buttons send and store nothing. Content is initially visible — no scroll reveals, parallax, typewriter effects or animated lanterns; hover and focus are a 150ms change of opacity or border, disabled for prefers-reduced-motion. WCAG AA contrast on every text/background pair — white hero text sits on the frosted card, never bare on the bright parts of the painting — visible focus rings, and a 360px layout without horizontal page overflow, where the navigation keeps the glyph and the Dusk button, the headline card spans the width with a 36px headline and the diagram stacks under its copy.

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