---
version: alpha
name: "SaaS landing page template by 8B"
description: "A SaaS landing page for a small-business app, in maroon, butter and gold with round-ended shapes, pinned scroll scenes and a phone mockup. Free HTML template by 8B, MIT."
colors:
  primary: "#6e1c1a"
  secondary: "#3d2217"
  tertiary: "#bb9657"
  neutral: "#fee7a6"
  surface: "#fee7a6"
  on-surface: "#3d2217"
  rust: "#8c4f25"
  near-black: "#171616"
typography:
  headline-lg:
    fontFamily: Gabarito
    fontSize: 66px
    fontWeight: 800
    lineHeight: 0.98
    letterSpacing: -0.025em
  price-display:
    fontFamily: Gabarito
    fontSize: 110px
    fontWeight: 800
    lineHeight: 0.9
    letterSpacing: -0.03em
  headline-md:
    fontFamily: Gabarito
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.12
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Rethink Sans
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.45
  body-md:
    fontFamily: Rethink Sans
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
  label-md:
    fontFamily: Rethink Sans
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.2
  label-sm:
    fontFamily: Rethink Sans
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0.01em
  button:
    fontFamily: Rethink Sans
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.005em
  input:
    fontFamily: Rethink Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  field: 18px
  card: 22px
  panel: 28px
  phone: 48px
  full: 999px
spacing:
  gutter: 72px
  gutter-mobile: 20px
  gap-sm: 14px
  gap-md: 24px
  control-height: 52px
  max-measure: 30em
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0 28px
    height: 52px
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.neutral}"
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0 28px
    height: 52px
  button-secondary-hover:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.secondary}"
  chip:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.secondary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 7px 16px
    height: 38px
  chip-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 7px 16px
  input-field:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.secondary}"
    typography: "{typography.input}"
    rounded: "{rounded.field}"
    padding: 13px 18px
    height: 52px
  card-note:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.panel}"
    padding: 34px
  phone-body:
    backgroundColor: "{colors.near-black}"
    textColor: "{colors.secondary}"
    rounded: "{rounded.phone}"
    padding: 11px
---

## Overview

Murmur is a SaaS landing page for a small-business app that sends one short message a week. The one idea is quiet: forty signals become a single sentence, so the page uses big flat colour slabs, one heavy geometric headline face and a lot of empty room. It speaks to shop owners and the founders who build for them, and it should feel warm and calm, like a handwritten note, not like a dashboard. The small things are round-ended (buttons, chips, the portrait arches, the phone) and the cards take soft 28px corners, while the full-width columns, plans and moodboard tiles stay square. The product is shown in HTML and CSS mockups, never in screenshots.

## Colors

Six colours, all defined in `:root` as `--color-1` to `--color-6`. Slabs change colour from section to section, and each slab uses one of them as ground with butter or brown text.

