SaaS Landing Page

Build a complete landing page for "Relay", an API monitoring tool for developers. Match my project's existing stack, conventions, and design tokens. If there are none, output a single HTML file with inline CSS and zero dependencies. No JavaScript is needed; every effect is CSS.

The goal: a developer tool that feels like a precise instrument. Graphite surfaces, tight sans type, mono details, and one signal-yellow accent. The hero visual is the product itself, not an illustration.

TOKENS
- Colors: page #0B0C0E, surface #121317, raised #181A1F, border rgba(255, 255, 255, 0.08), text #EDEEF0, muted #8A8F98, faint #5A5F68, accent #F2D74E, accent ink #1A1600, ok #4ADE80, warn #FACC15, error #F87171.
- Fonts: UI is system-ui, -apple-system, "Segoe UI", Roboto, sans-serif. Code and data are ui-monospace, "SF Mono", Menlo, Consolas, monospace, with tabular numerals.
- Container: max-width 1160px, centered, horizontal padding clamp(20px, 4vw, 40px).
- Buttons: primary is accent background, accent ink text, weight 600, radius 10px. Ghost is transparent with a 1px border rgba(255, 255, 255, 0.12) and text color. Both lift nothing on hover; primary goes to #F7E27A, ghost border goes to rgba(255, 255, 255, 0.24). Focus ring 2px accent, offset 3px.

1. NAV
- Sticky, 64px tall, background rgba(11, 12, 14, 0.72) with backdrop-filter blur(12px) saturate(140%), 1px bottom border rgba(255, 255, 255, 0.06).
- Left: logo mark (18px accent square, radius 5px, with a 7px page-colored square in its bottom-right corner) and the word "relay" at 16px, weight 650, letter-spacing -0.02em, 10px gap.
- Center-left after 40px: links Product, Docs, Pricing, Changelog. 14px, muted, 28px gap, text color on hover.
- Right: "Sign in" (14px, muted) and a primary button "Start free" (14px, padding 8px 14px, radius 8px), 20px gap.
- Under 760px wide, hide the links and "Sign in".

2. HERO (centered, padding-top 96px, 72px under 760px)
- Announcement pill: 13px, muted, padding 5px 12px 5px 5px, radius 999px, 1px border rgba(255, 255, 255, 0.1), background rgba(255, 255, 255, 0.03). Inside: a "New" tag (accent background, accent ink, 11px, weight 700, uppercase, letter-spacing 0.06em, padding 3px 8px, radius 999px), 10px gap, "Traces for background queues", then a muted "→".
- h1, 28px below: "Know when your API breaks before your users do." clamp(40px, 6.4vw, 80px), weight 650, line-height 1.02, letter-spacing -0.045em, max-width 15ch, centered, text-wrap balance.
- Subhead, 24px below: "Relay checks every endpoint from 14 regions, traces the slow ones, and pages the right person. One line to set up." 18px (16px under 600px), line-height 1.6, muted, max-width 56ch.
- Actions, 36px below, centered, 12px gap, wrapping: primary button "Start free" (15px, padding 12px 20px) and a code chip "$ npx relay init" (mono 14px, padding 12px 16px, radius 10px, surface background, 1px border, "$" in faint). The chip is plain text, not a button.
- Fine print 16px below: "Free for 3 monitors. No credit card." 13px, faint.

