Meadow

Live preview ->

Meadow is a complete website for a SaaS or consumer product that wants to feel calm and approachable. The demo is a resume and interview preparation app, and the same structure works for any product that explains a problem, a process and a price. A floating white capsule holds the navigation above a centred two-line headline, and a wide photograph of a person working in a meadow rises from the lower half of the first screen.

Three tabs swap a photograph and a short card to explain common problems, and three process steps change a sample resume workspace as you move between them. Audience profiles expand in a portrait rail, six features run along a single vertical line, and a free and a paid plan, an FAQ, the journal and a soft green call to action close the page. The About page adds a story, principles and a gallery with a lightbox.

Property	Value
Tier	Pro ($59)
Category	SaaS / Consumer Product
Font	Manrope Variable (self-hosted)
Palette	Charcoal (#252722) and field green (#445642) on warm paper (#faf9f0), with sage and butter accents
Motion	GSAP ScrollTrigger, Lenis smooth scrolling on desktop, page fades
Styles	Plain CSS with colours from site.ts, no CSS framework
Collections	blog, defined entirely in site.ts
Configuration	Everything visible lives in src/config/site.ts

Included routes

• / - homepage with hero, problem tabs, process, audience, features, trust, pricing, FAQ, journal preview, and closing call to action
• /about/ - story, gallery with lightbox, principles, and closing call to action
• /blog/, /blog/page/[n]/, and /blog/[slug]/ - paginated journal and three generated articles
• /contact/
• /privacy/, /terms/, /404.html
• Generated sitemap output

The production build generates 11 static pages, including the custom 404.

What makes Meadow different

• Photography carries the page - the hero photograph rises from the lower half of the first screen, and the problem section swaps its own photographs with each tab.
• Sections that respond - the problem and process sections are real tabs you can use with the arrow keys, audience profiles expand, and the About gallery opens in a lightbox that closes with Escape.
• Motion you control - GSAP, Lenis and the page fades are tuned in one motion block, each can be switched off, and reduced-motion settings always win.
• Articles in the config - the journal’s articles, including their Markdown, live in site.ts, so adding an article is one entry in one file.
• Pricing that hands over - each plan’s button opens the contact form with that plan already selected.

Meadow-specific setup

Change the identity, logo and palette

Start in src/config/site.ts. identity holds the name, legal name, URL, theme colour, favicon and logo. Leave identity.logo.src empty to keep the included sprout mark, or point it at your own file (with an optional lightSrc for dark footers). appearance holds the font family and the semantic colours:

appearance: {
  fontFamily: '"Manrope Variable", sans-serif',
  ink: "#252722",
  muted: "#6e7168",
  paper: "#faf9f0",
  soft: "#eef0eb",
  accent: "#445642",
  sage: "#85967c",
  butter: "#f3f1d5",
  // ...section surfaces, text and footer colours
},

appearance.fontFamily can use Manrope or a system stack. Load another font before using its family name.

Tune or switch off the motion

motion: {
  enabled: true,
  smoothScroll: true,
  pageTransitionDuration: 260,
  duration: 640,
  distance: 28,
  stagger: 90,
  parallax: 16,
  heroParallax: 10,
  scrub: 0.7,
  smoothDuration: 1.05,
},

Set smoothScroll: false for native scrolling, or enabled: false to turn the enhanced motion off. Visitors who prefer reduced motion get a still page either way.

Edit the homepage

The homepage content lives under meadow in site.ts: hero, problem, process, audience, features, trust and pricing, plus the top-level faq, journal and homeCta blocks. Each owns its headings, copy, images, crop positions, alt text and links. Every image has its own objectPosition, and the hero has separate crops for short and mobile screens.

Edit the About page and gallery

about holds the hero, story, principles and closing call to action. about.gallery.items drives both the slider and the lightbox: add, remove or reorder items there, each with a title, caption, literal alt text and crop. transitionDuration and zoomScale tune the gallery’s movement.

Add or edit journal articles

content.overrides.blog is the complete list of articles. Each key is the article’s URL slug, and each entry holds its data (title, description, date, image, alt, crop, category, draft) and its Markdown body:

content: {
  overrides: {
    blog: {
      "build-an-evidence-library": {
        data: { title: "...", date: "2026-09-12", draft: false, ... },
        body: "## Start with outcomes\n\nStandard Markdown works here.",
      },
    },
  },
},

draft: true removes an article from routes and lists. The Markdown files in src/content/blog/ are kept as reference backups only; the site does not read them.

Set up the journal

The journal is on by default with two articles per page, so the three included posts demonstrate /blog/ and /blog/page/2/. Change journal.pagination.pageSize and journal.homePostCount in site.ts, or set journal.enabled to false to remove the journal’s routes, homepage preview and the navigation links marked requiresJournal.

Connect the contact form

Meadow starts in safe demo mode and sends no data. siteConfig.contact.form.provider accepts:

• formspree
• formsubmit
• netlify
• custom
• demo

Add the matching ID, email or endpoint in the same block. Demo mode and incomplete settings make no request and say so clearly on the page. The pricing buttons link to the form with ?service= and the plan name, so keep each plan’s name the same words as its option in the form. Test delivery on your own deployment with an inbox you control.

Localization

Meadow is i18n-ready, including right-to-left languages. English stays the complete source in src/config/site.ts; copy src/i18n/locales/template.ts, translate the fields you need, and register the language in src/i18n/config.ts with its label, htmlLang, ogLocale and direction (ltr or rtl). Untranslated fields fall back to English, arrays are replaced as a whole, and each article is translated under the same slug in that language’s content.overrides.blog. The language menu appears automatically once more than one language is registered.

npm run test:i18n builds a throwaway copy with French and Arabic fixtures and checks translated routes, text direction, dates, links, journal settings and hreflang, without touching your own configuration.

Step by step, with the checklist: Add a language.

Agent-ready

The theme ships an AGENTS.md at its root, plus a CLAUDE.md that points at it. Claude Code, Cursor, Copilot and Codex read these on open, so an agent starts with the edit map: what site.ts owns, where each page’s component lives, how articles are defined, how scripts mount and clean up across page transitions, and the accessibility behaviour that must be kept.