Felt

An original Isoline homepage: a 29px ink coordinate bar reading out latitude, longitude, bearing and zoom; a 61px paper header with a contour-line mark, five 14px links and square Log in and Start mapping free buttons; a hero with a rust mono eyebrow, a three-line 69px serif headline, a subline with one marker-highlighted phrase, two 46px buttons and seven carousel dots, beside a hand-drawn aerial landscape of fields, a river, trees, wind turbines and dashed siting zones with a floating white legend card; then a band of invented wordmarks, a dark product window, live-data sources, an analysis grid, a field app, a developer panel, AI agents, sharing, customer stories, industries, a security panel, a map gallery, an FAQ, a centred closing and an ink footer.

• Best forMapping and GIS tools, geospatial data platforms, site-selection and field-operations software, climate and energy analytics, and any B2B product that wants a calm, editorial paper page with one illustrated hero.
• 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, radius and spacing token. Render the page as a server component; the only client code is the hero carousel, the coordinate bar's ticking readout, the FAQ disclosure and the header's scroll state. Self-host Source Serif 4 (variable, with the opsz axis), Inter (variable) and IBM Plex Mono 400/500, all SIL Open Font License, as woff2 through next/font/local — no remote font request. Draw the contour mark, the aerial landscape, every icon, the product windows, phones and map thumbnails in HTML, CSS and inline SVG — never a bitmap or screenshot. Generate the landscape from a seeded random function so the server and client render identical markup. Provide page metadata. Build and run the production page before capturing its preview.

Build the "Felt" kickstart — A warm paper page under a thin mono coordinate bar: a three-line 69px book-serif headline, one marker-highlighted subline, square ink buttons, and a hand-drawn watercolour aerial map with dashed siting zones and a floating white legend card.

## Design
Build a rebrandable landing page for an AI-native collaborative mapping and GIS platform. Site-selection analysts, field crews, utilities, cities and agriculture teams use it to put parcels, imagery, sensor feeds and field reports on one live map in the browser, ask questions of it in plain language, and share the answer as a link instead of a desktop GIS file.

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

Color: a warm paper page with near-black ink, one rust accent and one dark action colour. Paper #F4F2EA is the page, the header (at 90% opacity with an 8px backdrop blur) and every light section. Band #ECEBE3 is the customer-logo band and the inset cards. Surface #FFFFFF is the floating map legend card and the testimonial cards. Ink #1C1B18 is every heading, the coordinate bar, the primary buttons (with #FFFFFF text), the developer and security panels and the footer — never pure black. Body #3A382F is nav links and body copy. Muted #69685F is captions, mono labels on paper and helper text. Rust #A7531B is the only accent: the 11px mono eyebrows above each heading and the link arrows inside the dark panels. Rule #D8D5C8 is every hairline: the header's bottom border, section dividers and card borders. Highlight #F2C9B8 sits behind one key phrase in the hero subline like a marker stroke. The hero illustration has its own soft watercolour palette (wheat #E2DCA9, sage #CBD195, clay #EAD6A9, river #8EA9B6, tree #5E7A3A) and never leaks into the interface. No gradients on interface surfaces; the only shadow is on the floating legend card.

Typography: three families. Display is "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif — a sharp, contemporary book serif at optical size 60. Interface is "Inter", "Helvetica Neue", Arial, sans-serif. Data labels are "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, monospace. Hero headline Source Serif 4 69px/70.5px weight 400 at -0.02em, three lines in a 560px column. Section headings Source Serif 4 46px/48.8px 400 at -0.015em; section ledes Source Serif 4 26px/33.8px 400 at -0.01em in a 760px column; testimonial quotes 28px/36px; the closing headline 64px/66px. The wordmark is Source Serif 4 500 27px at -0.03em. Everything else is Inter: nav 14px/18px 400; header buttons 13.5px/16.2px (primary 500); hero buttons 15px/18px; hero subline 18px/27.9px 400; card titles 15px 500 with 13px/19px descriptions; the legend card 14px/21.6px. Mono eyebrows IBM Plex Mono 11px/17px 400 uppercase at +0.1em; the coordinate bar 11px at +0.06em; the logo-band label 10.5px at +0.05em.

