ClickHouse

An original Granary homepage: a 77px translucent nav with a five-bar mark, six items, search/terminal/globe icons, a star count, Sign in and a lime Get Started; a gradient near-black hero with a two-line 96px headline, a 24px lead and a lime button beside an olive-outlined ghost; a translucent two-part news bar straddling the hero's edge; a band of invented wordmarks under a lime eyebrow. Below: four use-case cards with lime-outlined icons, customer stories with filter pills and lime quote cards, a Why panel with five lime tiles, a full-lime Deploy band, community figures and a footer.

• Best forDatabases, data infrastructure, observability and developer platforms — any open-source technical product that wants one huge statement, one electric accent and proof from customers on the first screen.
• 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; it needs no client JavaScript. Self-host Figtree (600, 700), Inter (400, 500, 600, 700) and Inconsolata (600), all under the SIL Open Font License, as woff2 files through next/font/local — no remote font request. Draw the five-bar logo, icons, wordmarks, rings and play discs as HTML, CSS and inline SVG, never an image or canvas, so every render is identical. Provide page metadata. Build and run the production page before capturing its preview.

Build the "ClickHouse" kickstart — A columnar-database homepage: a near-black stage, a two-line 96px centred headline, one electric-lime button, a translucent news bar straddling the fold and a band of invented customer wordmarks.

## Design
Build a rebrandable landing page for an open-source, column-oriented analytics database: one engine that ingests events in real time and answers questions over billions of rows in milliseconds, for dashboards, observability and AI agents.

Create a complete landing page for Granary, a fictional analytics-database company. 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 near-black stage with exactly one electric colour. Void Black #151515 is the page; the hero runs a 170° gradient from #151515 through #171715 to Carbon #1F1F1C at the bottom right. Carbon #1F1F1C fills every card, the news bar's icon tile, terminal blocks and the deploy cards; Graphite #282828 is the hover state of cards; the logo band is #252524 under a 1px rgba(255,255,255,0.05) top line; the Why band is Steel #414141. Iron #3A3A3A is every card border and pill outline. White #FFFFFF is the hero headline and most headings; Fog #DFDFDF is body copy, the lead sentence and nav-adjacent text; Muted #A0A0A0 is secondary paragraphs and footer links. Electric Lime #FAFF69 is the only accent: the primary buttons (always with #151515 text), uppercase eyebrows, the 2px icon outlines, Explore links, the testimonial cards, the five Why tiles and the Deploy band — never more than one filled lime element per viewport except those designated bands. Dark Olive #4F5100 is the 1px outline of every ghost button; Olive Ink #161600 is text on the lime tiles. No other hue anywhere, no drop shadows: elevation is the surface stack plus 1px Iron lines.

Typography: display type is "Figtree", "Inter", ui-sans-serif, system-ui, sans-serif at weight 600 — the hero headline 96px/96px at -0.5px, section headings 36px/45px, card titles 20px/25px at 700. Everything else is "Inter", ui-sans-serif, system-ui, sans-serif: the hero lead 24px/32px at 400, body 16px/24px, secondary paragraphs 18px/27px, nav items 14px/20px at 500, buttons 16px/20px at 500 (14px in the nav), the news bar 14px/21px, eyebrows 14px/21px at 600 uppercase with 0.35px tracking. Terminal content is "Inconsolata", ui-monospace, Menlo, monospace at 600, 16px/24px. Body copy never drops below 14px or rises above 24px; the display face does the shouting.

Layout: a 1440px viewport with a centred 1216px column (x 112 to x 1328). Sections are 80px apart vertically; cards pad 24px. Radii: 4px for buttons and the news bar, 8px for cards, tiles and nav hover states, 9999px only for filter pills.

Navigation: a 77px bar on rgba(21,21,21,0.8) with a 1px rgba(255,255,255,0.05) bottom line. At x 112 a 40px-tall logo: five 4px White bars of heights 9, 15, 22, 12 and 22px, 3px apart, the last bar Electric Lime #FAFF69, then Granary in 19px Inter 500 White. From x 279, 40px-tall items with 16px side padding and 8px radius: Products, Solutions (each with a 14px chevron), Docs, Resources (chevron), Pricing, Contact us — 14px Inter 500 #F9F9F9. Then three 40px icon buttons (search, terminal, globe with a chevron) in Fog, a star with 31.2k, Sign in in 14px Inter 400 Fog, and, ending at x 1328, Get Started: a 40px Electric Lime button with #151515 text and 4px radius.

Hero (id top): headline top at y 173, centred: The columnar / database for agents in two 96px lines of White display type. At y 381 the 24px Fog lead Answer every agent's question in milliseconds, across billions of rows. At y 461 two 46px buttons 24px apart with 24px side padding: Start free cloud trial in Electric Lime with #151515 text, and Contact sales — transparent, White text, a 1px Dark Olive #4F5100 border that turns lime on hover.

