Drizzle ORM

An original Sleet page on Paper: a 40px announcement line; a 64px navigation with a three-stroke sleet mark, an outlined centre link group and star, bell and theme buttons; a two-column hero with a 40px bold headline whose last word is scribbled out under a blue handwritten aside, JavaScript / TypeScript tabs and a 2×2 grid of grey quick-action tiles beside a pen-drawn whiteboard and sleet-pellet mascots; a release log with contributor avatars, a progress card and month columns; a benchmark panel; runtime and database tile grids; a Studio table-browser window; sponsors; a joke pricing block; a masonry wall of love and a footer.

• Best forOpen-source libraries, ORMs, SDKs and CLIs that want to feel like a hacker's workbench — honest, playful and border-driven — with docs shortcuts, benchmarks and a wall of developer quotes.
• 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, border and spacing token. Render the page as server components; only the JavaScript / TypeScript tabs, the Studio tabs and the theme toggle need small client islands, and they hold state in memory only. Self-host Inter (variable, 400–700), JetBrains Mono (variable, 400–700) and Caveat (600–700) as woff2 through next/font/local — no remote font request — and set font-feature-settings "calt", "rlig", "ss01" on the body. Draw the sleet mark, the whiteboard and mascots, the scribbled strike-through, every runtime and database glyph, invented sponsor marks, benchmark charts and the Studio table browser as HTML, CSS and inline SVG with fixed sample data committed in the source, so the markup is deterministic between renders. Provide page metadata. Build and run the production page before capturing its preview.

Build the "Drizzle ORM" kickstart — A notebook-plain developer-tool landing page: system-sans headlines, a single blue handwritten annotation, pen-drawn sleet mascots, Pebble-bordered tiles and grey code surfaces on white paper.

## Design
Build a rebrandable landing page for a TypeScript ORM and SQL toolkit.

Create a complete landing page for Sleet, a fictional headless TypeScript ORM and SQL query builder: you write schemas and queries that read like SQL, get full types back, and run them on any serverless or long-lived runtime against any SQL database. This is a concept presentation, not a real company — no real sponsors, contributors, tweets, benchmarks or figures. Use original branding, artwork and copy throughout.

Color: Paper #FFFFFF is the page canvas, the navigation, cards and inputs. Cloud #F6F6F7 is the first step down — the quick-action tiles, code blocks, the release-progress card, the benchmark panel and button hover grounds. Ink #222222 is every heading and primary label, never #000000. Graphite #444444 is body copy and release-note text. Steel #4B5563 is the navigation links, the language tabs, icon strokes at rest and badge text. Ash #909090 is the announcement line, timestamps, hairline metadata and tile icons. Fog #969FAF is placeholder text and the search hint. Pebble #E5E7EB is every 1px border, divider, card edge and input outline — borders do the work shadows do elsewhere. Slate #282B3B fills the solid buttons with Paper text. Electric Cobalt #3E7FF0 is the one saturated voice: the handwritten hero annotation and its scribbled strike-through, the notification dot and heading-level emphasis — never a button, never body links. Signal Blue #006BE6 is only inline links inside paragraphs and testimonials. The mascots are filled Ice #C9D9F8 with Ink outlines. The release bar is a one-off #4BB74B; the benchmark charts use #3F9E3E for Sleet and #969FAF for the baseline. Nothing else adds colour — no gradients, no glass.

Typography: headings in Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif (a free stand-in for the platform UI sans) with font-feature-settings "calt", "rlig", "ss01"; body uses the same stack. Code, version numbers and the release card in "JetBrains Mono", ui-monospace, Menlo, monospace. The single handwritten annotation in Caveat, "Comic Sans MS", cursive at weight 700 (a free stand-in for a marker-pen hand). Hero headline 40px/48px weight 700; section headings 32px/48px weight 600; section sublines 16px/24px weight 400 Graphite; card titles 16px/24px weight 600; labels and quick actions 14px/21px weight 600; nav links 14px weight 600 Steel; language tabs 14px/21px weight 600 with 0.7px tracking; announcement 14px/21px weight 500 Ash; release notes 12px/17px weight 500 Graphite; month labels 12px/18px weight 600; mono 12px/18px weight 700 in the release card; annotation 30px/48px weight 700, never more than once on the page.

Layout: one 920px column centred at 1440px (x 260 to 1180); 160–200px between major sections, 64px between a heading and its content; inside cards 8–12px between elements and 16–24px padding. Radii: 8px on cards, tiles, buttons, inputs and images, 2px on inline code chips and badges, 20px on navigation link pills, full circles only on avatars. No drop shadows on cards or buttons.

