Tinybird

An original Siskin homepage: a 72px console-black header with a bird mark, a Roboto Mono nav with bracketed [+] menus and a [NEW] superscript, a green Sign in link and a square green Sign up button; a centred two-line 64px headline, an 18px grey lede, a 56px green Try for free button beside a green Contact sales link; a bracketed use-case tab strip; a framed proof card with a highlighted figure line, three green 56px mono stats and a quote panel over a strip of invented wordmarks; then a terminal workflow window, a coding-agent install snippet, an ingest-build-query architecture diagram, a red-versus-green setup diff, a six-card enterprise grid, a testimonial wall, a closing call and a six-column footer.

• Best forManaged databases, real-time analytics APIs, data infrastructure, observability backends, developer platforms and any infra product that wants a terse, terminal-flavoured black page with one green action colour.
• 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 header mega-menu, the use-case tabs, the terminal typing line and the copy button. Self-host Roboto (variable) and Roboto Mono (variable), both SIL Open Font License / Apache 2.0, as woff2 through next/font/local — no remote font request. Draw the bird mark, every wordmark, icon, avatar, terminal, diagram and diff in HTML, CSS and inline SVG — never a bitmap or screenshot. Provide page metadata. Build and run the production page before capturing its preview.

Build the "Tinybird" kickstart — A console-black developer page with a centred two-line 64px Roboto headline, square terminal-green buttons, a Roboto Mono nav in bracketed tabs, and a framed proof card of tightly tracked 56px mono figures beside a customer quote.

## Design
Build a rebrandable landing page for a managed real-time analytics database and API platform. Product engineers stream events into a hosted columnar database, write SQL, and publish each query as a low-latency HTTP endpoint for dashboards, usage meters and AI agents — without running a cluster.

Create a complete landing page for Siskin, a fictional real-time data 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: near-black everywhere, one terminal green. Console #0A0A0A is the page, the header and every section — never pure black except the terminal's inner canvas, Void #000000. Panel #151515 is the open menu, the quote panel, window chrome and every card. Graphite #262626 is card hairlines and icon tiles. Smoke #353535 is every 1px border: the tab strip, the proof card, windows, inputs. Ink #FFFFFF is headings, nav links and card titles. Muted #8D8D8D is the lede, descriptions, menu group labels and the quote rule. Fog #999999 is legal text. Signal #27F795 is the only accent: the primary buttons (with #0A0A0A text), text-link buttons, the active tab, the highlighted figure, the stat numbers and the terminal cursor. Pine #008060 is the button hover. Diff reds #800000 and diff greens #0B5E43 appear only inside the comparison window. No gradients, no shadows, no glow.

Typography: Roboto ("Roboto", "Inter", system-ui, sans-serif) for prose and headlines and Roboto Mono ("Roboto Mono", "JetBrains Mono", ui-monospace, monospace) for every control, label, tab and number. Hero headline Roboto 64px/72px weight 400 at -0.02em (-1.28px), centred in a 720px column, two lines. Section headings 64px/72px 400 at -0.02em, or 40px/48px 400 at +0.01em for the smaller ones. Lede 18px/32px 400 Muted. Proof line, quotes and enterprise card titles 24px/32px 400 at -0.32px. Card descriptions 14px/22px Muted. Roboto Mono: nav, buttons and links 16px/24px 400; tabs, captions and footer group titles 14px/22px; stat figures 56px/56px 400 at -0.084em; the [NEW] superscript 10px. The wordmark is Roboto 500 22px at -0.02em.

Layout: a 1440px viewport. The header runs edge to edge with 40px side padding; content columns are centred — the hero 720px, the proof card and windows 1129px (x 155 to 1284), feature grids 1080px. Big sections are separated by about 152px of empty black; nothing uses a rule between sections.

Header: 72px tall, Console, sticky. At x 40 a 26px original bird mark (a white paper-plane silhouette with a notched tail) beside the siskin wordmark. Centred links in Roboto Mono 16px Ink, about 40px apart: Product [+], Pricing, Docs, Resources [+] and Changelog with a 10px Signal [NEW] superscript. Product opens a full-width Panel mega-menu with three 288px columns (Platform, Developer experience, Enterprise), 14px Muted mono group labels and 18px/32px Roboto items each with a Muted sub-line. At the right, ending at x 1400: a Signal Sign in text link, 16px gap, and a 40px Signal Sign up button.

Hero: the headline's top at y 136 — Ship live analytics / over managed SQL. At y 296 a two-line 18px/32px Muted lede, 480px wide: The data infrastructure to ship real-time features in an afternoon, and at a fraction of the cost. At y 400 a 56px Signal Try for free button and, 32px right, a Signal Contact sales text link.

Use-case tabs: at y 504, centred, an 871×38 tab strip: [SaaS / Metering] | [Observability] | [AI Agents] | [Fintech / Ledgers] | [Real-Time Analytics], the last one active.