Announcement bar: at y 603, a 1216×98px bar straddling the hero's lower edge — rgba(21,21,21,0.6) with backdrop blur, a 1px rgba(255,255,255,0.1) border, 4px radius — split by a vertical hairline into two links. The left holds a 64px Carbon tile with a 1px Iron border and a lime sparkline glyph, then Granary Streams is now generally available. Ingest a million events a second from Kafka-compatible topics, with exactly-once delivery and schema checks built in. The right holds a 64px lime-tinted disc with three concentric olive-to-lime rings around the five-bar mark, then Now in public beta: Granary Postgres. Run transactional tables beside your analytics, with every change flowing into columns in real time. Both in 14px/21px Fog.

Logo band: from y 653, full width on #252524. At y 734 the eyebrow Granary is trusted by, centred in Electric Lime. From y 795 two rows of 56px invented wordmarks in #F2F2F2, 64px apart and running off both edges — ostrava, Quillon with two interlocking rings, kitebird with a kite glyph, an italic vantor, Meridel with a three-dot mark, Torvane in a pill glyph, a tracked SUNDIAL, orchard.ai; then HALCYON, brightwell, TESSALY, nimbic, C O R V I D, PARCELWAY, Lowmoor. Each set in type with simple SVG shapes, never a real logo.

Use cases (id use-cases): the eyebrow Use cases, then the 36px heading Built for every query your agents ask, then four equal Carbon cards 16px apart, each with a 56px square icon outlined 2px in Electric Lime holding a 30px lime line icon, a 20px title, 16px Fog copy and a 16px Inter 700 lime Explore link with an arrow: Real-time analytics, Observability, Data warehousing, Agents & AI.

Customer stories (id stories): a 486px left column with the White heading Build real-time data products that hold up, an 18px Muted paragraph, a lime Filter by eyebrow and wrapping 40px pills (1px Iron, 9999px radius, 14px Inter 500 White) — and a 602px right column of Electric Lime quote cards with 40px padding and 8px radius: a Carbon 16:9 video frame with an 84px dark play disc holding a lime triangle, a 24px/36px black quote and a 24px semibold customer name.

Why Granary (id why): a Steel #414141 band, 96px tall padding, holding a Carbon panel whose top edge carries a 1px Electric Lime glow line. Centred: Why Granary? in 36px White, a 16px Fog sentence, then three columns — Blazing fast, Developer friendly, Cost effective — each a 20px White title over 16px Fog copy; then five 202px Electric Lime tiles 24px apart (Open Source, Secure, compliant, Resource optimized, Proven at scale, 90+ integrations) in Olive Ink #161600 with More →; then a Carbon terminal line $ curl -fsSL get.granary.example | sh with the $ in lime.

Deploy your way (id deploy): a full-width Electric Lime band with black text — the 36px heading Deploy your way and one 16px sentence — over an 800px grid of Carbon cards with 4px radius: a full-width Granary Cloud card with a White Get started button, then Granary Server and Granary Local cards each with a Dark Olive ghost download button.

Community: a two-column row — Join the 60k+ developers building on Granary in 36px White with 60k+ on an Electric Lime highlight — beside four 72px White figures (1.8k+, 44k+, 610+, 31.2k+) with 24px lime captions Contributors, PRs, Releases, Stars.

Footer: a 1px Iron top line, the logo and © 2026 Granary Data, Inc. in Muted #A0A0A0, and four columns — Product, Use cases, Resources, Company — of 14px Muted links under 14px White headings.

## 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; it needs no client JavaScript. Self-host Figtree (600, 700), Inter (400, 500, 600, 700) and Inconsolata (600), all under the SIL Open Font License, as woff2 files through next/font/local — no remote font request. Draw the five-bar logo, icons, wordmarks, rings and play discs as HTML, CSS and inline SVG, never an image or canvas, so every render is identical. 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 Granary clearly fictional and rebrandable: no real company, customer or person — every wordmark in the logo band is invented and set in type with simple SVG shapes, and no real logo, product name or testimonial is reproduced. Electric Lime #FAFF69 is the only accent; buttons on it always carry #151515 text, and no blue, purple or red appears anywhere. Text pairs clear WCAG AA: #FFFFFF, #DFDFDF and #A0A0A0 on #151515 and #1F1F1C, #151515 and #161600 on #FAFF69. Every link leads to a real anchor on the page, and the page loads no analytics or tracking script and shows no cookie banner. Content is initially visible; the logo band does not scroll, cards shift to Graphite #282828 and ghost buttons to a lime border over 150ms on hover, and every transition stops for prefers-reduced-motion. Every control shows a 2px #FAFF69 focus ring with a 2px offset. Decorative glyphs are hidden from assistive technology. At 360px the nav keeps the logo, Get Started and a Menu button, the headline drops to 48px/50px, the hero buttons stack full width, the announcement bar stacks its two links, the logo band scrolls horizontally inside itself, every grid stacks in 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.