Better Stack

An original Northlight page on Void Black: a sticky 52px blurred navigation with a gradient Sign up; a hero with a 53px white-to-steel gradient headline, a Steel subline, an e-mail field paired with a violet-gradient Start for free button and fine print; a 3D-tilted, edge-faded product window with a trace heatmap, root-span bars and an area chart, captioned with a carousel; a masked row of invented partner wordmarks; a pricing comparison card; AI SRE and Tracing card rows; a four-column testimonial grid; a closing call and a footer.

• Best forObservability, monitoring, incident-response and other developer-infrastructure tools that sell to engineers with the product itself as the hero image.
• 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, gradient, radius and spacing token. Render the page as server components; only the mobile menu needs a small client island, holding its state in memory. Self-host Inter as a variable woff2 with its optical-size axis (SIL Open Font License) through next/font/local — no remote font request — so headings render at the display optical size. Draw the product shot, its heatmap, bars and area chart, the logo mark, the partner wordmarks and every icon as HTML, CSS and inline SVG; generate the heatmap's points at build time from a fixed seed so the markup is identical on every render. All sample data is committed in the source. Provide page metadata. Build and run the production page before capturing its preview.

Build the "Better Stack" kickstart — A midnight SRE-console landing page: a white-to-steel gradient headline on blue-black, an e-mail capture with one violet gradient button, and a tilted, fading product window full of trace heatmaps.

## Design
Build a rebrandable landing page for an on-call observability platform: logs, traces, uptime monitoring and incident response in one place.

Create a complete landing page for Northlight, a fictional observability company whose product gathers logs, traces, metrics, uptime checks and on-call schedules into one console with one predictable bill. This is a concept presentation, not a real product — no real company, customer, logo, person, quote, price or competitor figure. Use original branding, artwork and copy throughout.

Color: a midnight SRE console. Void Black #0B0C14 is the page — a blue-black, never pure black. Canvas #0F101A is the one-step-lighter well: the 80%-opaque sticky navigation and the inside of every input. Carbon Surface #151621 is every card, the comparison panel, testimonial tiles and the ghost buttons' fill. Gunmetal #1F2433 is every card and input border and every divider inside a card; Rim #262935 is the ghost-button border and the carousel arrows' ring. Steel #939DB8 is the default secondary text — the hero subline, fine print, nav icons, card descriptions, partner wordmarks — and the bottom stop of every heading gradient. Frost #C9D3EE is navigation text, ghost-button text and icon strokes. Muted Steel #646E87 is placeholder text, chart axes, footnotes and inactive carousel dots — never body copy. Pure White #FFFFFF is primary text and button text. Iris Blue #5B63D3 is the brand: the primary button is a 353-degree gradient from #5B63D3 at 17.51% to #7C87F7 at 183.08% — the only gradient fill on the page — and Iris also draws the chart area fills and progress bars. Periwinkle #98A4F7 is links, testimonial handles and chart lines; it is never a button fill. Depth comes from surface tones (#0B0C14 → #0F101A → #151621 → #1F2433) and a 1px inset rim light rgba(255,255,255,.25) 0 1px 3px on the filled buttons — never a drop shadow. No other chromatic colour appears, except one red #E5484D used on a handful of error points inside the product-shot chart.

Typography: one neo-grotesque family. Headings use "Inter Display", "Inter", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif — Inter at its display optical size, standing in for a precise Helvetica-style display face, weight 500, never 700 for the hero. Body uses "Inter", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif. Every text size carries -0.01em tracking; enable font features ss01 and cv11 for the single-storey a and straight-legged letters. Hero headline 53px/58.3px weight 500, letter-spacing -0.02em, filled with a 162-degree text gradient from #FFFFFF at 25.49% to #939DB8 at 110.77% (background-clip text) and 8px bottom padding so descenders are not clipped; hero subline 20px/24px weight 400 Steel; section headings 40px/43.2px weight 700 with the same white-to-Steel text gradient at 165 degrees; product-section titles 40px weight 700 solid white; card titles 16px/24px weight 500 white; card text 14px/21.7px Steel; navigation 13px/13px weight 400 Frost; the nav Sign up 13px weight 500; the hero button 17px weight 500; inputs 16px/24px; fine print 13px/20px; footnotes 12px/18px Muted Steel. Code and chart labels use ui-monospace, SFMono-Regular, Menlo, monospace at 7–9px inside the product shot.