Layout: a 1440px viewport with 60px side padding, so content spans 1320px. Sections open 73px below the previous divider and are separated by 1px Rule hairlines. Radii are small and square-ish: 4px on every button and input, 8px on cards and the legend, 12px on the dark panels.

Coordinate bar: fixed at the very top, 29px tall, full-bleed Ink. From x 60, label/value pairs in mono — LAT 44.9712° N, LON 093.2648° W, BRG 312.0°, ZOOM 12.4 — labels at 50% #EEEEEE, values in Paper, about 22px between pairs; at the right, ending at x 1380, CRS EPSG:3857 and a four-segment checkered scale bar labelled 2 km. The values tick as the hero map pans.

Header: fixed under the coordinate bar, 61px tall, Paper at 90% with a 1px Rule bottom border. At x 60 a 26px contour-line mark (two flowing strokes and a rust dot) beside the Isoline wordmark. The links end before the buttons: Platform, Industries and Resources each with a small chevron, then Pricing and Book a demo, 14px Body, 26px apart. At the right, ending at x 1380 with 8px between: a 34px Log in button (8px 15px padding, 1px rgba(28,27,24,0.35) border) and a 34px Ink Start mapping free button.

Hero: 892px tall including the bars, Paper. The copy column sits at x 60. The eyebrow MAPS THAT ANSWER BACK in Rust mono at y 287; the headline top at y 322: Ground truth for / every team that / builds outdoors, Ink. At y 563 one line of subline: Layer parcels, imagery and live readings to find the right ground. — with right ground on a Highlight #F2C9B8 marker. At y 640 two 46px buttons, 12px apart, 13px 23px padding: Start mapping free (Ink) and Book a demo → (outline). At y 844, x 60, seven 28px carousel dots — 6px Ink discs at 22% with the active one a 16px pill — that switch the subline and illustration between use cases (site selection, field crews, imagery, assets, AI questions). The right 840px holds a hand-drawn aerial landscape in inline SVG: a tilted patchwork of fields on a skewed grid separated by cream lanes, two roads, a meandering blue river edged with dense watercolour trees, a hatched blue floodplain inside a dashed blue boundary, a dashed black boundary around fourteen small wind turbines, a dotted rust setback around a farmstead, a paper-grain texture over all of it, and an irregular feathered edge that dissolves into Paper and bleeds off the right side. At x 653, y 140 a 238px Surface legend card (8px radius, soft shadow): Wind siting, four rows with 15px hatched swatches — Wetland buffer, Old-growth forest, Noise setback, Turbines 34 — a hairline, Capacity on the site, and 122 MW in 26px.

Logo band (id customers): directly below the hero, full-bleed Band, 22px 0 26px padding. A centred MAPPED ON ISOLINE mono label in Muted, then two rows of five 136×39 invented wordmarks, 48px apart, in #4A4840: tallow, Brandt & Okafor, OXBOW, PRAIRIE·LINE, Wendmere, kiln, HALDEN, VEKA, County of Ridgefall (a pill seal), TERNA (a boxed mark).

See it (id platform): eyebrow SEE IT, the 46px heading Every asset, crew and parcel on one map, a 26px serif lede, then a 1320×667 dark product window (12px radius) drawn in HTML: a 40px toolbar with breadcrumbs Ops team › Ridgefall Wind › Live analysis, a tool row, avatars and a Share button, over a dark terrain map with contour lines, place labels and a scale bar; beneath it a small Watch the walkthrough link.

Live data (id data): a two-column block — left, eyebrow CLOUD SOURCES, heading Live data from wherever it already lives and a 16px paragraph; right, a 2×6 grid of 56px rows separated by Rule hairlines, each a 20px line icon plus a mono uppercase source name (OBJECT STORAGE, WAREHOUSE, POSTGIS, SPREADSHEETS, TILE SERVER, SENSOR API and so on).

Analysis (id analysis): eyebrow ANALYSIS, heading Desktop GIS power in a browser tab, a 640px drawn map window on the left and a 26px serif paragraph on the right, then an 8-card grid in four columns with 01–08 Rust mono numbers: Geocoding, Boundary data, Drive-time areas, Hex bins, Spatial joins, Print layouts, File exports, Live collaboration.

