Val Town

Build the "Val Town" kickstart — A daylight IDE with cyan sparks: slate type on a cool gray canvas, a floating code editor as the hero and one electric cyan Run button.

## Design
Build a rebrandable developer-platform landing page for small hosted functions.

Create a complete landing page for Tidepool, a fictional platform where you write a small TypeScript function in the browser, save it, and it is instantly live at its own URL — as an HTTP endpoint, a scheduled job or an email handler. Its core idea: a daylight IDE with cyan sparks — a white-washed code editor where the chrome recedes, code glows in syntax colours, and one electric cyan button reads as run. This is a concept presentation, not a real product — no sign-up, accounts, pricing, usage counts, customer logos, real testimonials or real people. Use original branding, code and copy throughout.

Color: the page is about 95% achromatic. Porcelain #E2E8F0 is the page canvas and the default hairline. Pure #FFFFFF is the card, navigation and code-editor surface. Paper #F1F5F9 is the sub-surface inside cards and the icon strips. Mist #CAD5E2 is for input outlines and divider lines. Carbon #314158 is body text, headings and icon strokes; Slate #45556C is secondary copy; Ash #99A1AF is captions and timestamps only. Graphite #1D293D is the one dark surface, used for the sample-note cards and the output card. Chromatic colour is rationed in three tiers. Tier 1: Cyan Pulse #00BCFF fills exactly one button per viewport — the primary action — with #FFFFFF text. Tier 2: Plasma Violet #8E51FF and Signal Magenta #E12AFB colour a single word inside a headline or sentence, never a fill, border or full sentence. Tier 3: Voltage Cyan #53EAFD, Halftone Blue #74D4FF and the Halftone wash #CEFAFE decorate the announcement bar, code syntax and the pull-quote mark. No gradients anywhere; the system is flat.

Typography: IBM Plex Sans — "IBM Plex Sans", Inter, system-ui, sans-serif — sets everything that is not code, weight 400 for body, nav, labels and helper text and weight 700 only for headings, button labels and the one brand-coloured word. Letter-spacing is -0.025em across body and display and tightens as size grows. Scale: display 60px/1.11 at -1.5px, heading-lg 48px/1.14, heading 36px/1.25, heading-sm 24px/1.33, subheading 18px/1.56, body 16px/1.5, body-sm 14px/1.43, and a 10px caption at +0.1em uppercase used only in pills. All code, file names and technical labels are iA Writer Mono — "iA Writer Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace — at 14px/1.5, with 700 for keywords. All fonts are installed locally, no remote font request. Shapes: 8px radius on buttons, 12px on cards, the announcement bar and the code editor, 4px on the date pill. Spacing: 8–16px between elements, 24–32px card padding, 64–96px between sections, content inside a 1200px column. Elevation: flat. Hairline 1px #E2E8F0 borders separate cards; the only shadow in the system is 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1), on the hero code editor and its output card.

Announcement bar: inside the 1200px column, 16px above the hero, a full-width strip with a 1px #53EAFD border, #CEFAFE fill, 12px radius and 16px vertical padding. It holds a white date pill (IBM Plex Sans 700 10px uppercase, +0.1em tracking, 4px 8px padding, 4px radius) reading SEP 29 · SAMPLE, a 14px Carbon sentence Scheduled functions now run every minute — a sample announcement, and a Read more → link that jumps to the Questions section.

Top navigation: white, 64px tall, no shadow, a 1px #E2E8F0 bottom border. Left: the wordmark tidepool in IBM Plex Sans 700 18px Carbon with a small original tide glyph drawn as two 1.5px Carbon strokes. Centre-left: 14px weight-400 Carbon links Templates, Notes, Questions — each an anchor to a real section — and one link in Signal Magenta #E12AFB reading We're sampling!. Right: a 16px line search glyph that opens nothing and is labelled Search (sample), a plain Log in text link and a Sign up button with a 1px Carbon border, 8px radius and 8px 16px padding; both lead to the Questions section.

Hero: a split composition on the Porcelain canvas with 96px above and below. Left half: a 60px IBM Plex Sans 700 headline in Carbon, Write a function. It's live., with the single word live coloured Plasma Violet #8E51FF; an 18px Slate subhead, Tidepool turns a few lines of TypeScript into an HTTP endpoint, a cron job or an email inbox — with nothing to deploy.; then a button pair 32px below: the primary Run it free button (Cyan Pulse #00BCFF fill, #FFFFFF text, IBM Plex Sans 700 16px, 8px radius, 12px 24px padding) and a Browse templates ghost button (transparent, 1px Carbon border, Carbon 700 16px text, same size and radius). Right half: a floating code-editor card — #FFFFFF, 12px radius, the soft shadow — with a 44px header bar holding a main.tsx tab in iA Writer Mono 13px and a small Run button (Carbon #314158 fill, white 12px 700 text, 4px radius). The body is eight lines of iA Writer Mono 14px on #F1F5F9 with muted line numbers: export default async function (req: Request) { … return Response.json({ hello: "tide" }); }, with export and async function in Plasma Violet, strings in Deep Teal #104E64 on a faint #CEFAFE highlight, return in Signal Magenta, and punctuation in Slate. A #1D293D output card overlaps the editor's bottom-right corner — 8px radius, the same shadow, a 10px Ash label OUTPUT and Hello! in IBM Plex Sans 700 60px #FFFFFF. Pressing either Run button swaps Hello! for Hello again! from local state and sends nothing.