- **Primary (#6e1c1a), maroon:** page ground behind everything, the default button, the note card on the first screen, the panel behind the phone, the manifesto and contact slabs, filled chips and the Studio plan.
- **Secondary (#3d2217), dark brown:** body text on light slabs, the makers, surfaces and footer slabs, borders and rules, and the hover fill of maroon buttons.
- **Tertiary (#bb9657), gold:** one source column, one moodboard note, the struck-out "No" lines of the manifesto, the hover fill of butter buttons and FAQ rows, and the outline that marks the active block on the phone.
- **Neutral and surface (#fee7a6), butter:** the first screen, moodboard and FAQ slabs, text on dark slabs, outlined chips, form fields and the Collective plan.
- **Rust (#8c4f25):** the Visits source column, a moodboard note, a printed-card tile and the image placeholder behind portraits.
- **Near-black (#171616):** the sources and pricing slabs and the body of the phone.

Brown on butter and butter on maroon both hold 4.5:1 contrast; use them for small text.

## Typography

Two families from Google Fonts. **Gabarito** (weights 700 and 800) is the voice: a heavy, round geometric face for headlines, plan prices, source names, the phone sentence and the large email address. **Rethink Sans** (400 to 600) carries body copy, buttons, chips, labels and form fields.

- Section headlines scale from 36px to 66px on desktop (34px on phones, 26px for the first-screen headline), and the manifesto lines are sized to fill the width. Line height is under 1, tracking tight (-0.025em), sentence case.
- Plan prices go up to 110px, scaling from 64px.
- Body copy is 17px at 1.55, with a larger lead of 18 to 21px. Labels are 13 to 15px.
- No uppercase labels, italics or third family.

## Layout

The page is a stack of full-width slabs with no outer max width. Content follows a gutter of `clamp(20px, 5vw, 72px)`. Sections take about 16svh of padding at the top and 14svh at the bottom, which gives the loose, patient rhythm.

Two-column layouts split about half and half: the first screen (1.1 to 0.9), the note section and the contact area (0.8 to 1.2). Five columns hold the sources and the makers row; the moodboard is a gapless grid of four columns and two rows. Under 760px most grids become one column, makers and the moodboard go to two, the sources stack into five rows and the section padding falls to 72px with 16 to 20px gutters. At 960px the top menu folds into a round toggle that opens a full-screen maroon overlay with 40px links. The bar floats 14px in from the edges.

## Elevation & Depth

There are no shadows. Depth comes from stacked colour fields: a maroon note card on a butter slab, a near-black phone on a maroon panel, a gold outline lighting one block of the phone screen. Borders are 1.5px lines in the text colour for chips, fields, lists and FAQ rows.

## Shapes

Round ends are the identity. `--radius-1` is 999px for buttons, chips, the nav bars and the phone island. `--radius-2` is 28px for big panels like the first-screen note and the four tiles. Delivery mockups use 22px and the blocks on the phone screen 20px, form fields 18px, the phone 48px with a 38px screen. Portraits and the FAQ photo are arches: a 999px round top and a flat bottom. The source columns, the plan panels and the moodboard tiles are square. Lists use straight rules; the printed-card mockup has 6px corners and the text bubble one 6px tail corner. Small dots are circles.

## Components

- **button-primary:** a maroon pill, 52px tall, 28px side padding, 600 weight. On hover a curved fill of dark brown rises from below and flattens.
- **button-secondary:** the same pill in butter with maroon text. Its hover fill is gold and the text turns brown.
- **chip and chip-active:** 38px pills with a 1.5px border. The active chip is solid maroon with butter text in 600 weight.
- **input-field:** butter with a 1.5px brown border and an 18px radius. Focus shows a 3px maroon outline.
- **card-note:** the maroon note card with 28px corners that holds the weekly sentence.
- **phone-body:** a near-black body, 300px wide, with an 11px bezel, a pill island and a butter screen.

## Motion

The page loads GSAP 3.13 with ScrollTrigger and SplitText, plus Lenis for smooth scroll. The one motion idea is sorting: noise gathers into order as you scroll, and the next slab is always pulled in by what the last one was doing. Most scenes are scrubbed to the scroll position.

- **Navigation:** hides on scroll down, returns on scroll up. The mobile menu is a full-screen overlay.
- **First screen:** pinned for 300svh. Eighteen signal chips glide from a rotated scatter into a tidy list, three turn maroon, and the Monday note card grows from a dot.
- **Sources:** pinned. A small strip of five bars unfolds into five full columns, and the Messages column carries on into the next section.
- **Note:** the maroon panel sweeps in with the phone, and each of three text blocks lights its matching block on the phone with a gold outline.
- **Makers:** pinned. The row of portraits slides sideways and a wave of lift passes through the card in the middle.
- **Field notes:** pinned. The moodboard opens zoomed in on one tile and zooms out to the full grid.
- **Manifesto:** four lines slide in from alternating sides, and a bar strikes through the first three.
- **Pricing:** the two plans rise from below and square off.
- **Headings and tiles:** the note, makers, surfaces and FAQ headings rise word by word out of a mask (power3.out, about 0.95s); the four delivery tiles and the FAQ photo open from a small round clip (power3.inOut, 1.15s). On load the first-screen heading, lead and buttons rise and the chips and note card fade in.
- **Contact:** the two halves of the large email address slide in from opposite edges.
- **Footer:** the six strokes of the wordmark bob in a looping wave, paused while off screen.

Buttons and FAQ rows share one hover: a curved fill rises in 0.5s on a (0.2, 0.7, 0.2, 1) curve. With `prefers-reduced-motion` set to reduce, the entrance and scroll animations, the pinning, the footer wave and Lenis smooth scrolling are all switched off and the page reads in full.

## Do's and Don'ts

- Do keep the shape split: pills and arches for controls and portraits, 28px corners for cards, square edges for the full-width columns, plans and moodboard tiles. Don't add small sharp-cornered cards or round the slabs.
- Do change slab colours between sections, using only the six palette colours. Don't add purple gradients, blue or a second accent.
- Do keep Gabarito for headlines at 800 and Rethink Sans for everything else. Don't add a display or script font.
- Do keep headlines in sentence case with tight tracking. Don't use uppercase tracked labels.
- Do show the product as HTML and CSS mockups. Don't drop in stock dashboard screenshots or icon sets.
- Do use flat colour and 1.5px rules for depth. Don't add drop shadows or glass blur.
- Don't layer extra parallax or looping effects on top of the scenes.
- Do keep body text at 4.5:1 contrast. Don't set small gold text on butter.
- Do keep the section ids, the five source columns, the eight moodboard tiles and the `--len` values in step with their text.
- Do keep the Design: 8B footer link unless the site owner asks to remove it.