featurebase.app

A near-black product-marketing page that spends almost all of its surface on screenshots of the product itself, and keeps the marketing chrome so quiet that the screenshots look like the page. The ground is #050608 with a blue-violet cast, and the whole thing is built from three or four steps of that same hue — #0f0f18 across 84% of the pixels, panels at #2a2b39, hairlines and muted labels at #4d4f5a and #6e6e75 — so depth comes from tonal layering rather than from borders or shadows. Inter does everything: a 48px headline at weight 500 (not 700) with -0.96px tracking, a 23px regular subhead on a generous 34.5px leading, 18px body, 13px labels. The hero is centered, short, and hands the fold over at 70% height to a live-looking inbox mock that runs off the bottom edge; below that the page repeats one module — section title, one line of copy, a ghost button, then a full-width app mock inside a frame lit by a blurred violet rim, then a three-up row of feature notes on hairlines. Customer proof is folded in as single quote rows carrying the customer's real logotype instead of testimonial cards. It works because the restraint is total: one white button is the only saturated element in the marketing layer, so every eye-catching color on the page belongs to the product.

Build on a near-black blue-cast ground: page #050608, primary surface #0f0f18, raised panels #2a2b39, hairlines rgba(255,255,255,.06) reinforced by #4d4f5a, muted text #8c8c91, body text #cecfd7, headings #f6f6f6. Let value do the work — no borders where a 4–6% luminance step can separate two areas, and no drop shadows anywhere in the marketing layer.

Set everything in Inter. Scale: h1 48px/66px, weight 500, letter-spacing -0.96px (-0.02em); h2 (deck) 23px/34.5px regular in muted text; section titles 32–36px/500 at the same negative tracking; body 18px/28px regular; feature titles 20px/600; labels and tabs 13px/500; button text 14px/600. Never go above 600 — the largest type is the lightest-looking on the page.

Color roles: exactly one saturated element in the marketing layer, and it is a value contrast, not a hue. Primary button is solid #ffffff with #101219 text, 12px radius, 38px tall, 8px/16px padding. Secondary is the same geometry filled #2a2b39 with #f6f6f6 text. Ghost section buttons are the white pill at 90% opacity. Save every chromatic color — violets, greens, oranges — for inside product screenshots and integration icons, so saturation always means "this is the product."

Radii: 12px is the default for buttons, inputs, chips and small panels; 16px for large frames and screenshot enclosures; 9999px only for announcement pills and avatars; 8px for tiny inline tags. Keep the scale to those four.

Rhythm: one repeating module, stacked 10–14 times. Left-aligned eyebrow label (13px, muted, with a small icon), section title, one or two lines of deck copy, one ghost button, then a full-bleed-within-container product mock, then a three-column row of feature notes split by vertical hairlines. Section padding 120–160px vertical, container ~1200px. Only the hero is centered; everything after it is left-aligned.

Screenshot treatment is the signature move: wrap every product capture in a 16px-radius frame whose border is a heavily blurred violet glow (box-shadow: 0 0 0 1px rgba(139,110,255,.35), 0 0 60px rgba(120,80,255,.25) with a matching blurred pseudo-element behind it), and let the first one be cropped by the viewport's bottom edge rather than fully contained. The second signature move: render social proof as hairline-separated rows where the customer's actual logotype sits opposite the quote, never as a card grid.

Motion stays under 200ms — opacity and 8px translate on scroll reveal, background-color and border-color transitions on hover, and a subtle scale on nothing. Logo walls and stat bands are grayscale figures on the base ground with 12px muted labels beneath 28–32px numerals.