Proof card: at y 582, the 1129px framed card, 569px tall. Centred at y 650 one 24px/32px Muted line: an invented Larkspur Hotels wordmark, then serves 40M requests/day with sub-second latency — with 40M requests/day in Signal. Below, a two-column block from x 212: three stacked stats — 1.9B REQUESTS / PER MONTH, 180TB SCANNED / PER DAY, <80ms P95 / LATENCY — each a 56px Signal figure with its two-line 14px Signal mono caption to the right; and from x 537 a 691×264 Panel quote with a 1px Muted left rule: a 24px quote opening with a 32px “, the mono name Ines Okafor and role CTO at Larkspur Hotels beside a 40px avatar circle. At the bottom a row of eight invented 14px-tall grey wordmarks (Vellum, Northgate, raincatch, quillr, phantasm, FAIRPLAY, Larkspur, Driftwater) with the active one underlined in Ink.

Workflow (id workflow): a centred mono strip [Get Started] | [Develop] | [Ingest] | [Query] | [Monitor] | [Iterate] with the first in Signal, then a 1129×640 terminal window: Panel chrome with three dots and a tiny siskin-intro tab, a Void canvas, a prompt line → siskin-intro git:(main) » in Signal and Muted, and a 64px outlined play circle in the centre.

Coding agents (id agents): the 40px heading Built for Coding Agents, a tab strip [Coding Agents] | [TypeScript SDK] | [Python SDK] | [Siskin CLI], a 1129px window with a # comment line in Muted and $ npx skills add siskin/agent-skills in Ink with a copy button, and a centred Signal Start with your AI coding agent ↗ link.

Architecture (id architecture): a 1160px diagram drawn in HTML and SVG — an Ingest column (Events / Logs, Streams, Databases, Storage), a dark-green Build panel (#0F2A1E with a 1px #1D5A3D border) holding Events API, Managed Connectors, Deployment API, Pipes & SQL APIs, MCP Server, Native HTTP and Sinks API around a green diamond Columnar DB node, and a Query column (Client SDKs, Agents and LLMs, BI Tools, Sinks), with Dev Tools above and Monitoring below, joined by 1px grey curved connectors with square end-caps.

Comparison (id compare): a Try for free button and a Compare us link, then a 1129px window titled setup-plan.md split in two: left, numbered lines # Self-hosting a database with removed lines on #800000 (Zookeeper, Cluster management, Sharding, Backfills, Complex config); right, # Siskin with added lines on #0B5E43 (Hosted API layer, Hosted ingestion, Hosted MCP server, Automatic migrations, Git integration, Managed upgrades). Roboto Mono 12px/22px with Muted line numbers.

Enterprise (id enterprise): the 64px heading Startup speed for enterprise-scale data, a Contact sales button with an Estimate your price link, and a 3×2 grid of 375×340 Panel cards with 1px Graphite borders: a 28px icon tile, a 24px two-line title at y 140 and a 14px Muted description — SOC 2 Type II, HIPAA and GDPR; SSO and role-based access; Dedicated clusters and SLAs; Compute-compute separation; Bottomless storage; Engineers on call with you.

Testimonials (id customers): the 64px heading See who's shipping faster, a Join our community button with a Read the changelog link, then a three-column masonry of nine Panel cards: a 40px avatar circle, a 14px 500 name, a 12px Muted role and a 14px/22px quote — all invented people and companies.

Closing (id start): the 64px three-line heading Skip the infra work. Ship your first live endpoint today, centred, and one Signal Try it now button.

Footer: a 12px Fog disclaimer line, then six columns of 13px links with 14px 500 titles followed by a Muted slash (Product /, Features /, Support /, Resources /, Integrations /, Use cases /), a small bordered All systems operational status chip with four green bars, and a bottom row: Copyright © 2026 Siskin in 12px mono, underlined legal links, and four 24px square social icons at x 1400.

## 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 header mega-menu, the use-case tabs, the terminal typing line and the copy button. Self-host Roboto (variable) and Roboto Mono (variable), both SIL Open Font License / Apache 2.0, as woff2 through next/font/local — no remote font request. Draw the bird mark, every wordmark, icon, avatar, terminal, diagram and diff in HTML, CSS and inline SVG — never a bitmap or screenshot. 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 Siskin clearly fictional and rebrandable: no real company, customer, person, testimonial or logo, and no source screenshot, product name or copy; the connector icons in the architecture diagram are generic glyphs, never real vendor marks. Text pairs clear WCAG AA: #FFFFFF, #8D8D8D and #999999 on #0A0A0A and #151515; #0A0A0A on #27F795; #27F795 on #0A0A0A and #151515; white on #008060 and on the diff fills. Signal is the only filled button colour and never colours a heading. Tabs are real buttons with aria-selected; the mega-menu opens on click and on focus, closes on Escape and traps nothing. 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 #27F795 focus ring with a 2px offset. Motion: the use-case tabs cross-fade the proof card every six seconds and pause on hover or focus, the terminal types its command with a blinking block cursor, the diagram's connectors pulse toward the database, and buttons swap to #008060 on hover — all of it stops under prefers-reduced-motion, and everything is visible without JavaScript. At 360px the header collapses to the mark, Sign up and a Menu button, the headline drops to 40px/46px, the buttons stack full width, the tab strip scrolls horizontally inside itself, the proof card stacks stats above the quote, the diagram becomes a vertical list of the three columns, 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.