3. PRODUCT WINDOW (64px below the hero text, max-width 1080px, centered)
- Behind it, a glow centered on the window's top edge: absolutely positioned, left and right 10%, top -200px, 400px tall, radial-gradient(closest-side, rgba(242, 215, 78, 0.16), transparent). It fades out before every edge of its box, so it never shows a hard line.
- Window: surface background, 1px border, radius 14px, overflow hidden, box-shadow 0 40px 120px -40px rgba(0, 0, 0, 0.8) and inset 0 1px 0 rgba(255, 255, 255, 0.05). The whole window is one role="img" with aria-label "Relay dashboard showing p95 latency for POST /v1/checkout"; everything inside is aria-hidden.
- Title bar: 44px, 1px bottom border, padding 0 16px, flex. Three 10px #3A3D44 dots, then 24px later three tabs at 13px: "Overview" (text color, with a 2px accent underline flush with the bar's bottom edge), "Endpoints", "Incidents" (muted), 20px apart. Far right: "Live" in mono 12px ok green, preceded by a 6px ok dot that blinks (opacity 1 to 0.3, 1.6s ease-in-out infinite alternate).
- Body: grid of a 260px sidebar and the main panel. Under 900px the sidebar is hidden.
- Sidebar: padding 14px 12px, 1px right border. Label "Endpoints" (11px, uppercase, letter-spacing 0.1em, faint, padding 0 10px 8px). Six rows, mono 12.5px, padding 9px 10px, radius 8px, each a 7px status dot, the route, and a right-aligned muted p95:
  GET /v1/users 84ms (ok) / POST /v1/checkout 182ms (ok, active row: raised background, text color) / GET /v1/search 412ms (warn) / GET /v1/orders 96ms (ok) / POST /v1/webhooks 1.8s (error) / GET /v1/health 12ms (ok).
- Main panel: padding 20px 24px 24px.
  - Header row, space-between: "POST /v1/checkout" (mono 14px, text color) with a "p95 · 24h" chip (11px, faint, 1px border, radius 999px, padding 2px 8px, 10px gap), and "us-east-1 ▾" (12px, muted) on the right.
  - Stats, 20px below: 4 equal columns (2 × 2 under 600px), 16px gap: Uptime 99.98% / p95 182 ms / Requests 1.2M / Incidents 2. Label 11px uppercase letter-spacing 0.08em faint; value 22px weight 600 tabular text color, 4px below.
  - Chart, 20px below: SVG viewBox 0 0 600 180, preserveAspectRatio none, height 180px. Three dashed horizontal gridlines at y 45, 90, 135 (stroke rgba(255, 255, 255, 0.06), dasharray 3 5). An area under the line filled with a vertical accent gradient from 0.18 to 0 opacity. The line: 1.75px accent, round joins, through these points:
    0,120 25,116 50,121 75,112 100,118 125,110 150,114 175,104 200,109 225,100 250,106 275,98 300,103 325,96 350,101 375,94 400,99 425,91 450,96 475,30 500,88 525,92 550,86 575,90 600,84
  - At the spike (475, 30) a 5px error dot and a tag above-right: "Incident #142 · 4.1s" (mono 11px, error color, background rgba(248, 113, 113, 0.1), radius 6px, padding 3px 7px), positioned as HTML over the chart so it never stretches.
  - At the last point an 8px accent dot with a pulsing ring (box-shadow 0 0 0 0 → 0 0 0 8px rgba(242, 215, 78, 0), 2s ease-out infinite), also HTML positioned at right 0, top 46.7%.

4. LOGOS (96px below the window, centered)
- Label "Trusted by engineering teams at" 13px faint.
- 24px below, one wrapping row, 48px gap (28px under 600px), color rgba(237, 238, 240, 0.55), each wordmark a different treatment:
  "Northwind" 20px weight 700 letter-spacing -0.03em / "lumen" 22px weight 300 letter-spacing 0.02em / "ARCADIA" 14px weight 600 letter-spacing 0.32em / "Kite" 22px italic weight 600 Georgia serif / "parallel" mono 17px weight 500 / "Oxide" 20px weight 800 letter-spacing -0.05em.

