SaaS landing page template.
A complete website for a SaaS product: eight responsive pages for a sample team planning tool called Fjordly, from the home page and pricing to a customer story, changelog, blog post, sign-up, and contact sales. The copy reads like a real product, the prices and numbers match across pages, and every page is plain HTML with Tailwind, so Codex or Claude Code can clone it and turn it into your site.
Updated November 7, 2026
Website · 8 pages · Free and open source
01Home 
02Features 
03Pricing 
04Customers 
05Changelog 
06Blog post 
07Sign up 
08Contact sales
Clone it
npx degit ummydev/ui-templates/sites/saas my-app
Copies just this template into a new folder, without the rest of the repository.
Make it yours
This is the SaaS landing page template from codexdesign.io. Rename it to [your product], replace the sample data with [your features], and keep every screen on the design system in DESIGN.md.
Paste this into Codex or Claude Code in the new folder.
Design system
NordicWebMuted blues, soft greys and quiet confidence for productivity tools.Headings in Manrope- Built with
- HTML · Tailwind CSS v4 · Lucide icons
What’s in the template
| Page | What’s on it |
|---|---|
| Home | A one-line promise, a product screen drawn in HTML, key features, customers, and pricing |
| Features | Five sections (plan, do, schedule, report, stay in touch), each with a product screen |
| Pricing | Free, Team, and Enterprise, a monthly and yearly toggle, a comparison table, and questions |
| Customers | A full customer story with before and after numbers, plus more stories |
| Changelog | Dated releases tagged New, Improved, and Fixed |
| Blog post | An article with an author, a table of contents, lists, a quote, code, and related posts |
| Sign up | Google or email sign-up next to what you get and a testimonial |
| Contact sales | A demo request form with team size and needs, and questions to read before booking |
The content matches across pages. Pricing is free for up to 10 people, $8 per person a month on the Team plan billed yearly or $10 monthly, and custom for Enterprise. The customer on the home page and in the customer story is the same freight company: its Monday meeting went from 90 to 25 minutes and its weekly report from 3 hours to 20 minutes. The latest changelog entry is the feature the home page marks as new. Customer names are made up, and there are no placeholder people or lorem ipsum.
Each page is one HTML file, styled with Tailwind CSS v4 and a shared tokens.css. Every page works from a 390-pixel phone to a wide desktop screen, and the phone menu needs no JavaScript. The product screens are drawn in HTML rather than pasted in as images, so your agent can restyle them with the rest of the site. Open any file in a browser; there is nothing to install or build.
Use it with Codex or Claude Code
Copy just this template from the ui-templates repository:
npx degit ummydev/ui-templates/sites/saas my-saas-site
Then ask your agent to make it yours:
This folder is a SaaS website template. Turn it into the site for [your product], which [what it does] for [who it's for]. Keep DESIGN.md and tokens.css as the design system, replace the product screens, features, pricing, customer story and changelog with [your content], and keep prices and numbers consistent across pages. Then build it in [Next.js / Astro / your stack].
Because the design system is written down in DESIGN.md, new pages your agent adds, such as docs, an about page, or a comparison page, will match the eight that are already there.
Built on the Nordic design system
The template uses Nordic, a calm design system for productivity tools: Manrope, a muted fjord blue, 12px corners, and soft shadows. Its page has a live preview, the full DESIGN.md, and a shadcn theme.
Frequently asked questions
Is this SaaS landing page template free?
Yes. It’s open source under the MIT license, for personal and commercial projects.
Can I use it with Next.js, Astro, or React?
Yes. The pages are plain HTML with Tailwind classes, so your agent can move them into components in any framework. Ask it to keep tokens.css and DESIGN.md as they are, so the design survives the move.
Is there a dark theme?
Yes. Add class="dark" to the <html> tag of any page to switch it to Nordic’s dark theme.