Free saas landing page template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: murmur.md, data: murmur.json

Saas landing page template: first screen on a phone

About this saas landing page template

SaaS landing page template: one free HTML file for an app that sends small shops a single weekly message. It has a phone mockup, five coloured data-source columns, two priced plans and a contact form, in maroon, butter and gold with round-ended buttons. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

At a glance, October 2026. One 107 KB index.html with its CSS and JavaScript inside, 12 sections, 11 Unsplash photos credited in CREDITS.md, Gabarito and Rethink Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

Use it for a mobile app landing page or a software landing page where the product sends something small on a schedule: a digest, a report, a reminder, a paid newsletter. It also works as a startup landing page that needs two plans, a short list of integrations and a phone screen to show. Among SaaS landing pages it is a calm, colour-blocked one, with one idea told in order.

Hand index.html and AGENTS.md to Claude Code, Cursor or Codex and vibe code the rest. Replace the product, prices, plan limits, privacy promises, customer quotes and sample signals first; the demo invents all of them. The agent should ask the owner for real figures and customer names. Keep the section ids, the classes AGENTS.md lists, the five source columns and the eight field tiles, and update each --len after changing a display line.

As a SaaS website template it suits a product with a short story and two plans. For another take on an app page, see the app-focused template. A product that needs docs, a blog, a login or several pages needs more than one page. The weak spot is the logo: it is drawn paths, so a new name needs new paths. If you do not want to edit code, 8B's builder designs a new site from a sentence.

Good for:

SaaS or app landing page for small businessesNewsletter or subscription service with a weekly deliveryAnalytics, reporting or advice tool for shops and studiosAny product with two plans, a phone screen to show and a short list of sources or integrations

Turn the saas landing page template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/saas-landing-page-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/saas-landing-page-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/saas-landing-page-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/saas-landing-page-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my app: what it does and for whom, what it sends, the data sources it connects to, two plans with prices, privacy promises, customers I can quote, support email>. Replace the wordmark, copy, prices, quotes, photos and contacts first. Keep the section ids, the classes AGENTS.md lists, five source columns and eight field tiles, and set each --len to the character count of its line. Ask me for missing facts and never invent prices, customers, quotes, figures or contacts.

In a terminal

npx degit 8bsite/saas-landing-page-template my-site

Saas landing page design and motion

Palette

#6e1c1a maroon: page ground, buttons, the note panel behind the phone, manifesto and contact backgrounds, the first-screen note card#fee7a6 butter: first screen, moodboard and FAQ backgrounds, text on dark slabs, the signal chips, form fields#3d2217 dark brown: body text, the Stock column, makers, surfaces and footer backgrounds, the hover fill of maroon buttons, borders#8c4f25 rust: the Visits column, one moodboard note, the printed-card tile#bb9657 gold: the Sales column, one moodboard note, the text-message tile, the hover fill of butter buttons and FAQ rows, the active outline on the phone#171616 near-black: sources and pricing backgrounds, the phone body

Fonts

Gabarito: headings, plan prices, source names, phone sentence and the large email address, in weights 700 and 800
Rethink Sans: body text, buttons, chips, labels and form fields, in weights 400 to 600

Full-width colour slabs alternate down the page: a butter first screen, five columns in five colours, a maroon panel with a sticky phone, a dark brown row of makers, a butter moodboard, a maroon manifesto, dark brown delivery tiles, near-black pricing and a butter FAQ. Section headings are heavy Gabarito up to 66px. Chips and buttons are full pills, cards take 28px corners, columns and plans stay square, and the product is shown in HTML and CSS mockups, not screenshots.

Round ends repeat everywhere: pill buttons and chips, arch-cropped portraits, and button hovers where a curved fill rises from below and flattens. A manifesto with struck-out lines, a gutterless moodboard of photos and note tiles, and a footer wordmark whose six strokes bob in a wave complete the page.

Every value of this saas landing page design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the saas landing page page

