saas workspace collaboration team canvas warm minimal dark-footer modern
SaaS Workspace Landing
Warm-neutral team workspace landing page with canvas product mock, feature grid, integrations, and dark footer.
modern Responsive
Live Preview
Sections
navbarherocanvas-mockfeaturesintegrationstestimonialpricingctafooter
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>Fold — A connected workspace for teams</title>
<meta name="description" content="Fold connects your notes, docs, and ideas into one living canvas. Think together, build faster.">
<script src="https://cdn.tailwindcss.com"></script>
<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:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;1,14..32,300&display=swap');
*, *::before, *::after { box-sizing: border-box; }
body {
font-family: 'Inter', system-ui, sans-serif;
background-color: #F7F6F2;
color: #1A1A18;
-webkit-font-smoothing: antialiased;
}
/* Underline draw effect for links */
.link-draw {
display: inline;
background: linear-gradient(currentColor, currentColor) no-repeat left bottom;
background-size: 0 1px;
transition: background-size 0.22s ease;
text-decoration: none;
}
.link-draw:hover { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) { .link-draw { transition: none; } }
/* Feature card hover */
.feature-card {
transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.feature-card:hover {
background-color: #EFEDE7;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
/* Mock canvas visual */
.canvas-mock {
background: #EFEDE7;
border-radius: 16px;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(0,0,0,0.06),
0 24px 64px rgba(0,0,0,0.08),
0 4px 12px rgba(0,0,0,0.04);
}
/* Toolbar mock */
.toolbar-dot { width: 10px; height: 10px; border-radius: 50%; }
/* Subtle grid pattern */
.canvas-grid {
background-image:
linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
background-size: 24px 24px;
}
/* Card mock */
.card-mock {
background: white;
border-radius: 10px;
border: 1px solid rgba(0,0,0,0.07);
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
/* Connection line */
.connector {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.12), transparent);
}
/* Integration badge */
.integration-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: white;
border-radius: 100px;
border: 1px solid rgba(0,0,0,0.08);
font-size: 13px;
color: #444;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
/* Dark footer */
.footer-dark {
background-color: #1A1A18;
color: rgba(255,255,255,0.55);
}
.footer-dark a { color: rgba(255,255,255,0.55); }
.footer-dark a:hover { color: rgba(255,255,255,0.85); }
</style>
</head>
<body>
<!-- ── Navbar ───────────────────────────────────────────────────────────── -->
<nav class="max-w-5xl mx-auto px-6 py-5 flex items-center justify-between" aria-label="Main navigation">
<div class="flex items-center gap-10">
<a href="#" class="text-base font-medium tracking-tight" aria-label="Fold homepage">
Fold
</a>
<div class="hidden sm:flex items-center gap-6 text-sm" style="color:#666">
<a href="#product" class="link-draw hover:text-[#1A1A18] transition-colors">Product</a>
<a href="#integrations" class="link-draw hover:text-[#1A1A18] transition-colors">Integrations</a>
<a href="#pricing" class="link-draw hover:text-[#1A1A18] transition-colors">Pricing</a>
</div>
</div>
<div class="flex items-center gap-4 text-sm">
<a href="#" class="link-draw hidden sm:inline" style="color:#666">Log in</a>
<a
href="#"
class="px-4 py-2 rounded-full font-medium text-white transition-opacity hover:opacity-80"
style="background:#1A1A18; font-size:13px"
>Get started free</a>
</div>
</nav>
<!-- ── Hero ─────────────────────────────────────────────────────────────── -->
<header id="product" class="max-w-5xl mx-auto px-6 pt-16 pb-8 sm:pt-24 sm:pb-12">
<!-- Label -->
<div class="inline-flex items-center gap-2 mb-8 text-xs font-medium tracking-widest uppercase" style="color:#888">
<span style="display:inline-block;width:20px;height:1px;background:#bbb;"></span>
Connected workspace
</div>
<!-- Headline -->
<h1 class="text-4xl sm:text-5xl md:text-6xl font-light tracking-tight leading-[1.08]" style="max-width:640px">
Where your team's ideas<br>
<em class="not-italic font-medium">finally connect.</em>
</h1>
<!-- Sub -->
<p class="mt-6 text-base sm:text-lg leading-relaxed" style="color:#666; max-width:440px">
Fold is a living canvas that links your notes, docs, and decisions. Stop losing context between tools.
</p>
<!-- CTAs -->
<div class="mt-10 flex flex-wrap items-center gap-6">
<a
href="#"
class="px-6 py-3 rounded-full font-medium text-white text-sm transition-opacity hover:opacity-80"
style="background:#1A1A18"
>Start for free</a>
<a href="#" class="link-draw text-sm" style="color:#666">Book a demo →</a>
</div>
<!-- Social proof line -->
<p class="mt-8 text-xs" style="color:#aaa">
Trusted by teams at Linear, Vercel, Raycast, and Loom
</p>
</header>
<!-- ── Canvas Mock ───────────────────────────────────────────────────────── -->
<div class="max-w-5xl mx-auto px-6 pb-16 sm:pb-24">
<div class="canvas-mock" style="height: 420px; position: relative">
<!-- Toolbar mock -->
<div class="flex items-center gap-2 px-4 py-3" style="border-bottom: 1px solid rgba(0,0,0,0.06); background:white">
<div class="toolbar-dot" style="background:#E06C75"></div>
<div class="toolbar-dot" style="background:#E5C07B"></div>
<div class="toolbar-dot" style="background:#98C379"></div>
<div style="flex:1"></div>
<div style="font-size:12px; color:#aaa; font-family: monospace">Q4 Planning · Fold</div>
<div style="flex:1"></div>
<!-- Avatars -->
<div class="flex -space-x-1.5">
<div style="width:22px;height:22px;border-radius:50%;background:#D4C5F9;border:1.5px solid white;font-size:9px;display:flex;align-items:center;justify-content:center;color:#6650a4;font-weight:600">A</div>
<div style="width:22px;height:22px;border-radius:50%;background:#FFDDB3;border:1.5px solid white;font-size:9px;display:flex;align-items:center;justify-content:center;color:#8a5000;font-weight:600">J</div>
<div style="width:22px;height:22px;border-radius:50%;background:#B3E0C3;border:1.5px solid white;font-size:9px;display:flex;align-items:center;justify-content:center;color:#1a6636;font-weight:600">M</div>
</div>
</div>
<!-- Canvas area -->
<div class="canvas-grid" style="position:absolute;inset:48px 0 0 0; padding:32px">
<!-- Card 1: Goals doc -->
<div class="card-mock" style="position:absolute;top:32px;left:32px;width:200px;padding:14px">
<div style="font-size:10px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px">Goals</div>
<div style="font-size:12px;color:#333;line-height:1.6">
<div>☑ Define north star</div>
<div>☑ Align on timeline</div>
<div style="opacity:.4">☐ Ship v2 beta</div>
</div>
</div>
<!-- Card 2: Research note -->
<div class="card-mock" style="position:absolute;top:28px;left:268px;width:220px;padding:14px">
<div style="font-size:10px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px">User Research</div>
<div style="font-size:11px;color:#555;line-height:1.7">
"Context switching is the #1 blocker…"
</div>
<div style="margin-top:8px;font-size:10px;color:#aaa">5 interviews · 3 themes</div>
</div>
<!-- Connection line -->
<div style="position:absolute;top:72px;left:232px;width:36px" class="connector"></div>
<!-- Card 3: Decisions -->
<div class="card-mock" style="position:absolute;top:152px;left:48px;width:240px;padding:14px">
<div style="font-size:10px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px">Decision Log</div>
<div style="font-size:11px;color:#444;line-height:1.7;display:flex;flex-direction:column;gap:4px">
<div style="display:flex;align-items:center;gap:6px">
<span style="width:5px;height:5px;background:#98C379;border-radius:50%;flex-shrink:0"></span>
Use canvas-first approach
</div>
<div style="display:flex;align-items:center;gap:6px">
<span style="width:5px;height:5px;background:#E5C07B;border-radius:50%;flex-shrink:0"></span>
Defer AI features to Q1
</div>
</div>
</div>
<!-- Card 4: Linked blocks indicator -->
<div class="card-mock" style="position:absolute;top:156px;left:328px;width:160px;padding:14px">
<div style="font-size:10px;color:#aaa;margin-bottom:6px">Linked from</div>
<div style="font-size:11px;color:#555">→ Goals · Research<br>→ Sprint 11</div>
</div>
<!-- Floating cursor mock (collaborative) -->
<div style="position:absolute;top:110px;left:300px;display:flex;align-items:flex-start;gap:4px;pointer-events:none">
<svg width="10" height="14" viewBox="0 0 10 14" fill="none" style="flex-shrink:0">
<path d="M0 0L10 8H5.5L7 14L4 13L2.5 7H0V0Z" fill="#D4C5F9"/>
</svg>
<span style="background:#D4C5F9;color:#6650a4;font-size:9px;padding:2px 6px;border-radius:4px;white-space:nowrap;font-weight:600">Anna</span>
</div>
</div>
</div>
</div>
<!-- ── Features ──────────────────────────────────────────────────────────── -->
<section class="max-w-5xl mx-auto px-6 py-16 sm:py-24" aria-labelledby="features-heading">
<div style="max-width:480px; margin-bottom:48px">
<h2 id="features-heading" class="text-2xl sm:text-3xl font-medium tracking-tight leading-snug">
Fluid thinking,<br>structured enough to act on.
</h2>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
<!-- Feature 1 -->
<div class="feature-card rounded-2xl p-6" style="background:rgba(0,0,0,0.03)">
<div class="text-xl mb-4">✦</div>
<h3 class="text-sm font-medium mb-2">Fluid writing</h3>
<p class="text-sm leading-relaxed" style="color:#666">
Write naturally. Fold structures your thoughts without interrupting them.
</p>
</div>
<!-- Feature 2 -->
<div class="feature-card rounded-2xl p-6" style="background:rgba(0,0,0,0.03)">
<div class="text-xl mb-4">⟁</div>
<h3 class="text-sm font-medium mb-2">Smart connections</h3>
<p class="text-sm leading-relaxed" style="color:#666">
Link any block to any doc. Backlinks surface context you'd otherwise forget.
</p>
</div>
<!-- Feature 3 -->
<div class="feature-card rounded-2xl p-6" style="background:rgba(0,0,0,0.03)">
<div class="text-xl mb-4">⊞</div>
<h3 class="text-sm font-medium mb-2">Multi-user canvas</h3>
<p class="text-sm leading-relaxed" style="color:#666">
See where your team is working in real time. No merge conflicts, ever.
</p>
</div>
<!-- Feature 4 -->
<div class="feature-card rounded-2xl p-6" style="background:rgba(0,0,0,0.03)">
<div class="text-xl mb-4">◎</div>
<h3 class="text-sm font-medium mb-2">Decision log</h3>
<p class="text-sm leading-relaxed" style="color:#666">
Capture the why behind every decision. New team members catch up in minutes.
</p>
</div>
<!-- Feature 5 -->
<div class="feature-card rounded-2xl p-6" style="background:rgba(0,0,0,0.03)">
<div class="text-xl mb-4">⌘</div>
<h3 class="text-sm font-medium mb-2">Keyboard-first</h3>
<p class="text-sm leading-relaxed" style="color:#666">
Every action reachable with a keystroke. Power users work at thought speed.
</p>
</div>
<!-- Feature 6 -->
<div class="feature-card rounded-2xl p-6" style="background:rgba(0,0,0,0.03)">
<div class="text-xl mb-4">⬡</div>
<h3 class="text-sm font-medium mb-2">No vendor lock-in</h3>
<p class="text-sm leading-relaxed" style="color:#666">
Export everything as Markdown or JSON. Your knowledge stays yours.
</p>
</div>
</div>
</section>
<!-- ── Integrations ──────────────────────────────────────────────────────── -->
<section id="integrations" class="max-w-5xl mx-auto px-6 py-16 sm:py-24" aria-labelledby="integrations-heading">
<p id="integrations-heading" class="text-sm mb-8" style="color:#888">Works with your existing stack</p>
<div class="flex flex-wrap gap-3">
<div class="integration-badge">
<span style="font-size:15px">𝗦</span> Slack
</div>
<div class="integration-badge">
<span style="font-size:15px">▽</span> Linear
</div>
<div class="integration-badge">
<span style="font-size:15px">◈</span> Figma
</div>
<div class="integration-badge">
<span style="font-size:15px">◉</span> GitHub
</div>
<div class="integration-badge">
<span style="font-size:15px">⬡</span> Notion
</div>
<div class="integration-badge">
<span style="font-size:15px">◻</span> Google Drive
</div>
<div class="integration-badge" style="background:transparent;border-style:dashed;color:#aaa;font-size:12px">
+ 40 more
</div>
</div>
</section>
<!-- Divider -->
<div class="max-w-5xl mx-auto px-6">
<hr style="border:none;border-top:1px solid rgba(0,0,0,0.07)">
</div>
<!-- ── Quote ─────────────────────────────────────────────────────────────── -->
<section class="max-w-5xl mx-auto px-6 py-20 sm:py-32" aria-labelledby="quote-heading">
<h2 id="quote-heading" class="sr-only">What our users say</h2>
<figure class="max-w-xl">
<blockquote class="text-xl sm:text-2xl font-light leading-relaxed tracking-tight" style="color:#1A1A18">
"Fold is the first tool where my team's thinking actually accumulates instead of getting lost. We made a decision last quarter — I can still find the reasoning in 30 seconds."
</blockquote>
<figcaption class="mt-6 flex items-center gap-3">
<div style="width:32px;height:32px;border-radius:50%;background:#D4C5F9;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#6650a4">SC</div>
<div>
<div class="text-sm font-medium">Sarah Chen</div>
<div class="text-sm" style="color:#888">VP Product, Raycast</div>
</div>
</figcaption>
</figure>
</section>
<!-- Divider -->
<div class="max-w-5xl mx-auto px-6">
<hr style="border:none;border-top:1px solid rgba(0,0,0,0.07)">
</div>
<!-- ── Pricing ───────────────────────────────────────────────────────────── -->
<section id="pricing" class="max-w-5xl mx-auto px-6 py-20 sm:py-32" aria-labelledby="pricing-heading">
<h2 id="pricing-heading" class="text-2xl sm:text-3xl font-medium tracking-tight mb-3">Simple pricing</h2>
<p class="text-sm mb-12" style="color:#888">Start free. Scale with your team.</p>
<div class="grid sm:grid-cols-3 gap-4 max-w-3xl">
<!-- Free -->
<div class="rounded-2xl p-6" style="background:rgba(0,0,0,0.03)">
<p class="text-xs font-medium tracking-widest uppercase mb-4" style="color:#aaa">Solo</p>
<p class="text-3xl font-medium tracking-tight mb-1">$0</p>
<p class="text-xs mb-6" style="color:#aaa">forever</p>
<ul class="space-y-2 text-sm" style="color:#555">
<li>Unlimited pages</li>
<li>1 workspace</li>
<li>Full-text search</li>
<li>Markdown export</li>
</ul>
</div>
<!-- Team — highlighted -->
<div class="rounded-2xl p-6" style="background:#1A1A18;color:white">
<p class="text-xs font-medium tracking-widest uppercase mb-4" style="color:rgba(255,255,255,0.4)">Team</p>
<p class="text-3xl font-medium tracking-tight mb-1">$12</p>
<p class="text-xs mb-6" style="color:rgba(255,255,255,0.4)">per seat / month</p>
<ul class="space-y-2 text-sm" style="color:rgba(255,255,255,0.7)">
<li>Shared canvases</li>
<li>Real-time collab</li>
<li>Backlinks & graph</li>
<li>Version history</li>
<li>Slack integration</li>
</ul>
</div>
<!-- Enterprise -->
<div class="rounded-2xl p-6" style="background:rgba(0,0,0,0.03)">
<p class="text-xs font-medium tracking-widest uppercase mb-4" style="color:#aaa">Enterprise</p>
<p class="text-3xl font-medium tracking-tight mb-1">Custom</p>
<p class="text-xs mb-6" style="color:#aaa">volume pricing</p>
<ul class="space-y-2 text-sm" style="color:#555">
<li>SSO / SAML</li>
<li>Audit logs</li>
<li>Dedicated support</li>
<li>SLA guarantee</li>
</ul>
</div>
</div>
</section>
<!-- ── CTA ──────────────────────────────────────────────────────────────── -->
<section class="max-w-5xl mx-auto px-6 py-20 sm:py-32" aria-labelledby="cta-heading">
<div class="rounded-3xl px-10 py-14 sm:py-20 text-center" style="background:#EFEDE7">
<h2 id="cta-heading" class="text-3xl sm:text-4xl font-medium tracking-tight mb-4">
Your team's thinking,<br>finally in one place.
</h2>
<p class="text-sm mb-10" style="color:#888">Free for individuals. No credit card required.</p>
<div class="flex flex-wrap items-center justify-center gap-4">
<a
href="#"
class="px-6 py-3 rounded-full font-medium text-white text-sm transition-opacity hover:opacity-80"
style="background:#1A1A18"
>Get started free</a>
<a href="#" class="link-draw text-sm" style="color:#666">See a live demo →</a>
</div>
</div>
</section>
<!-- ── Footer ───────────────────────────────────────────────────────────── -->
<footer class="footer-dark mt-4" role="contentinfo">
<div class="max-w-5xl mx-auto px-6 py-16">
<div class="grid sm:grid-cols-5 gap-10 mb-16">
<!-- Brand -->
<div class="sm:col-span-2">
<a href="#" class="text-base font-medium" style="color:white">Fold</a>
<p class="mt-3 text-sm leading-relaxed" style="color:rgba(255,255,255,0.4); max-width:220px">
A living workspace that connects your team's knowledge.
</p>
</div>
<!-- Links -->
<nav aria-label="Product links">
<p class="text-xs font-medium tracking-widest uppercase mb-4" style="color:rgba(255,255,255,0.25)">Product</p>
<ul class="space-y-2.5 text-sm">
<li><a href="#" class="link-draw transition-colors">Features</a></li>
<li><a href="#" class="link-draw transition-colors">Integrations</a></li>
<li><a href="#" class="link-draw transition-colors">Changelog</a></li>
<li><a href="#" class="link-draw transition-colors">Roadmap</a></li>
</ul>
</nav>
<nav aria-label="Resources links">
<p class="text-xs font-medium tracking-widest uppercase mb-4" style="color:rgba(255,255,255,0.25)">Resources</p>
<ul class="space-y-2.5 text-sm">
<li><a href="#" class="link-draw transition-colors">Blog</a></li>
<li><a href="#" class="link-draw transition-colors">Docs</a></li>
<li><a href="#" class="link-draw transition-colors">Templates</a></li>
<li><a href="#" class="link-draw transition-colors">Community</a></li>
</ul>
</nav>
<nav aria-label="Company links">
<p class="text-xs font-medium tracking-widest uppercase mb-4" style="color:rgba(255,255,255,0.25)">Company</p>
<ul class="space-y-2.5 text-sm">
<li><a href="#" class="link-draw transition-colors">About</a></li>
<li><a href="#" class="link-draw transition-colors">Careers</a></li>
<li><a href="#" class="link-draw transition-colors">Privacy</a></li>
<li><a href="#" class="link-draw transition-colors">Terms</a></li>
</ul>
</nav>
</div>
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 pt-8" style="border-top:1px solid rgba(255,255,255,0.07)">
<p class="text-xs" style="color:rgba(255,255,255,0.25)">© 2026 Fold, Inc. All rights reserved.</p>
<div class="flex items-center gap-4 text-xs" style="color:rgba(255,255,255,0.25)">
<a href="#" class="link-draw transition-colors">Twitter</a>
<a href="#" class="link-draw transition-colors">GitHub</a>
<a href="#" class="link-draw transition-colors">LinkedIn</a>
</div>
</div>
</div>
</footer>
</body>
</html>
Workspace landing page for team collaboration tools. Warm-neutral beige palette with charcoal headlines, a pure-CSS product canvas mock, feature cards, integration badges, pricing tiers, and a full-width dark footer.