Skip to content

← Guides

Build a marketing site

Compose landing pages from CSS-only marketing patterns. Add a native newsletter form when you need subscribers—no client-side state by default.

See algorithmic marketing examples

Progressive ladder

  1. 1. Foundations

    Load foundation, layouts, and marketing pattern CSS. Semantic landmarks carry meaning before any marketing skin.

    ResetMarketing patterns

  2. 2. Hero

    Open with a labelled hero: copy, actions, and optional media with an authored missing-media fallback.

    Hero

  3. 3. Feature grid

    Explain peer capabilities in semantic articles that reflow intrinsically—no card-click scripting.

    Feature grid

  4. 4. Call to action

    Focus one supporting message and one honest next destination near the end of the sequence.

    Call to action

  5. 5. Site footer

    Close the page with ownership, policy links, and separately labelled navigation groups.

    Site footer

  6. 6. Newsletter

    Collect subscribers through a native POST form. Browser validation runs first; the server owns errors and consent.

    Newsletter

Hero pattern

Copy, actions, and optional media with an authored missing-media fallback.

Independent publishing

Stories that travel farther than the feed

Long-form reporting, field notes, and conversations delivered without an algorithm deciding what matters.

Read independentlyBrowse the latest issue

Featured story image unavailable. Read the complete story below.

Read the complete Hero contract

Show code
<section class="thin-hero" aria-labelledby="hero-title">
  <div class="thin-hero-copy">
    <p>Independent publishing</p>
    <h1 id="hero-title">Stories that travel farther than the feed</h1>
    <p>Long-form reporting, field notes, and conversations delivered without an algorithm deciding what matters.</p>
    <p class="thin-hero-actions">
      <a  href="#subscribe">Read independently</a>
      <a href="#latest">Browse the latest issue</a>
    </p>
  </div>
  <figure class="thin-hero-media" data-media-missing>
    <figcaption>Featured story image unavailable. Read the complete story below.</figcaption>
  </figure>
</section>

Feature grid

Peer capabilities in semantic articles—static unless they contain an ordinary link.

Built for durable publishing

Theme driven

The same contract feels editorial in Neutral and expressive in Thin-Sky.

Content first

A deliberately long localized explanation wraps without hiding the destination or changing source order.

Read the complete Feature grid contract

Show code
<section aria-labelledby="features-heading">
  <h2 id="features-heading">Built for durable publishing</h2>
  <div class="thin-feature-grid">
    <article class="thin-feature">
      <svg data-icon aria-hidden="true">
        <use href="/icons/sprite.svg#sparkles">
        </use>
      </svg>
      <h3>Theme driven</h3>
      <p>The same contract feels editorial in Neutral and expressive in Thin-Sky.</p>
    </article>
    <article class="thin-feature">
      <h3>Content first</h3>
      <p>A deliberately long localized explanation wraps without hiding the destination or changing source order.</p>
    </article>
  </div>
</section>

Call to action

One message and one primary destination; use a link for navigation.

Own your next release

Publish a readable page today and add enhancement only when the task requires it.

Start with semantic HTML

Read the complete Call to action contract

Show code
<section class="thin-cta" aria-labelledby="cta-heading">
  <div>
    <h2 id="cta-heading">Own your next release</h2>
    <p>Publish a readable page today and add enhancement only when the task requires it.</p>
  </div>
  <a  href="#start">Start with semantic HTML</a>
</section>

Newsletter (native POST)

The form posts to the server with method=post. Optional enhancement must preserve action, method, values, and returned errors.

Receive the field edition

One thoughtful issue each month. Unsubscribe with one link.

We use this only to send the edition.

Read the complete Newsletter contract

Show code
<section class="thin-newsletter" id="subscribe" aria-labelledby="newsletter-heading">
  <div>
    <h2 id="newsletter-heading">Receive the field edition</h2>
    <p>One thoughtful issue each month. Unsubscribe with one link.</p>
  </div>
  <form action="/subscribe" method="post">
    <div class="thin-field">
      <label for="newsletter-email">Email address</label>
      <input class="thin-input" id="newsletter-email" name="email" type="email" autocomplete="email" required />
      <small id="newsletter-note">We use this only to send the edition.</small>
    </div>
    <button class="thin-button" type="submit">Subscribe</button>
  </form>
</section>

Supporting navigation and policy links with distinct landmark labels.

Read the complete Site footer contract

Show code
<footer class="thin-site-footer">
  <div>
    <strong>Northline</strong>
    <p><small>Independent stories since 2018.</small></p>
  </div>
  <nav aria-label="About">
    <strong>About</strong>
    <ul>
      <li><a href="/mission/">Mission</a></li>
      <li><a href="/accessibility/">Accessibility</a></li>
    </ul>
  </nav>
  <nav aria-label="Legal">
    <strong>Legal</strong>
    <ul>
      <li><a href="/privacy/">Privacy</a></li>
      <li><a href="/terms/">Terms</a></li>
    </ul>
  </nav>
</footer>