Field app (id field): eyebrow FIELD APP, heading Close the gap between the field and the office, a paragraph and a link, beside two drawn phones showing an offline map download and an inspection form with photos.

Developers (id developers): a 12px-radius Ink panel inset 60px, eyebrow FOR DEVELOPERS in Rust, a 46px Paper heading Build your own logic on the map and a paragraph about the SDK, API and webhooks, with a Rust App development → link.

AI agents (id agents): a white drawn chat window on the left and on the right eyebrow AI, heading Give every AI agent a map to think with and a paragraph about the MCP server.

Collaboration (id share): heading Share maps with clients, crews and the public, a paragraph and a link, over a wide drawn embed of a shared map with comment pins.

Customer stories (id stories): heading Teams that work on Isoline, an All customer stories → link and three Band cards with 1px Rule borders: a 24px serif quote, a hairline, a mono company label, a name and role, and a one-line case-study title — all invented.

Industries (id industries): heading See how teams like yours use Isoline and a 4×3 grid of 15px 500 titles with 13px Muted descriptions above Rule hairlines: Agriculture, Education, Imagery analytics, Retail, Cities and government, Energy and utilities, Insurance, Telecom, Natural resources, Engineering, Real estate, Transportation.

Security (id security): a 12px-radius Ink panel with a deep soft shadow, the heading Your data stays yours, and three columns 01–03 — SOC 2 and GDPR, Regional hosting, Access you control — each with a Rust link.

Map gallery (id gallery): heading See what people are mapping with Isoline and six cards in three columns: a 1px Rule framed map thumbnail, a Rust mono category, a 20px serif title and a 13px description.

FAQ (id faq): heading Common questions and five rows split 40/60 with 01–05 mono numbers, a 20px serif question and a 15px answer, each above a Rule hairline.

Closing (id closing): centred, eyebrow TRY ISOLINE, a 64px two-line serif headline Bring your data, / read it on the map, a 16px line and the two buttons again.

Footer: full-bleed Ink, Paper text: the wordmark, a tagline, the coordinate readout in mono, then four columns of 13px links titled in Muted mono (Platform, Industries, Resources, Company) and a bottom row © 2026 Isoline · EPSG:3857 in 11px mono.

## 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, radius and spacing token. Render the page as a server component; the only client code is the hero carousel, the coordinate bar's ticking readout, the FAQ disclosure and the header's scroll state. Self-host Source Serif 4 (variable, with the opsz axis), Inter (variable) and IBM Plex Mono 400/500, all SIL Open Font License, as woff2 through next/font/local — no remote font request. Draw the contour mark, the aerial landscape, every icon, the product windows, phones and map thumbnails in HTML, CSS and inline SVG — never a bitmap or screenshot. Generate the landscape from a seeded random function so the server and client render identical markup. 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 Isoline clearly fictional and rebrandable: no real company, customer, person, testimonial or logo, and no source screenshot, illustration, product name or copy; the source icons in the Live data grid are generic line drawings, never real vendor marks. Text pairs clear WCAG AA: #1C1B18, #3A382F and #69685F on #F4F2EA, #ECEBE3 and #FFFFFF; #FFFFFF and #F4F2EA on #1C1B18; #A7531B on #F4F2EA is used only at 11px mono with uppercase tracking and has its own darker #8E4515 variant on #ECEBE3 if a pairing falls short. Ink is the only filled button colour — never a second button colour. The illustration and legend card are decorative and hidden from assistive technology; the carousel dots are real buttons with labels and pause on focus. Every link leads to a real anchor on the page; the page loads no analytics or tracking script and shows no cookie banner. Every control shows a 2px #1C1B18 focus ring with a 2px offset (Paper on Ink). Motion: the landscape drifts a few pixels with the pointer and the coordinate readout ticks to match, the carousel cross-fades every six seconds, the legend card slides 8px up as it changes, and buttons darken 8% on hover — all of it stops under prefers-reduced-motion, and everything is visible without JavaScript. At 360px the coordinate bar shows only LAT and LON, the header collapses to the mark, Start mapping free and a Menu button, the headline drops to 40px/42px, the subline to 16px/24px, the buttons stack full width, the illustration moves below the copy at full width with the legend card under it, every grid stacks to 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.