SaaS landing pattern

A product landing that opens soft — island navbar, clear hero, feature panels that feel like light through glass instead of a wall of solid cards.

Why this pattern

SaaS landings need trust fast: who you are, what you do, one primary action. The Caustica take keeps the first viewport calm — brand and CTA readable on translucent chrome — then layers feature panels and social proof without turning the page into a dashboard.

Use it when you ship a security, infrastructure, or B2B product story and want the marketing surface to match a glass product UI.

Caustica components in play

  • Navbar — sticky island header with collapse
  • Nav — primary links in the collapse
  • Button — primary CTA and ghost secondary
  • Panel — feature columns and quote blocks
  • Brand — mark and title row when you need them

Live composition (demo shell, noindex): SaaS security landing example.

Copyable HTML skeleton

Minimal shell after importing caustica-design/css. Swap labels and sections for your product. 

<div class="ca-root">
  <header class="ui-navbar ui-navbar--sticky ui-navbar--island" data-navbar>
    <div class="ui-navbar__inner">
      <div class="ui-navbar__brand">
        <a href="../index.html">Your product</a>
      </div>
      <div class="ui-navbar__collapse" data-navbar-collapse>
        <nav class="ui-nav" aria-label="Primary">
          <ul class="ui-nav__list">
            <li class="ui-nav__item">
              <a class="ui-nav__link" href="#platform">Platform</a>
            </li>
            <li class="ui-nav__item">
              <a class="ui-nav__link" href="#cta">Pricing</a>
            </li>
          </ul>
        </nav>
        <div class="ui-navbar__actions">
          <button type="button" class="btn btn-ghost btn-compact">Sign in</button>
          <button type="button" class="btn btn-primary btn-compact">Start testing</button>
        </div>
      </div>
    </div>
  </header>

  <main id="main">
    <section>
      <h1>Ship security with calm clarity</h1>
      <p>One sentence on the problem you solve.</p>
      <a class="btn btn-primary" href="#cta">Start testing</a>
      <a class="btn" href="#platform">See the platform</a>
    </section>

    <section id="platform">
      <article class="panel">
        <h2 class="panel-title">APIs & web apps</h2>
        <p class="panel-sub">Short feature line.</p>
      </article>
    </section>
  </main>
</div>

Next steps