# inflight.co

Source: https://inflight.co/
Captured: 2026-10-16
Tags: saas, landing, mixed, both, minimal, dark-techno, bento, confident, calm, technical, premium, human
Colors: #0a0d0f, #2f3230, #687067, #ecf0ec, #504e49, #cbcfcb, #8f9688, #adb2ad
Type (h1): Inter Variable · 89.28px/87.4944px · 580 · tracking -4.0176px — "The feedback layer for pr o totypes"
Type (h2): Inter Variable · 52px/54.08px · 580 · tracking -1.82px — "Designed for how your team already works"
Type (h3): Inter Variable · 38px/45.6px · 520 · tracking -1.14px — "Built-in video"
Type (body): Inter Variable · 24px/34.08px · 400 — "Turn pinned comments and video replies into clear next steps for your coding age"
Type (small): Geist Mono · 12px/18px · 400 — "Senior Product Designer, Navattic"
Type (button): Inter Variable · 16px/24px · 400 — "How it works1:22"
Button: "How it works1:22" — fill #0c0e12, text #ffffff, radius 9999px, border 0px, padding 0px 22px 0px 10px, height 60px, type 16px/400
Radii: 9999px (14), 14px (4), 24px (3), 16px (3), 12px (3)

## Images

- Hero (desktop): https://media.lvly.design/library/inflight-co/hero.webp?v=351fa854
- Page crop (mid-1): https://media.lvly.design/library/inflight-co/mid-1.webp?v=3e4afb78
- Page crop (mid-2): https://media.lvly.design/library/inflight-co/mid-2.webp?v=ca11567b
- Hero (mobile): https://media.lvly.design/library/inflight-co/mobile-hero.webp?v=41224392
- Full page (desktop): https://media.lvly.design/library/inflight-co/full.jpg?v=f4fb23e3
- Full page (mobile): https://media.lvly.design/library/inflight-co/mobile-full.jpg?v=645f9393
- Clip preview (mp4): https://media.lvly.design/library/inflight-co/video-2bfepk.preview.mp4?v=849f6ef5

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.

## Steal-worthy details

- Headline word wrapped in a design-tool selection box — 1px indigo stroke, square white corner handles and a faint glow, turning the product's core gesture into typographic decoration
- A burst/asterisk glyph swapped in for one letter of the display line — a single custom mark that brands the headline without a logo lockup
- Display type at weight 580, 89px, letter-spacing -4px (-0.045em) and line-height 0.98 — a variable-font in-between weight that reads dense and confident without going bold
- Inverted CTA on dark: a white 56px pill with near-black 16px/600 label and a small chevron, alone and centered under the subhead
- Product video framed in a thin light-rimmed rounded container (~24px radius) with tilted, frosted comment cards spilling past its left edge and a docked Activity panel on the right — the UI escapes the frame
- Radial color glow (warm orange to green) rising behind the video frame from the bottom of the black hero, the only gradient on the page
- Two-state pill toggle as a feature illustration — a pale-red "Iterate" segment and a mint "Ship it" segment with colored status dots and avatar stacks with vote counts underneath
- Pull quotes at h2 scale with the first sentence in muted gray and the payoff in full ink, centered, with a small avatar and a Geist Mono 12px name/role line
- One testimonial set on a full-bleed near-black band mid-page, echoing the hero and breaking the long light scroll
- Header that changes on scroll: transparent over the dark hero, then a light bar with a hairline bottom border and a navy pill "Get started" appears on the right
- Grayscale customer logo strip on the dark hero, with the edge logos clipped by a fade so the row reads as an endless marquee
- Closing CTA as a dark rounded card with a phone mockup breaking out of its top edge

## Style recipe

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.