Liftoff — Ship a startup site investors take seriously

Summary

A confident YC-classic light startup landing page. Clean white paper background with a faint slate grid, a warm orange accent system (orange #ff6b35 actions, soft orange wash highlights), near-black slate ink type set in Inter (extrabold display, tight -0.045em tracking), and a single hero highlight phrase marked by a translucent orange underline swipe. Centered hero with a pill announcement chip, a big two-line headline, a sub-paragraph, two CTAs, an avatar + 5-star social-proof row, then a large in-product app screenshot (toolbar + prompt rail + generated preview card) sitting on a soft browser shadow. Below: a backed-by/trusted-by logo row, a 3-up feature trio, a 3-step how-it-works with a connector line, a dark ink CTA panel with orange glow blobs, and a 5-column footer.

Style

YC-classic light SaaS. Crisp, trustworthy, founder-grade: white paper base (#ffffff) with a near-white wash (#f7f8fb) for alternating sections, hairline slate borders (#e7eaf0), near-black slate ink text (#0f172a) with slate-2 (#334155) body and muted slate (#64748b) for secondary copy. Single warm accent: orange #ff6b35 (hover #e8551f) for buttons, badges and the highlight underline, on a soft orange wash (#fff4ee). Inter for everything, extrabold (800/900) display headings with very tight -0.045em letter-spacing and ~0.98 leading, medium/semibold UI. Soft layered shadows: a tinted browser shadow under the product mock, a lighter card shadow on cards/pills, and an orange-tinted button shadow under CTAs. A faint 56px slate grid background sits behind the hero, and the hero top fades from a light orange wash. Highlight phrases get a translucent orange swipe behind them (::after, ~0.42em tall, 20% opacity). Overall feel: clean, confident, investor-ready, never neon or heavy.

Layout & Structure

Single-column long-form landing page centered in a max-w-[1180px] container with px-6 / lg:px-8 gutters. Top-down order: sticky blurred header nav, centered hero (announcement pill, big headline with one orange-underlined phrase, sub-paragraph, two CTAs, avatar + 5-star proof row, fine print, then a wide ~max-w-[980px] in-product app screenshot card), a backed-by/trusted-by logo row, a feature trio (3 cards on wash), a how-it-works 3-step row with a dashed-fade connector line, a dark ink CTA panel with orange glow blobs, and a 5-column footer with a bottom bar. Sections are separated by hairline bottom borders and alternate paper / wash backgrounds for rhythm. Responsive: headline scales 44 to 58 to 72px, CTAs and step cards stack to one column on mobile, nav links hide below lg, the product mock's prompt rail hides below md, and the footer grid goes 2 to 4 to 5 columns.

Sticky nav

Hero

Product screenshot (in-app mock)

Backed-by / logo row

Feature trio

How it works (3 steps)

Dark CTA panel

Footer

Special Notes

Single font: Inter (Google Fonts, weights 400-900), used for everything with -webkit-font-smoothing:antialiased and text-rendering:optimizeLegibility. Styled with Tailwind via CDN using a custom theme palette (ink #0f172a, slate2 #334155, muted #64748b, line #e7eaf0, paper #ffffff, wash #f7f8fb, orange #ff6b35, orangeDark #e8551f, orangeWash #fff4ee) and a custom 'tightest' letter-spacing of -0.045em. html has scroll-behavior:smooth. Keep exactly one warm accent (orange) over a white/near-white base with hairline slate borders; do not introduce a second accent hue, dark-mode-by-default, or neon. The mood is clean, confident and investor-ready, classic YC SaaS, not playful or maximalist.