Template grid (id templates): a 36px heading Start from a template and a 16px Slate line All templates are samples, then four equal columns with 16px gaps. Each card is #FFFFFF with a 1px #E2E8F0 border, 12px radius and 16px padding: a 120px-tall #F1F5F9 icon strip holding three original 32px line glyphs (1.5px Carbon strokes, no fill), then a 16px 700 Carbon title and a 14px Slate description — Uptime ping (a cron job that checks a URL every minute), Form to inbox (an HTTP endpoint that emails you each submission), Daily digest (a scheduled summary sent at 8am), and Tiny API (a JSON endpoint backed by a small table). Each card also shows a 12px iA Writer Mono file name such as ping.cron.ts in Ash.

Sample notes (id notes): three equal Graphite #1D293D cards, no border, 12px radius, 28px padding. Each holds a 16px #FFFFFF quote with one emphasis word in Plasma Violet or Signal Magenta, and a footer row with an original initials disc, a 700 14px white name and a 400 12px #CAD5E2 role. Every name is invented and each card ends with the label Sample note — these are illustrations, not testimonials.

Pull quote: no container, centred in an 800px column on the canvas. An oversized 80px Halftone Blue #74D4FF quotation mark sits to the left of a 24px IBM Plex Sans 400 Carbon line at -0.6px tracking: The best deployment step is the one you never have to think about. Below it, a 14px Slate attribution — a sample line, no real person.

Questions (id questions): a 36px heading Questions, then native details elements on #FFFFFF inside a 12px-radius card, divided by 1px #E2E8F0 hairlines, with 18px 700 Carbon summaries and a thin plus glyph that becomes a minus when open: Is Tidepool real? — no, it is a fictional concept. Can I sign up? — no; every button on this page stays on this page and sends nothing. What runtime does it use? — none; the code on this page is a static sample.

Footer: on the canvas, a 1px #CAD5E2 top rule, 48px padding, the wordmark and a 14px Slate line Tidepool is a fictional concept. Not a real product., and a row of 14px Carbon anchor links back to Templates, Notes and Questions.

At 760px and below: 16px page padding, the nav keeps only the wordmark and Sign up, the hero stacks with the code editor below the copy and the output card tucked inside the editor's bottom edge, the display drops to 40px, the template grid becomes two columns then one at 480px, the sample notes stack, and the announcement bar wraps. The page fits a 360px viewport with no horizontal page overflow. Use semantic landmarks, one h1, a skip link, visible 2px Cyan Pulse focus outlines offset 2px on every control, text alternatives for every glyph that carries meaning, and keyboard-operable buttons and disclosures.

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

Use Next.js App Router, React and TypeScript with plain CSS custom properties and original inline SVG for the wordmark glyph, template glyphs and search icon. Preserve equivalent tools already installed in the host project. Render the page as a server component; the only client component is the code editor's Run state, which keeps local React state and sends nothing. Native details and anchors need no JavaScript. Use local font stacks only — no remote font, image, logo, icon, video or analytics host. Render the code sample as real HTML text, not an image. 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 Tidepool clearly fictional and rebrandable: no source wordmark, customer logos, testimonials, pricing, usage counts, sign-up flow or real people. Every note, name and template is labelled sample. Colour is rationed: Cyan Pulse #00BCFF fills exactly one primary button per viewport; Plasma Violet #8E51FF and Signal Magenta #E12AFB only ever colour a single word; the only dark surface is Graphite #1D293D; everything else stays in the slate grays of Carbon #314158, Slate #45556C, Mist #CAD5E2, Porcelain #E2E8F0 and Pure #FFFFFF. The system is flat — hairline borders separate cards and the only shadow is on the hero code editor and its output card. No gradients. Every link leads to a real section on the page; nothing is sent or stored. Deliver initially visible content with no scroll reveals, typing effects, marquees or parallax; hover and focus are a 150ms change, disabled for prefers-reduced-motion. WCAG AA contrast on every text/background pair — white on Cyan Pulse is a large-bold label only, so keep it at 16px 700 or darken the fill to #0092C7 if a check fails — keyboard-operable controls and disclosures, and a 360px layout without horizontal page overflow.

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