saas landing-page minimal typography monochrome minimal
SaaS Landing Minimal
Ultra-clean monochrome landing page with typography-first design, maximum whitespace, and zero visual noise.
minimal Responsive
Live Preview
Sections
navbarherofeaturessocial-proofpricingctafooter
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cleartype — Writing, distilled</title>
<meta name="description" content="A minimal notes app that gets out of your way. No folders, no tags, no friction. Just you and your words.">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');
body { font-family: 'Inter', system-ui, sans-serif; }
/* ── Brand tokens ────────────────────────────────────────── */
:root {
--ws-color-surface: #ffffff;
--ws-color-surface-alt: #f8fafc;
--ws-color-surface-muted: #f1f5f9;
--ws-color-text: #0f172a;
--ws-color-text-soft: #334155;
--ws-color-text-muted: #64748b;
--ws-color-text-faint: #94a3b8;
--ws-color-border: #e2e8f0;
--ws-color-primary: #4f46e5;
--ws-color-primary-hover: #4338ca;
--ws-color-primary-soft: rgba(79,70,229,0.08);
--ws-color-primary-text: #ffffff;
}
/* ── Snippet: interactions/underline-draw ────────────────── */
.underline-draw {
--underline-color: currentColor;
--underline-speed: 0.25s;
display: inline;
padding-bottom: 0.0625rem;
background: linear-gradient(to right, var(--underline-color) 0%, var(--underline-color) 98%);
background-size: 0 1px;
background-repeat: no-repeat;
background-position: left 98%;
transition: background-size var(--underline-speed) ease;
text-decoration: none;
}
.underline-draw:hover,
.underline-draw:focus-visible {
background-size: 100% 1px;
}
@media (prefers-reduced-motion: reduce) {
.underline-draw { transition: none; }
}
</style>
</head>
<body class="bg-white text-slate-900 antialiased">
<!-- Navbar -->
<nav class="ws-navbar max-w-3xl mx-auto px-6 py-8 flex items-center justify-between" aria-label="Main navigation">
<a href="#" class="text-base font-medium tracking-tight">Cleartype</a>
<div class="flex items-center gap-8">
<a href="#features" class="text-sm text-slate-500 hover:text-slate-900 transition-colors">Features</a>
<a href="#pricing" class="text-sm text-slate-500 hover:text-slate-900 transition-colors">Pricing</a>
<a href="#start" class="text-sm font-medium">Sign in</a>
</div>
</nav>
<!-- Hero -->
<header class="ws-hero max-w-3xl mx-auto px-6 pt-24 pb-32 sm:pt-36 sm:pb-44">
<h1 class="text-4xl sm:text-5xl md:text-6xl font-medium tracking-tight leading-[1.1]">
Writing,<br>distilled.
</h1>
<p class="mt-8 text-lg sm:text-xl text-slate-500 max-w-md leading-relaxed">
A notes app that gets out of your way. No folders, no tags, no friction. Just you and your words.
</p>
<div class="mt-12 flex items-center gap-6">
<a href="#start" class="underline-draw text-sm font-medium text-slate-900 hover:text-slate-600 transition-colors">
Start writing free
</a>
<span class="text-sm text-slate-400">No credit card</span>
</div>
</header>
<hr class="max-w-3xl mx-auto border-slate-100">
<!-- Features -->
<section id="features" class="ws-features max-w-3xl mx-auto px-6 py-28 sm:py-36" aria-labelledby="features-heading">
<h2 id="features-heading" class="text-2xl sm:text-3xl font-medium tracking-tight">Less is everything.</h2>
<p class="mt-4 text-slate-500 max-w-md">We removed every feature that slowed you down, then removed a few more.</p>
<dl class="mt-16 space-y-12">
<div>
<dt class="text-base font-medium">Instant capture</dt>
<dd class="mt-2 text-slate-500 leading-relaxed max-w-lg">
Open the app and start typing. No templates, no prompts, no decisions. Your cursor is already blinking.
</dd>
</div>
<div>
<dt class="text-base font-medium">Flat structure</dt>
<dd class="mt-2 text-slate-500 leading-relaxed max-w-lg">
Every note lives at the same level. Search finds anything in milliseconds. Hierarchy is overhead you don't need.
</dd>
</div>
<div>
<dt class="text-base font-medium">Offline always</dt>
<dd class="mt-2 text-slate-500 leading-relaxed max-w-lg">
Your notes live on your device first, cloud second. Write on a plane, in a tunnel, anywhere thoughts happen.
</dd>
</div>
<div>
<dt class="text-base font-medium">Plain text, forever</dt>
<dd class="mt-2 text-slate-500 leading-relaxed max-w-lg">
Markdown in, Markdown out. No proprietary format. Export everything in one click. Your words belong to you.
</dd>
</div>
<div>
<dt class="text-base font-medium">Fast, then faster</dt>
<dd class="mt-2 text-slate-500 leading-relaxed max-w-lg">
Under 50ms to open. Under 10ms to search 10,000 notes. We measure in milliseconds because you think in them.
</dd>
</div>
</dl>
</section>
<hr class="max-w-3xl mx-auto border-slate-100">
<!-- Social Proof -->
<section class="ws-testimonials max-w-3xl mx-auto px-6 py-28 sm:py-36" aria-labelledby="proof-heading">
<h2 id="proof-heading" class="sr-only">What people say</h2>
<figure>
<blockquote class="text-xl sm:text-2xl font-medium leading-relaxed tracking-tight">
"I've tried every notes app. Cleartype is the first one that feels like it isn't there. I just write."
</blockquote>
<figcaption class="mt-6 text-sm text-slate-500">
Ana Kowalski, Staff Engineer at Vercel
</figcaption>
</figure>
<figure class="mt-20">
<blockquote class="text-xl sm:text-2xl font-medium leading-relaxed tracking-tight">
"Most tools add complexity. Cleartype removes it. My writing output doubled in the first week."
</blockquote>
<figcaption class="mt-6 text-sm text-slate-500">
James Odera, Author of <cite>Thinking in Systems</cite>
</figcaption>
</figure>
<p class="mt-20 text-sm text-slate-400">
Trusted by writers, engineers, and founders at Linear, Raycast, Resend, and Supabase.
</p>
</section>
<hr class="max-w-3xl mx-auto border-slate-100">
<!-- Pricing -->
<section id="pricing" class="ws-pricing max-w-3xl mx-auto px-6 py-28 sm:py-36" aria-labelledby="pricing-heading">
<h2 id="pricing-heading" class="text-2xl sm:text-3xl font-medium tracking-tight">One plan. No surprises.</h2>
<p class="mt-4 text-slate-500 max-w-md">Free to start. Pay when you need sync across devices.</p>
<div class="mt-16 grid sm:grid-cols-2 gap-16">
<div>
<p class="text-sm text-slate-400 uppercase tracking-wider">Free</p>
<p class="mt-3 text-4xl font-medium tracking-tight">$0</p>
<p class="mt-1 text-sm text-slate-500">forever</p>
<ul class="mt-8 space-y-3 text-sm text-slate-600" role="list">
<li>Unlimited notes</li>
<li>Full-text search</li>
<li>Markdown export</li>
<li>Single device</li>
</ul>
</div>
<div>
<p class="text-sm text-slate-400 uppercase tracking-wider">Pro</p>
<p class="mt-3 text-4xl font-medium tracking-tight">$8<span class="text-lg text-slate-400 font-normal">/mo</span></p>
<p class="mt-1 text-sm text-slate-500">billed yearly, or $10 monthly</p>
<ul class="mt-8 space-y-3 text-sm text-slate-600" role="list">
<li>Everything in Free</li>
<li>Cross-device sync</li>
<li>End-to-end encryption</li>
<li>API access</li>
<li>Priority support</li>
</ul>
</div>
</div>
</section>
<hr class="max-w-3xl mx-auto border-slate-100">
<!-- CTA -->
<section id="start" class="ws-cta max-w-3xl mx-auto px-6 py-28 sm:py-36 text-center" aria-labelledby="cta-heading">
<h2 id="cta-heading" class="text-3xl sm:text-4xl font-medium tracking-tight">Start writing today.</h2>
<p class="mt-4 text-slate-500">Free forever. No credit card required.</p>
<div class="mt-10">
<a href="#" class="underline-draw inline-block text-sm font-medium text-slate-900 hover:text-slate-600 transition-colors">
Create your account
</a>
</div>
</section>
<!-- Footer -->
<footer class="ws-footer max-w-3xl mx-auto px-6 py-12 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-slate-400">
<p>© 2026 Cleartype</p>
<nav class="flex gap-6" aria-label="Footer navigation">
<a href="#" class="hover:text-slate-600 transition-colors">Privacy</a>
<a href="#" class="hover:text-slate-600 transition-colors">Terms</a>
<a href="#" class="hover:text-slate-600 transition-colors">Twitter</a>
<a href="#" class="hover:text-slate-600 transition-colors">GitHub</a>
</nav>
</footer>
</body>
</html>Intentionally restrained SaaS landing page. Typography-focused, monochrome, with maximum whitespace. Lets the product speak for itself.