5. FEATURES (120px below)
- Header centered: eyebrow "Platform" (mono 12px, accent, uppercase, letter-spacing 0.14em); h2 14px below "Everything you'd build yourself, already running." clamp(30px, 4vw, 44px), weight 650, letter-spacing -0.035em, max-width 20ch, text-wrap balance.
- 48px below, 3 columns, 16px gap (1 column under 860px). Card: surface, 1px border, radius 14px, padding 24px. A visual area 132px tall at the top, then a mono 12px faint label, 8px below the title (18px weight 600), 8px below the description (15px, line-height 1.55, muted).
  a. Visual: 14 vertical bars (8px wide, 4px gap, radius 2px, height 56px, ok green at 0.75 opacity, the 10th one warn), centered. A highlight sweeps across them left to right: each bar briefly goes to full opacity with a 0 0 8px glow in its own color, one at a time (one keyframe set over 2.8s, linear, infinite, bar i delayed by i × 0.2s, the bright part lasting the first 7% of the cycle). Label "01 Monitor". Title "Checks from 14 regions". Description "Every endpoint, every 30 seconds, from wherever your users are."
  b. Visual: a trace waterfall, five rows (mono 11px muted names on the left 90px, bars on the right, 6px tall, radius 3px, raised color): request 0 to 100%, auth 2% to 14%, db.query 16% to 74% (accent bar, name in text color), cache.get 76% to 82%, render 84% to 98%. Label "02 Trace". Title "Waterfalls for slow requests". Description "See exactly which span ate the 300 milliseconds."
  c. Visual: an alert message card (raised background, radius 10px, padding 12px 14px): a 26px accent square avatar with "R" in accent ink, then "Relay" (13px weight 600) and "#on-call" (12px faint) on one line, and below it "POST /v1/webhooks p95 is 1.8s, above the 800ms threshold. Paging @maya." (13px, muted, line-height 1.5). Label "03 Alert". Title "Pages the right person". Description "Route by service and severity to Slack, PagerDuty, or SMS."

6. TESTIMONIAL (120px below, centered, max-width 820px)
- Quote: “We found a 4-second checkout regression on a Friday night. Relay found it in 40 seconds.” clamp(24px, 3vw, 34px), weight 500, line-height 1.3, letter-spacing -0.02em, text color; the opening quote mark in accent.
- 28px below, centered row: a 40px circle avatar (raised background, "PR" in accent, 14px weight 600), then name "Priya Raman" (15px weight 600) over "Staff Engineer, Northwind" (14px muted).

7. CTA (120px below)
- Panel: radius 20px, 1px border, padding 72px 32px, centered, background radial-gradient(60% 80% at 50% 0%, rgba(242, 215, 78, 0.12), transparent 70%) over surface.
- h2 "Ship with a safety net." clamp(32px, 4.4vw, 48px), weight 650, letter-spacing -0.035em. Subhead 16px below: "Free for 3 monitors. Upgrade when you need more regions." 17px muted. Buttons 32px below: primary "Start free" and ghost "Talk to us", 12px gap, padding 12px 20px, 15px.

8. FOOTER (96px below)
- 1px top border, padding 40px 0 56px. Grid: brand column (logo, then "© 2026 Relay Labs" 13px faint 14px below) at 2fr, then three 1fr link columns. Under 760px: 2 columns.
- Column headings 12px uppercase letter-spacing 0.1em faint; links 14px muted, 10px apart, text color on hover.
  Product: Monitoring, Tracing, Alerts, Status pages / Developers: Docs, API reference, Changelog, Status / Company: About, Careers, Blog, Contact.

MOTION
- Hero entrance: pill, h1, subhead, actions, fine print fade in and rise 16px, 700ms cubic-bezier(0.2, 0.7, 0.2, 1), staggered 80ms. The window follows at 400ms and rises 24px.
- Chart line draws once (pathLength 1, dasharray 1, dashoffset 1 to 0, 1.6s ease-out, 0.9s delay). The area fades in after it (0.6s, 2.3s delay). The incident tag and end dot fade in at 2.4s.
- prefers-reduced-motion: no entrance, no draw, no blink, no pulse, no sweep. Show every final state.

ACCESSIBILITY
- One h1. Section headings are h2; feature titles are h3.
- Links use real anchors; nav is a <nav aria-label="Primary">; footer columns are <nav> elements with aria-labels.
- Muted text stays at or above 4.5:1 on its background.

NEVER
- A purple-to-blue gradient, a gradient-filled headline, glassmorphism cards, or a grid of glowing icons.
- Stock 3D illustrations, emoji, or fake logos drawn as icons. Logos are typographic only.
- More than one accent color outside the status colors (ok, warn, error) in the product window.
- Centered body paragraphs wider than 60ch, or cards that lift on hover.