Announcement bar: 40px tall, Paper, a 1px Pebble bottom border, one centred 14px line in Ash — Sample news: query batching landed in the beta channel. Try it out!

Navigation: 64px tall, Paper with a 1px Pebble bottom border, 24px side padding. Left: an original mark of three short slanted Ink strokes like falling sleet and the lowercase wordmark sleet in 20px weight 700 Ink. Centre: a 1px Pebble outlined rounded group (about 440×56px, fully rounded) holding Get Started, Documentation, Studio and Benchmarks as 14px weight 600 Steel links with 8px 10px padding and a 20px radius. Right, 8px apart: a 36px GitHub-style star badge (8px radius, 1px rgba(33,39,46,.12) border, rgba(241,242,243,.27) fill, an invented outline star icon and 21k+ in 14px weight 700 Ink), a 36px square bell button with a 6px Electric Cobalt dot at its top-right, and a 36px square sun theme toggle.

Hero (id top): 144px below the navigation, two columns inside the 920px column. Left (480px): the 40px/48px weight 700 Ink headline Typed SQL for you to tolerate, where tolerate is struck through by a hand-drawn Electric Cobalt zigzag scribble and, rotated -4deg just above it, the Caveat annotation actually enjoy in 30px Electric Cobalt. 2px below, an 11px uppercase Graphite line BACKED BY followed by an invented grey mark and the word Northwind Cloud. 32px below, two language tabs side by side 8px apart — JavaScript and TypeScript — each 34px tall with 8px 12px padding, a 1px Pebble border, 2px radius, a 16px grey JS / TS square chip and 14px weight 600 Steel text with 0.7px tracking. 86px below, a 2×2 grid of 198×40px quick-action tiles 4px apart on Cloud with 8px radius — Get Started, Documentation, Search Docs (a Fog placeholder with a ⌘K hint) and Ask Docs — each a 24px Ash icon, a 14px weight 600 Ink label and a small Ink chevron. Right (about 380px): an original pen-drawn illustration — a 315×170px Cloud whiteboard with a 4px warm-brown #A0754E frame, a tiny pixel snake, and two hand-lettered ghost buttons reading Run and Seed; below it three round Ice sleet-pellet mascots with dot eyes and stick legs, one carrying a small grey database cylinder, a tally of 7 scrawled above the board.

Release log (id log): the 32px weight 600 heading We ship most Tuesdays, a 14px weight 600 underlined line Sleet Team and Active Contributors, a row of fourteen 40px initials avatars with a 2px Paper ring overlapping by 12px, and on the right a 280×48px Cloud card with 8px radius: v1.0 release and 98% in 12px weight 700 JetBrains Mono over a 6px #4BB74B progress bar. Below, a horizontal timeline of four month columns (272px each, 20px apart) — May, June, July and This month — each a 12px weight 600 month label over a Cloud column holding Paper note cards (8px radius, 1px Pebble border, 12px padding) with a 12px weight 700 title such as Sleet Studio updates or ORM release v0.41.0 and three 12px/17px Graphite bullets with 2px-radius inline code chips.

Performance (id benchmarks): centred 32px heading Benchmarks with the subline Thin enough to forget it is there; a Cloud panel with 8px radius and 16px padding holding two Paper benchmark cards side by side — Sleet and a generic Baseline ORM — each with a 2px-radius version badge, a runtime chip, then three stacked charts labelled in 12px JetBrains Mono: avg latency as a line, avg requests per second as dense vertical bars and avg CPU load as a line, Sleet's in #3F9E3E and the baseline's in #969FAF, all sample figures; then a centred Slate button Go to benchmark results with a right arrow, 48px tall, 16px 32px padding, 4px radius, 16px weight 700 Paper text.

Runtimes (id runtimes): a two-column block — left the 32px heading Runs wherever you deploy, the 16px line Long-lived servers, serverless functions and edge workers alike and a small pen-drawn mascot leaning on a rail; right a two-column grid of 228×40px Paper tiles (8px radius, 1px Pebble border, 8px 12px padding) each with a 20px glyph and a 14px weight 600 Ink name — Node.js, Bun, Deno, Edge workers, Lambda functions, Electron, Expo, React Native, Browser — two carrying a tiny 9px uppercase CLOUD PARTNER or OUR SPONSOR tag at the top-right with a small heart.

