--- id: web-landing-signup title: "SaaS Landing Page & Signup Page Patterns" category: pattern platform: web tags: [landing, saas, signup, onboarding, forms, product-screenshot] sources: - "https://mobbin.com/screens/00877e31-4b84-477f-844f-000bb4b4405e" - "https://mobbin.com/screens/bb369cb4-f7e0-4c16-a0f3-f39e7e4a3adf" - "https://mobbin.com/screens/b840e398-8b41-4259-917a-1f0d989b54a6" - "https://mobbin.com/screens/b8490a12-b5c8-4f88-9a68-7bdbaf4b59ad" - "https://mobbin.com/screens/887269c3-bc0d-4090-aaef-13c4462a1b53" - "https://mobbin.com/screens/bdd15498-8db4-480d-b3b4-eecce6d5317e" - "https://mobbin.com/screens/7d8b276e-b850-40f0-8692-ffe16dde5a8a" - "https://mobbin.com/screens/3605d7a3-481f-4a13-a3be-2c8b8f570037" - "https://mobbin.com/screens/6e15fdd2-969a-42bf-8de9-66735dc04257" - "https://mobbin.com/screens/7bebd01a-1b4b-43e4-a573-6ff2115a3823" - "https://mobbin.com/screens/e2e2434d-ae6c-4354-ac0d-a4b7b4bc82a6" - "https://mobbin.com/screens/9435af96-1fb6-46c7-9b67-3fd456ccc485" - "https://mobbin.com/screens/e23573ed-428f-4c2b-9a0d-dde328c1516e" - "https://mobbin.com/screens/afda2628-1eab-42c5-9802-2247692a2cc3" updated: 2026-07-08 --- # SaaS Landing Page & Signup Page Patterns Derived from Mobbin web screens: landing pages from StackAI, Laravel Cloud, Coda, Airtable, Linear, OpenPhone, and Wrangle; signup pages from OpenAI Platform, Vercel, Intercom, Amie, Faire, and Tally (July 2026 research pass). ## Part A — SaaS landing pages with product screenshot ### Observed patterns **1. The dominant recipe: centered headline stack + big screenshot below the fold line.** [OpenPhone](https://mobbin.com/screens/bdd15498-8db4-480d-b3b4-eecce6d5317e) ("The all-in-one phone system for teams"), [Airtable](https://mobbin.com/screens/b8490a12-b5c8-4f88-9a68-7bdbaf4b59ad), [StackAI](https://mobbin.com/screens/00877e31-4b84-477f-844f-000bb4b4405e) ("From process to AI agent, in minutes") and [Wrangle](https://mobbin.com/screens/7d8b276e-b850-40f0-8692-ffe16dde5a8a) all center a 2-line headline, 1–2 line subhead, CTA row, then a large framed product screenshot that bleeds off the bottom of the viewport. The partially-cropped screenshot acts as a scroll cue. **2. Left-aligned variant for denser copy.** [Laravel Cloud](https://mobbin.com/screens/bb369cb4-f7e0-4c16-a0f3-f39e7e4a3adf) (deep blue gradient, white "Get started" + outlined "Contact sales", 3-line benefit subhead including "$5 of free usage credit") and [Coda](https://mobbin.com/screens/b840e398-8b41-4259-917a-1f0d989b54a6) (peach background, black "Get started for free" + white "Contact sales") use left-aligned headline blocks; Coda still centers its screenshot below. [Linear](https://mobbin.com/screens/887269c3-bc0d-4090-aaef-13c4462a1b53) left-aligns "The product development system for teams and agents" on near-black, with the app screenshot showing a real issue view plus an in-screenshot agent panel — the screenshot itself tells the product story. **3. CTA pairing logic.** Primary + secondary appear together and encode the GTM motion: "Get a Demo" + "Try It Now" (StackAI), "Get started" + "Contact sales" (Laravel Cloud, Coda), "Get started for free" + "Book demo" (Airtable). OpenPhone uses a single black "Try for free →". Primary is always the filled, higher-contrast button on the left. **4. Screenshot treatment.** Screenshots are real UI, lightly framed: rounded corners, thin border or laptop-bezel crop (StackAI), soft glow/gradient halo (Wrangle's lavender field, Laravel Cloud's floating card with "Watch demo" play chip overlaid). Airtable overlays an AI prompt bar on top of the shot to dramatize the feature. Backgrounds tint toward brand color; screenshots stay light-theme readable even on dark pages (Linear excepted — dark-on-dark, consistent with its brand). **5. Announcement pills.** Wrangle floats a small rounded changelog pill above the headline ("Jan 20: Introducing Search by Calibration Profile") — a common slot for news without disturbing the hero. ### Design rules — landing - Order: nav → (optional announcement pill) → headline → subhead → CTA row → product screenshot. Let the screenshot crop at the fold. - Headline ≤ 2 lines; make a category claim ("The all-in-one…", "The product development system…"). - Pair one filled primary CTA with one quieter secondary; map labels to self-serve vs sales motion. - Frame screenshots with rounded corners + border/glow; never paste an unframed rectangle onto the page. - Show real, populated product UI — believable data, no lorem ipsum. - Keep the hero background flat or a single gradient; reserve saturation for either background or buttons. ## Part B — Signup pages with minimal form ### Observed patterns **1. Radical minimalism: one centered card, 1–3 fields, no marketing.** [Vercel](https://mobbin.com/screens/6e15fdd2-969a-42bf-8de9-66735dc04257): "Sign up for Vercel" + one email field + black "Continue with Email" + a link to "Other Sign Up options". [OpenAI Platform](https://mobbin.com/screens/3605d7a3-481f-4a13-a3be-2c8b8f570037): logo, "Tell us about you", first/last name side-by-side, green Continue, terms microcopy underneath. [Intercom](https://mobbin.com/screens/7bebd01a-1b4b-43e4-a573-6ff2115a3823) asks a single question per screen ("Your full name") with a full-width black Continue and a thin progress bar under the header. [Tally](https://mobbin.com/screens/e23573ed-428f-4c2b-9a0d-dde328c1516e) and [Faire](https://mobbin.com/screens/9435af96-1fb6-46c7-9b67-3fd456ccc485) cap at three stacked fields (name(s) + password) with helper text ("8 characters minimum") under the password field. **2. Value restated at the moment of commitment.** [Intercom's email step](https://mobbin.com/screens/afda2628-1eab-42c5-9802-2247692a2cc3) headlines the form with "Start your 14-day free trial. No credit card needed." — the risk-reducer lives on the signup page itself, not only the landing page. Its Continue button stays visibly disabled (gray) until the email is valid, with "Continue with Google" as an alternative below an "or" divider. **3. Progressive disclosure over long forms.** Intercom's stepper (progress bar + one field per screen) and OpenAI's name-only step show top products split signup into micro-steps rather than one long form. Tally's step is explicitly framed as finishing: "Tell us a little about yourself — add your name and create a password to finish setting up." **4. Personality is allowed but optional.** [Amie](https://mobbin.com/screens/e2e2434d-ae6c-4354-ac0d-a4b7b4bc82a6) uses conversational lowercase labels ("what's your email? (only Gmail for now)", "we also love nicknames!") with inline tips — playful, but still just two fields and one Continue button. **5. Chrome is stripped.** All signup screens remove the marketing nav; at most a logo (centered or top-left) and a single escape link ("Sign in" top-right on Intercom/Vercel). Legal consent is one line of small gray text with inline links, under the button (OpenAI: "By clicking 'Continue', you agree to our Terms…"). ### Design rules — signup - One column, centered, max ~400px wide; logo above; page background plain white/neutral. - Ask 1–3 fields per screen; prefer multiple micro-steps to one long form. - Label fields above inputs; put format hints as small helper text below. - Full-width Continue button in brand/near-black; disable until valid. - Offer one OAuth alternative separated by "or" — don't stack five providers above the fold (Vercel tucks extras behind "Other Sign Up options"). - Restate the offer/risk-reducer as the form headline ("14-day free trial. No credit card needed."). - Show progress (bar or step count) when signup spans multiple screens. - Keep terms consent as passive microcopy under the CTA, not a checkbox, unless legally required (contrast: marketing consent checkboxes belong in footers/newsletters). ## Anti-patterns - **Marketing on the signup page**: sidebars of testimonials, feature lists, or nav menus — every sampled signup screen is empty except the form. - **Long monolithic forms** (name + email + password + company + phone + role on one screen); leaders split these across steps. - **Password rules revealed only on error** — Faire/Tally show requirements up front as helper text. - **Landing screenshots that are fake or empty-state UI** — sampled leaders show populated, plausible workspaces. - **Two equally-weighted hero CTAs** — the primary is always visually dominant; demo/sales is secondary. - **Hiding "Sign in"** from returning users on signup pages; Vercel and Intercom keep it top-right.