inflight.co

A dev-tool landing that opens in a near-black (#0a0d0f) hero with a soft colored glow bleeding up from a framed product video, then flips to an airy #f7f8f9 light body for the long scroll-driven feature story. Everything is Inter Variable at in-between weights (580 display, 520 subheads) with tight negative tracking, so the type feels engineered rather than bold. The product's own vocabulary is the decoration: a Figma-style selection box wraps "feedback" in the headline, an asterisk glyph replaces the "o" in "prototypes," and tilted glass comment cards spill out of the video frame. Neutrals carry a faint sage tint (#687067, #8f9688, #ecf0ec) instead of blue-gray, and color is rationed to a navy pill CTA in the scrolled nav and tiny red/green status dots. Customer quotes are set as large centered pull quotes with a muted second half, punctuating the scroll at rhythm points, one of them on a full-bleed dark band.

Build a two-tone page: open on a near-black hero (#0a0d0f) and switch to a cool off-white body (#f7f8f9, cards #ffffff) for everything after it; bring back near-black once mid-page for a full-bleed quote band and once for a rounded closing card. Use Inter Variable for everything: display 88px / weight 580 / line-height 0.98 / tracking -0.045em; section heads 52px / 580 / 1.04 / -0.035em; feature heads 38px / 520 / -0.03em; body 20–24px / 400 / 1.42 in a muted gray. Add Geist Mono 12px only for metadata like names, roles and timestamps. Give neutrals a faint sage tint instead of blue-gray: ink #0a0d0f, secondary #2f3230, muted text #687067, quiet #8f9688, borders #cbcfcb, tinted fills #ecf0ec. Keep color rare. The primary CTA is a pill (9999px): white with near-black text on dark grounds, and deep navy (about #163a6a) with white text in the light sticky header. Use semantic color only as small dots and pale tinted segments (red #ef4444 on a pale pink, green #22c55e on mint). Radii: pills for every button and toggle, 12–16px for cards, 24px for big media frames. Turn the product's own UI language into decoration: a selection box with corner handles around one display word, one custom glyph standing in for a letter, and frosted, slightly rotated UI cards spilling past a media frame. Allow exactly one gradient, a soft radial glow behind the hero media. Run testimonials as centered h2-scale pull quotes with a muted lead-in and a full-ink payoff. Make the header transparent on the dark hero, then a light bar with a 1px hairline bottom border once scrolled.