Databases (id databases): the same two-column block with the heading Talks to every SQL dialect, the line Native, TCP, HTTP and WebSocket drivers behind one query API and a mascot juggling three shapes; tiles PostgreSQL, MySQL, SQLite, LibSQL and invented hosts Northwind Cloud, Harbor DB, Quarry, Tessel SQL and Lantern Edge.

Studio (id studio): a centred 11px uppercase Ash eyebrow SLEET STUDIO, the 32px heading We swore we'd never build a table browser and below it a short Fog line in the body sans, and yet, here it is; a row of tabs (Local Studio active with a 2px Ink underline, Gateway, Browser extension, Component, Desktop app with a SOON badge); a Cloud hint line with a 2px-radius code chip sleet-kit studio; then a 1080px Paper app window (8px radius, 1px Pebble border) drawing an original table browser — a sidebar of tables with row counts, a toolbar with Filters, Sort, Columns and a Slate Add record button, a dense grid of invented sample rows and a terminal strip — and two buttons centred below: Explore Studio (Cloud with Slate text, 3px radius, 10px 20px padding) and Live demo (Slate with Paper text), each 212×48px.

Sponsors (id sponsors): the centred heading Our Sponsors and the line Thanks to you, the Sleet team is well caffeinated; a Cloud panel with a Cloud partners card on the left and a Gold sponsors grid of 92×100px Paper tiles each holding an invented coloured mark and a 12px Graphite name; then a centred Slate Become a sponsor button.

Pricing (id pricing): the centred heading Pricing and the two-line subline Free forever and MIT licensed. Chip in if it saved you an afternoon.; a two-column row split by a 1px Pebble rule — left three stacked 200×40px Paper action buttons (Give us a star, Subscribe to updates, Join our community) with 16px icons, right a Fog 11px note Buy us some noodles over a Become a sponsor button.

Wall of love (id love): the centred 32px heading Overheard in the issue tracker, then a three-column masonry of Paper cards (8px radius, 1px Pebble border, 16px padding), each a 40px avatar, a 14px weight 700 name, an Ash handle and a 14px/21px Graphite quote with Signal Blue @mentions — playful, self-deprecating invented quotes, a few with an empty Pebble media box, all labelled sample.

Footer: on Paper with a Pebble top rule, left the mark and wordmark with the 14px line Typed SQL, nothing hidden. and three 20px social glyphs; right four columns — Documentation, Resources, Learn, Community — with 14px weight 700 Ink headings and 12px Ink links.

## 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, border and spacing token. Render the page as server components; only the JavaScript / TypeScript tabs, the Studio tabs and the theme toggle need small client islands, and they hold state in memory only. Self-host Inter (variable, 400–700), JetBrains Mono (variable, 400–700) and Caveat (600–700) as woff2 through next/font/local — no remote font request — and set font-feature-settings "calt", "rlig", "ss01" on the body. Draw the sleet mark, the whiteboard and mascots, the scribbled strike-through, every runtime and database glyph, invented sponsor marks, benchmark charts and the Studio table browser as HTML, CSS and inline SVG with fixed sample data committed in the source, so the markup is deterministic between renders. 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 Sleet clearly fictional and rebrandable: no real company, sponsor, contributor, person, tweet or copy; every name, avatar, handle, star count, benchmark figure, version and quote is invented and labelled sample. Generic technology names (PostgreSQL, MySQL, SQLite, Node.js, Bun, Deno) may appear as plain text only, never with their logos. Electric Cobalt #3E7FF0 is used only for the one handwritten annotation and its strike-through, the notification dot and heading emphasis — never on a button or a dark ground; inline links use Signal Blue #006BE6. Solid buttons are Slate #282B3B with Paper text so they clear WCAG AA; Graphite and Steel on Paper clear AA, and Ash and Fog are only for metadata and placeholders at their stated sizes. No drop shadows anywhere, no radius above 12px except the nav link pills and avatars. Every link leads to a real section on the page; buttons do not submit, sign anyone up or store anything; the page loads no analytics or tracking script and shows no cookie banner. Content is initially visible — no marquee, counters, typing, parallax or scroll reveal; tiles and links only take a Cloud ground over 150ms on hover, and transitions stop for prefers-reduced-motion. Every control shows a 2px Ink focus ring with a 2px offset. The mascots and charts are hidden from assistive technology, with a text alternative for the benchmark figures. At 360px the centre link group collapses into a Menu button, the hero stacks with the illustration below the quick actions, the timeline scrolls horizontally inside its own row, tile grids drop to one column, the wall of love becomes a single 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.