Navigation
Fixed top bar: drawn wordmark, five section links, Start free button; hides on scroll down; phone menu overlay
The navigation bar hides on scroll down and returns on scroll up, and under 960 px the Menu button opens a full-screen overlay.
Forty signals a week. One sentence on Monday.
First screen: heading, lead, two calls to action, a field of 18 signal chips and the Monday note card
Pinned for 300svh: the 18 signal chips glide from a rotated scatter into a tidy list, three of them turn maroon and the Monday note card grows from a dot.
Five things it listens to.
Five coloured columns, one per data source, each with a line of text and a sample "Heard this week" line
Pinned: a small strip of five bars unfolds into the five full columns, then the Messages column carries on into the next section.
One sentence. Three reasons. One tap.
Maroon panel with a sticky phone showing the weekly note, beside a heading and three explained parts
On wide screens the maroon panel sweeps in from the Messages column with the phone inside, and each of the three parts lights its block on the phone with a gold outline as you scroll.
Kept by forty-one small studios.
Five arch portraits of customers with a place and a quote each, on a held horizontal track
Pinned: the row of five portraits slides sideways, and the card at the middle of the screen lifts so a wave travels along the row.
Field notes.
A gutterless moodboard of 8 tiles: 5 photos and 3 coloured note tiles
Pinned: the moodboard opens zoomed in on one note tile and zooms out until the whole grid is in view.
No dashboards. No streaks. No charts at midnight. One sentence on Monday.
Four large lines, three struck out, and two short paragraphs
The four lines slide in from alternating sides, and a bar strikes through each of the first three.
Wherever Monday finds you.
Four coloured tiles showing the same note on a lock screen, an inbox, a text message and a printed card
Each of the four tiles opens from a narrow round-ended tube to full shape on arrival, and the heading words rise.
Four Mondays free. Then one small price.
Two plans side by side: Studio and Collective, with price, list and button
The two plans rise from below as tall arches, the second a beat later, and square off as they lock into one panel.
Questions, answered plainly.
Six questions in native details elements beside a heading, an email line and an arch photo
The heading words rise and the portrait opens from a tube; the questions are plain details elements.
Say something. We answer by the next Monday.
Large email address in two halves, phone, studio address and hours, and a form
The two halves of the large email address slide in from opposite edges until they meet.
Footer
Footer: lead line, two link columns, copyright with the Design: 8B credit, back-to-top link and a large drawn wordmark
The six strokes of the large wordmark bob up and down in a wave, paused while the footer is off screen.

Before you publish the saas landing page site

Replace social preview image, favicon, email address, phone number and contact form (sends nothing yet) and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Start free button in the top bar and the phone menu, Start listening button in the first screen lead to #pricing now; point them to your sign-up or trial page.
Read a Monday note link in the first screen lead to #note now; point them to keep it, or link to a sample note or a demo.
Start four free weeks buttons in the two plans (Studio, Collective) lead to #contact now; point them to your checkout or sign-up page for each plan.
Email links in the questions and in the large address in the contact section lead to a mailto link to the placeholder address hello@murmur.example now; point them to your support address.
Phone link in the contact section lead to a tel link to a placeholder number now; point them to your phone number, or delete the line.
On phones the "Heard this week" lines in the five sources columns are hidden to fit the screen.
The contact form has no backend: it checks the name and email, shows the thank-you line and sends nothing until you connect a form service.
The first screen, the sources, the makers and the moodboard pin the page (300svh, 290svh, a long horizontal track and a zoom), which feels long on short laptop screens; with reduced motion they become plain stacked sections.
Five Unsplash portraits and five moodboard photos load from Unsplash's servers, and the maker names on them are invented.

Questions about this saas landing page template

Is this a free SaaS landing page template I can use for client sites?

Yes. It is one index.html under the MIT license, with no build step and no CMS. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr. Photos are Unsplash images and the fonts, Gabarito and Rethink Sans, are under the Open Font License; CREDITS.md lists them.

How do I give it to Claude Code, Cursor or Codex?

Put index.html and AGENTS.md in an empty folder using the curl lines at the start of AGENTS.md, and tell the agent to read AGENTS.md before it edits. Give it the files, not the page address, because a link comes back as a summary. Then paste the prompt from this page, filled in.

Which parts break if I change them?

Keep the section ids and the data-8b-section, data-8b-motion and data-8b-part attributes, plus the classes AGENTS.md lists for each script. Sources must stay directly above note, with five columns, and the moodboard keeps eight tiles. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.

Do the sign-up buttons and the contact form work?

Not yet. Start free and Start listening jump to the pricing section, and the plan buttons jump to the contact form. The form checks name and email, shows a thank-you line and sends nothing. Point the buttons at your checkout and connect Formspree or Netlify Forms, or delete the form.

Can I get a site like this without editing code?

Not this exact file, but you can describe your product to 8B's AI website builder and its engine designs a new site, with its own design. Designing and restyling are free. Publishing with hosting, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly, and it also runs inside Claude and ChatGPT.

What happens on a phone, with reduced motion or without scripts?

On a phone the five source columns stack and their Heard this week lines are hidden. With reduced motion on, the pinned scenes become plain stacked sections and the page reads in full. Without JavaScript the Menu button cannot open its overlay, and the bar links are hidden under 960 px.

Not a saas landing page? More free templates