Upstash

An original Fernbank serverless-data page on a flat #F5F5F5 canvas. A 36px #ECFDF5 announcement bar sits over an 80px header: a leaf mark and the fernbank wordmark at x 120, six 16px #71717A pill links from x 426 (Company carries a mono 4 chip) and a 74×40px tinted Login at the right. A soft green radial wash sits behind the hero: the 1200px two-line 128px Inter Tight headline Instant Data / Everywhere at y 180, filled with a #007A55 → #00BC7D → #F59E0B gradient; the 24px #71717A sub-line at y 444; and at y 500 a 168×44px #00BC7D Start for Free button beside a 291×44px white Set up your agent button inside a 2px mint-to-butter gradient ring. At y 624 six product tabs — Cache (active, white, 80px, red label), Relay, Flow, Vector, Sandbox, Files — each with a coloured 24px tile, open onto a 1200px white panel with 35px radius: a 24px #065F46 heading, three 42px buttons, three tinted feature cards with jade checks and a black code block with a carbon sidebar. Below the fold: a 180px Near Everyone statement over a dotted half-globe with a stat pill, a Serverless & Edge bento, agent tooling cards, a testimonial, community links and a footer.

• Best forServerless databases, caches, queues, vector stores, developer infrastructure and API platforms that sell several products under one account and want a big gradient headline and a tabbed product tour above the fold.
• 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 server components; only the product tabs (which swap the panel's heading, buttons, cards and code), the code example sidebar and language toggle, the agent-button dropdown, the copy buttons and the mobile menu need small client islands holding state in memory. Self-host Inter, Inter Tight and JetBrains Mono (all SIL Open Font License) as variable woff2 files through next/font/local — no remote font request. Draw the leaf mark, every icon, the product tiles, the dotted half-globe and the bento artwork as inline SVG and HTML; the globe's dots come from a fixed list computed at build time so the markup is identical on every render. Provide page metadata. Build and run the production page before capturing its preview.

Build the "Upstash" kickstart — A bright, flat serverless-data homepage: a two-line 128px Inter Tight headline filled with a pine-to-emerald-to-amber gradient over a soft green wash, an emerald Start for Free button beside a gradient-ringed agent button, and a row of six coloured product tabs opening onto a 35px-radius white panel.

## Design
Build a rebrandable landing page for a serverless data platform with several per-request products: one account that gives developers a key-value cache, a message relay, durable workflows, a vector index, agent sandboxes and file storage, all billed per request.

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

Color: a flat light-grey page with white panels and one green family. Page #F5F5F5 is the canvas behind everything. Paper #FFFFFF is the product panel, the active tab, cards and the agent button. Forest Ink #022C22 is every heading, body line and icon stroke — never pure black for text. Deep Pine #065F46 is the panel heading and the agent-button label; Pine #007A55 is the Login label and soft-button labels. Emerald #00BC7D fills the only solid buttons (Start for Free, Create Database) with #FFFFFF labels. Jade #10B981 is check icons, the active code-tab rule and focus rings; Mint #34D399 is code strings and the start of the agent-button ring, which ends in Butter #FCD34D. Graphite #71717A is nav links, inactive tabs and the hero sub-line. Hairline #E5E7EB is every 1px divider. Mist #ECFDF5 is the announcement bar. Tint rgba(4,120,87,0.08) fills the Login button, the soft buttons, inactive-tab borders and the feature cards; rgba(6,95,70,0.2) fills the Documentation button. The Sunset Gradient linear-gradient(to right, #007A55, #00BC7D, #F59E0B) fills only the two display headlines (128px and 180px), never anything under 48px. Obsidian #000000 and Carbon #27272A are reserved for the code block. Six product tiles each carry one saturated 24px square: #DC2626 Cache, #2563EB Relay, #7C3AED Flow, #EA580C Vector, #059669 Sandbox, #0284C7 Files; the active tab's label takes its tile colour.

Typography: headings use "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; body uses "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; code uses "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace. Hero headline 128px/128px Inter Tight weight 700, letter-spacing -3.2px, two lines, filled with the Sunset Gradient through background-clip text. Statement headline 180px Inter Tight weight 700, letter-spacing -4.5px, same gradient running to the bottom right. Section headings 48px Inter Tight weight 600, -0.025em; product tabs and card titles 24px/32px Inter Tight weight 600. Hero sub-line 24px/32px Inter weight 400. Panel heading 24px/32px Inter weight 500. Navigation and buttons 16px/24px Inter (links 400, buttons 500); the announcement 14px/20px; code 13.76px/20.64px JetBrains Mono.

Layout: a 1440px canvas with a 1200px centred container (x 120 to 1320). Coordinates below are page coordinates. Spacing on a 4px base; 96px between sections. Radii: 9999px nav links and stat pill, 12px buttons, 16px tab tops and cards, 35px the product panel, 6px code-sidebar rows and product tiles. No shadows anywhere — surfaces separate by tint and hairlines.

Announcement bar (id news): a full-width 36px #ECFDF5 strip with a 1px rgba(16,185,129,0.2) bottom border; centred 14px text New: (weight 500) then an underlined Fernbank now runs a hosted tool server — connect your coding agent to your account and a right arrow.

Navigation: an 80px header on the page colour. At x 120 a 30px leaf mark (a #007A55-to-#34D399 leaf with a white midrib and two white veins) and the 19px weight 600 wordmark fernbank. From x 426 six 40px pill links, 16px horizontal padding, in #71717A: Docs, Pricing, Customers, Enterprise, Journal and Company with a JetBrains Mono 4 count chip (14px, #047857 on rgba(52,211,153,0.2), 9999px) and a small chevron. At the right edge of the container a 74×40px Login button: Tint fill, 12px radius, 16px weight 500 #007A55.

Hero (id top): centred text. Behind it a very soft radial wash — an ellipse about 1500×680px centred on the headline, pale green rgba(209,236,226,0.55) in its middle ring with a near-white core, fading to #F5F5F5 — no hard edge. At y 180 the 1200px headline Instant Data / Everywhere. At y 444 the sub-line Every store your app needs, billed per request. At y 500 two 44px buttons with a 16px gap: Start for Free (168px, #00BC7D, a north-east arrow) and the agent button — a 2px ring from #34D399 to #FCD34D around a 40px white face with 10px radius, holding three overlapping 26px white circles (a terminal prompt, a four-point sparkle and a pair of braces, 1px #D4D4D8 borders), the label Set up your agent and a chevron.

Product tabs (id products): at y 624 a row of six tabs centred on the container, 8px apart, sitting on the panel's top edge. The active tab Cache is 80px tall, #FFFFFF, 16px top radii, its label #DC2626 with a small KV superscript at 50% opacity; the others are 64px tall on #F5F5F5 with a 2px Tint border and no bottom border, labels #71717A. Each tab has a 24px coloured tile with a white glyph. Directly below, from y 704, the 1200px #FFFFFF product panel with 35px radius and 48px top padding: the centred 24px weight 500 #065F46 heading A key-value cache in every region, with single-digit latency and durable writes; at y 800 three 42px buttons — Explore Cache with an arrow (Tint, #007A55), Documentation with a page glyph (rgba(6,95,70,0.2), #007A55) and Create Database with a plus (#00BC7D, white); then at y 890 three 357×288px Tint feature cards, 32px apart with 32px padding: Always On, Endlessly Elastic; Close to Every User; Memory Speed, Disk Safety — each a two-line 24px title over three 16px lines with 16px #10B981 checks. Switching a tab swaps the heading, buttons, cards and code.

Code examples (id code): inside the panel, a 318px #000000 block with 16px radius. A 258px #27272A sidebar headed EXAMPLES (13px, 40% white) lists Caching (active: #FFFFFF row, black text), Sessions, Rate limits, Leaderboards and Chat history; a 40px #27272A strip holds TypeScript (active: black with a 2px #10B981 top rule) and Python; the code shows six lines that import Cache from @fernbank/cache, read it from the environment and return a cached item — keywords #E9D5FF, strings #34D399, the rest #E4E4E7.

Edge (id edge): the 180px statement Near Everyone over a dotted half-globe drawn in SVG (a hemisphere of #00BC7D dots fading to #E5E7EB at its rim), with a white 9999px stat pill bordered #E5E7EB holding four pairs — 120B Cache reads, 180M Relay messages, 12M Flow runs, 99.99% Uptime — values 30px Inter Tight weight 600 #007A55, labels 14px #71717A, and a small italic * weekly sample below. Then a 48px heading Serverless & Edge with a 20px #71717A lead and a bento of four white cards with 16px radius: Global low latency (a row of thin #00BC7D latency bars), Price scales to zero (three Tint stat tiles: Requests, Storage, Cost), HTTP API (a tabbed dark code snippet) and Built for the edge (a ring of generic runtime glyphs around the leaf mark).

Agents (id agents): a centred 48px heading Built for Coding Agents and a two-line lead, then three white cards — Skills (a dark one-line install command with a copy button and a Works with row of plain text chips), Tool server and CLI — each ending in a #007A55 text link with an arrow.

Customers (id customers): a 48px heading Teams Building on Fernbank and a white 16px-radius testimonial card with 48px padding: an invented team wordmark, a 20px centred quote, an attribution and 6px pagination dots, the active one #00BC7D.

Community (id community): a 48px heading Community and four white link cards — Journal, Forum, Updates, Source — each with a generic glyph and a one-line description.

Footer: on #F5F5F5 above a 1px #E5E7EB rule, the leaf mark and wordmark, four 14px #71717A link columns (Products, Developers, Company, Legal), a small status dot reading All systems normal, and the line © Fernbank sample · a fictional serverless data platform. Not a real company.

## 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 server components; only the product tabs (which swap the panel's heading, buttons, cards and code), the code example sidebar and language toggle, the agent-button dropdown, the copy buttons and the mobile menu need small client islands holding state in memory. Self-host Inter, Inter Tight and JetBrains Mono (all SIL Open Font License) as variable woff2 files through next/font/local — no remote font request. Draw the leaf mark, every icon, the product tiles, the dotted half-globe and the bento artwork as inline SVG and HTML; the globe's dots come from a fixed list computed at build time 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 Fernbank clearly fictional and rebrandable: no real company, product, customer, statistic or person, and no runtime, cloud or agent vendor logos — every such mark is a generic glyph. The headline gradient appears only at display size. No drop shadows on cards, tabs, buttons or navigation; depth comes from #FFFFFF panels on #F5F5F5, Tint fills and 1px #E5E7EB hairlines. Body text is always #022C22, never #000000. #00BC7D is the only solid button colour; everything else is Tint or white. Text pairs: #022C22, #065F46 and #007A55 on #FFFFFF, #F5F5F5 and Tint, and #71717A on #FFFFFF and #F5F5F5, clear WCAG AA; the white label on #00BC7D follows the source look at 16px weight 500 and does not — if strict AA is required, darken that fill to #007A55. Every link leads to a real section on the page; the start and create buttons scroll to the pricing section and any email form validates locally and sends nothing. The page loads no analytics or tracking script and shows no cookie banner. Content is initially visible: no typing effects, counters, parallax, marquees or scroll reveal; hovers take 150ms, the active tab swaps instantly, and every transition stops for prefers-reduced-motion. Every control shows a 2px #10B981 focus ring with a 2px offset; the product tabs are a proper tablist; the wash and globe are decorative and hidden from assistive technology. At 360px the navigation collapses into a Menu button, the headline drops to 56px/56px, the statement to 72px, the buttons stack full width, the tabs scroll horizontally inside the container, the feature cards and bento stack, the code sidebar becomes a select above the code, 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.