Meadow
A calm, photographic SaaS theme with soft meadow colours, tabbed problem and process sections, expanding audience profiles, pricing, an About page gallery with a lightbox, and an optional journal.
One payment for Meadow and everything else - all 35 themes, every future release, and the Astro visual builder included.
See Meadow in action
Every page and section is part of the download. Use these as launch-day templates - keep the structure, swap the copy.
Meadow is a SaaS theme with a calm, photographic look. The demo is a resume and interview preparation product, and the same structure works for any consumer app or software product that wants to feel approachable. 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. Below it, 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 horizontal portrait rail, six features run along a single vertical line, and the page closes with principles, a free and a paid plan, an FAQ, the journal and a soft green call to action. The About page adds a story, principles and a gallery slider with a lightbox. The palette is warm paper, charcoal and field green with sage and butter accents, set in Manrope. Motion uses GSAP ScrollTrigger and Lenis smooth scrolling on desktop, with a fade between pages, and each part can be switched off; reduced-motion settings always win. The styles are plain CSS with the colours set in site.ts, with no CSS framework. Every visible string, image, crop position, price, form setting and journal article lives in src/config/site.ts. Languages can be added with one registration, including right-to-left scripts, and the theme ships a script that checks translated routes with French and Arabic test fixtures. Nine original images, and included AGENTS.md and CLAUDE.md files, make it straightforward to adapt.
Best Fit For
- Consumer SaaS and productivity apps
- Career, education and coaching products
- Early-stage products that want a warm, calm brand
- Founders who want motion without a heavy framework
Full Page Set
Every page is real and editable - no placeholders, no "coming soon" stubs.
13 Sections Included
Every section is a ready-to-use Astro component. Add it to any page, customize via config, or remove what you don't need.
What's Included
Photography carries the page
A wide meadow photograph rises from the lower half of the first screen, and the problem section swaps its own photographs with each tab. The interface panels stay small and explain one thing at a time.
Sections that respond
Problem and process sections are real tabs you can use with the keyboard, the process steps change a sample resume workspace, audience profiles expand in a portrait rail, and the About gallery opens in a lightbox.
Motion you control
GSAP ScrollTrigger, Lenis smooth scrolling and page fades are tuned in one motion block. Turn smooth scrolling off, turn all motion off, and reduced-motion settings always take priority.
Everything in one file
Copy, images and their crop positions, prices, colours, form settings and the journal articles themselves live in site.ts, so adding an article or changing a price is a text edit.
Tech Stack
Config-Driven Setup
Meadow keeps the copy, images and their crops, palette, motion settings, prices, form settings, legal text, and every journal article insrc/config/site.ts. Project and article prose stays in Markdown content collections.
// src/config/site.ts
export const siteConfig = {
content: { overrides: { blog: { "build-an-evidence-library": { data: {...}, body: "..." } } } },
meadow: { hero: {...}, problem: {...}, process: {...}, audience: {...}, pricing: {...} },
identity: { name: "MEADOW", logo: { src: "", ... }, ... },
appearance: { ink: "#252722", paper: "#faf9f0", accent: "#445642", sage: "#85967c", ... },
motion: { enabled: true, smoothScroll: true, parallax: 16, ... },
about: { gallery: { items: [...] }, ... },
journal: { enabled: true, pagination: {...} },
contact: { form: { provider: "demo", ... } },
} as const;Built to be edited by AI
Meadow ships an AGENTS.md and
a CLAUDE.md at the project root.
Claude Code, Cursor, Copilot, and Codex read them the moment you open the folder.
So your agent starts knowing which file to edit, which design decisions are deliberate, and which parts of the theme break quietly if touched. You get the right change on the first pass instead of a confident guess.
- A task map. Every common request routed to the exact file, so no time is spent exploring.
- Design invariants. The decisions that make the theme worth buying, marked do-not-touch.
- The traps. The specific things that break this theme silently, written down.
- A done checklist. What to build, what to scroll, what to verify before claiming success.
# MEADOW agent guide
- src/config/site.ts owns all public copy, links, labels,
images/crops, branding, palette, motion, pricing, form
settings and legal content.
- Use getSiteConfig(Astro.url) in components; importing raw
siteConfig bypasses localization.
- content.overrides.blog is the complete article manifest:
add or remove a slug in site.ts only.
- Mount scripts on astro:page-load and release listeners,
timelines and Lenis on astro:before-swap.
- Keep keyboard tabs, native FAQ disclosures, reduced motion,
dialog focus return/Escape and the AeroLaunch credit.
Run npm run check, npm test and npm run build after changes.Excerpt. The full file ships with the theme.
Full documentation, ready before you buy
Browse the install guide, the site.ts reference, provider setup, deploy instructions, and the Meadow-specific page - all live now.
More themes from the collection.
Tally
SaaS / Startup
Falcon
Agency / Portfolio / Blog
August
Personal / Portfolio / SaaS
Slab
SaaS / Startup
Or get every theme - these included - with the All-Access Pass.