Layout: one 1110px container centred at 1440px (x 165 to 1275); hero copy indents to x 190. Radii: 9999px on ghost buttons, badges and carousel arrows; 8px on the nav Sign up; 10px on the hero Start for free; 12px on the hero e-mail field; 16px on every card; 14px on the product-shot window. Section padding 120px; 20px gaps in card grids; 20–24px card padding.

Navigation: a sticky 52px bar, Canvas at 80% opacity with a 12px backdrop blur, a 1px rgba(147,157,184,.12) bottom hairline spanning only the container. Left at x 168: a mark of two slanted parallelograms plus a short third stroke at 60% opacity, then the wordmark Northlight in 14px weight 600 white at -0.02em. From x 295: Platform, Documentation, Pricing, Community, Company and Enterprise in 13px Frost — the dropdown items (Platform, Community, Company) carry an 8px chevron 10px after the label and sit 24px from the next item; plain items sit 40px apart. Right: Sign in as a plain 13px Frost link, then Sign up — 27px tall, 8px radius, 0 8px padding, the Iris gradient, a 1px rgba(255,255,255,.11) border and the inset rim light.

Hero (id top): an 820px band. Left, from x 190: the headline The on-call / observability stack at y 184 on two lines; the subline One sample bill for logs, traces and uptime. / Humans who answer the pager with you. at y 317 in a 530px measure; at y 393 a lead-capture row — a 324×52px field (rgba(125,130,153,.1) fill, a 1px rgba(147,157,184,.16) border, 12px radius, 0 20px padding, placeholder Your work e-mail in Muted Steel) and 12px to its right a 50px Start for free button (0 24px padding, 10px radius, the Iris gradient, rim light); at y 473, indented 4px, two lines of 13px Steel fine print — Switching from another vendor? Your first sample quarter is on us. / Guided migration and onboarding included. — ending in a Frost link Book a walkthrough with a 1px Steel underline. Right, from x 690 to past the right edge: the product shot — an 880×440px dark window (#11121C, 14px radius, a faint steel hairline) drawn entirely in HTML and SVG and tilted in 3D with perspective 1800px, rotateX(16deg) rotateY(8deg) rotateZ(4deg) so its top edge runs gently downhill to the right; it is masked to fade out on the left, right and bottom edges, at 82% opacity, with no frame or shadow. Inside: a 34px icon rail; a 150px sidebar headed Telemetry with Sources, Collectors, Services, Map, Logs & traces, Explore (selected, a soft steel fill), Dashboards, Alerts and Heartbeats; and a main pane with the breadcrumb Explore › eu-north-prod slow checkouts, a mono toolbar (a service pill, + Transform with SQL, a sampling slider at 40%), a scatter heatmap of span durations — hundreds of 3px Frost squares at 12–90% opacity on faint gridlines with mono millisecond and time axes, a dashed white brush box over the dense cluster and a few red error points — and below it a tabbed panel (Root spans, Anomalies, Traces, Logs, Database, External requests) with four mono root-span rows and percentage bars in Iris and Muted Steel beside an Iris area chart with a Periwinkle line. Under the shot at y 553, centred on x 1025: the caption OpenTelemetry-native tracing in 13px Steel, then at y 584 a carousel row — two 26px round Carbon Surface arrows with a Rim ring and nine 5px dots between them, the third Frost and the rest Muted Steel.

Partner logos: at y 728 a full-width row of eight invented monochrome wordmarks in Steel, spaced evenly and fading out at both ends through a horizontal mask — quarryline, bastion (with a shield), Harbourly (with an arch), orchard (light, with a ring), Fenmoor (a serif), KESTRAL (heavy, tight), Lattice (with a diamond) and ARVEN (wide-spaced caps). A 1px rgba(147,157,184,.1) rule closes the hero at y 871.

Pricing (id pricing): a two-column section — left a 420px block with the gradient heading At a fraction of / your current bill, a 16px Steel paragraph and an Explore pricing ghost pill; right a comparison card (Carbon Surface, 1px Gunmetal, 16px radius, 24px padding) whose header row shows 1 TB traces per month, 1 TB logs per month and 1 TB metrics per month in 20px weight 500 white over 14px Steel labels, then two rows — Legacy vendor with a full-width Rim bar and approx. $48,900 per month, and Northlight with a 3% Iris-gradient bar and $740 per month — and a 12px Muted Steel footnote that says the figures are an illustrative sample, not a quote.

Product sections (ids platform and docs): AI SRE and Tracing, each a 40px white title with an Explore ghost pill (9999px, 1px Rim, Frost 14px weight 500, 8px 20px padding, a chevron) on the right, then a row of three 300px-tall cards at 2:1:1 — each Carbon Surface, 1px Gunmetal, 16px radius, 20px padding, with a 16px weight 500 white title and a 14px Steel line pinned to the bottom.

Testimonials (id community): the heading Loved by on-call engineers and a four-column grid of tiles — Carbon Surface, 1px Gunmetal, 16px radius, 20px padding — each with a 32px Gunmetal avatar circle, a 14px weight 500 name, a Periwinkle handle ending .sample, and a 14px white quote.

Closing call (id company): a centred gradient heading Ship it. We'll watch it., a Steel line Start for free — no card, no sales call. and the Start for free button.

Footer (id enterprise): a 1px rgba(147,157,184,.1) top rule and one 13px Muted Steel line — © Northlight sample · a fictional observability company. Not a real product.

## 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, gradient, radius and spacing token. Render the page as server components; only the mobile menu needs a small client island, holding its state in memory. Self-host Inter as a variable woff2 with its optical-size axis (SIL Open Font License) through next/font/local — no remote font request — so headings render at the display optical size. Draw the product shot, its heatmap, bars and area chart, the logo mark, the partner wordmarks and every icon as HTML, CSS and inline SVG; generate the heatmap's points at build time from a fixed seed so the markup is identical on every render. All sample data is committed in the source. 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 Northlight clearly fictional and rebrandable: no real company, product, customer, logo, person, quote, price or competitor name — the comparison names only a "Legacy vendor", every figure is labelled a sample, and testimonial handles end in .sample. The Iris gradient is the only filled button and the only gradient fill; it appears on Sign up, Start for free and nothing else. Periwinkle #98A4F7 is never a fill. No drop shadows — depth comes from surface tones, hairlines and the inset rim light. Cards stay at 16px radius and secondary buttons are always 9999px pills; nothing has a corner under 8px. Text pairs clear WCAG AA: white and Frost on any surface, Steel #939DB8 on Void Black and Carbon Surface at 13px and up; Muted Steel #646E87 is only for placeholders, axes and 12px footnotes. Every link leads to a real section on the page; the e-mail field is a visual element that does not submit or store anything, and the page loads no analytics or tracking script and shows no cookie banner. Content is initially visible: no carousel autoplay, typing, counters, parallax or scroll reveal — the carousel arrows and dots are static decoration; buttons and nav links take their hover colour over 150ms and transitions stop for prefers-reduced-motion. Every control shows a 2px Periwinkle focus ring with a 2px offset. The product shot, heatmap and charts are hidden from assistive technology; the partner row has an accessible label. At 360px the centre navigation collapses into a Menu button, the headline drops to 36px/40px, the e-mail field and button stack full-width, the product shot moves below the hero copy untilted and scaled to the viewport, the logo row wraps to two lines, every two-column section and card row stacks 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.