Six landing pages that make an argument, not a mood board.
Each template walks the same conversion framework, hero, proof, problem, product, how, pricing, objections, call to action, and then changes the visual language for its audience. Responsive to 360px, light and dark, no build step.
Six templates
Click a card to open the real page in a new tab. Every preview below is a live iframe of that file.
Full-page preview → Copy framework notes →The framework
Eight sections in a fixed order. A template may omit one, but it has to say why, see the omitted column.
| # | Section | What it has to do | Common mistake | Used by |
|---|
Proof is mechanics, not logos
None of the six templates invent a customer count or a testimonial. The proof section shows something the reader can verify in a trial: a citation, an escrow flow, an engagement model.
Pricing stays visible
Five of six templates show a price. The agency template deliberately omits pricing because a fixed-scope studio sells the engagement, not a plan.
Objections before the final CTA
The last question is always the reason to leave. It is answered immediately before the repeating action, not buried under the pricing table.
Rebrand it in twelve values
Each template reads eight semantic colour tokens. Change the palette block in demo/landing.css; nothing else in the file knows what the brand is.
Palettes and measured contrast
Minimum of the four promised pairs, computed at load time in both modes.
One block per template
CSS/* demo/landing.css */
body[data-template="saas"] {
--lk-bg: #f6f7fb;
--lk-surface: #ffffff;
--lk-text: #101828;
--lk-muted: #5b6478;
--lk-accent: #4f46e5;
--lk-on-accent: #ffffff;
--lk-line: #dfe3ee;
--lk-tint: #eef0ff;
}
html[data-theme="dark"] body[data-template="saas"] {
/* the same eight roles, dark values */
}The palette values live in src/palettes.js as well, and a test reads this stylesheet to prove the two copies match.