Clarity — SaaS landing page
A calm, technology-blue product page with a working task demo. Open one HTML file, make it yours, and launch.
Interactive source, not a screenshot. Scroll inside the preview to explore the full page.
Loading preview…A clear first impression, ready to customize.
Clarity is a complete landing page for a fictional planning product. Use its structure for a SaaS product, an independent tool or an early product launch. The technology-blue palette, generous spacing and readable system type keep attention on your product’s main task.
The sample workspace works: visitors can complete tasks, switch views, see calculated progress and reset the demo. Navigation, FAQs and mobile controls are functional. There are no invented reviews, customer logos or performance claims to replace.
Everything in the download.
Five editable files. The preview uses the same source as the package.
index.htmlThe complete page
HTML, CSS and JavaScript in one file. Open it directly in a modern browser.
PROMPT.mdCustomization prompt
A ready-to-copy brief with inputs for your product, audience, facts and brand.
SKILL.mdReusable AI workflow
A Markdown workflow for adapting the template and checking the finished result.
README.mdQuick-start guide
File descriptions, customization steps, working interactions and clear boundaries.
LICENSEMIT license
Permission for personal and commercial use, with the required copyright notice.
Open it. Make it yours.
Download and open
Extract the ZIP and open
index.htmlin your browser. Nothing to install.Replace the sample story
Edit the name, copy, task content and CSS color tokens in any text editor. Or bring the HTML and included prompt to your AI coding assistant.
Check, then publish
Try the mobile menu, keyboard controls, tasks and links. Connect any services your product needs, then publish on your preferred static host.
Make it yours with AI
Bring the HTML file and these instructions to your preferred coding assistant. Replace the bracketed inputs with your product details.
AI customization is optional. Skill installation depends on your assistant; WOG Labs does not install it for you.
Before you start.
Do I need an AI subscription to use it?
No. The HTML file works on its own. The included prompt and skill are optional aids for customizing it in an AI coding assistant.
Does the download include the page shown in the preview?
Yes. The preview loads the same index.html that is included in the ZIP. It is real HTML, CSS and JavaScript, rather than a design image.
Can I use it for a commercial website?
Yes, under the MIT license. Keep the copyright and permission notice with copies or substantial portions of the template. The full license is included in the package.
Does it include a backend, account system or database?
No. Clarity is a fictional product. The sample task interactions run in browser memory and reset on reload. There is no authentication, email collection, payment, analytics or remote service.
Which browsers and themes does it support?
The template uses modern HTML, CSS and JavaScript, system fonts and inline SVG. It has a responsive light theme. Test your customized page in your target browsers; the surrounding WOG Labs detail page follows the site's light/dark setting.
How do I publish my customized version?
Open the file locally, replace the sample content, verify keyboard and mobile behavior, then upload the HTML to your chosen static hosting service. Hosting and service integrations are not included in this download.
Free to use. Yours to adapt.
The source, prompt and skill are released under the MIT license for personal and commercial projects. Retain the included copyright and permission notice when redistributing copies or substantial portions.
Download full MIT licenseVersion 1.0.0 · October 24, 2026
Initial release: responsive page, interactive task demo, mobile navigation, FAQ, prompt, skill and license.
A useful place to begin.
One HTML file. Your product, your next step.