Paste into a static page. Link @bwui/css (and @bwui/js for behaviours).

<!DOCTYPE html>
<html lang="en-GB" data-bw-brand="northline">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>No routes yet | Northline</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,500;8..60,650;8..60,700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/static/product_templates/assets/brickwork.css" />
    <script defer src="/static/product_templates/assets/behaviours.js"></script>
    <style>
      /* Northline brand pack (fictional): cool paper, teal accent, display serif. */
      :root {
        --bw-font-family-sans: "Source Sans 3", system-ui, sans-serif;
        --bw-font-family-display: "Source Serif 4", Georgia, serif;
      }

      body:not([data-theme=dark]) {
        --bw-color-surface: oklch(0.985 0.004 240);
        --bw-color-fg: oklch(0.26 0.02 250);
        --bw-color-border: oklch(0.90 0.01 240);
        --bw-color-accent: oklch(0.40 0.06 228);
        --bw-color-fg-on-accent: oklch(0.99 0 0);
      }

      body[data-theme=dark] {
        --bw-color-surface: oklch(0.17 0.012 240);
        --bw-color-fg: oklch(0.94 0.006 240);
        --bw-color-border: oklch(0.30 0.015 240);
        --bw-color-accent: oklch(0.74 0.08 215);
        --bw-color-fg-on-accent: oklch(0.18 0.02 240);
      }

      body {
        --bw-color-accent-fg: var(--bw-color-fg-on-accent);
        margin: 0;
        font-family: var(--bw-font-family-sans);
        background: var(--bw-color-surface);
        color: var(--bw-color-fg);
      }

      .nl-header {
        display: flex;
        align-items: center;
        gap: var(--bw-space-5);
        padding: var(--bw-space-4) var(--bw-space-6);
        border-bottom: 1px solid var(--bw-color-border);
        background: var(--bw-color-surface);
      }

      .nl-header__brand {
        display: inline-flex;
        align-items: center;
        gap: var(--bw-space-2);
        margin-right: auto;
        font-weight: 700;
        letter-spacing: -0.03em;
        color: var(--bw-color-fg);
        text-decoration: none;
      }

      .nl-header__mark {
        width: 1.125rem;
        height: 1.125rem;
        border-radius: 5px;
        background: var(--bw-color-accent);
      }

      .nl-header__nav {
        display: flex;
        align-items: center;
        gap: var(--bw-space-5);
      }

      .nl-header__nav a {
        color: var(--bw-color-fg-muted);
        text-decoration: none;
        font-size: var(--bw-font-size-sm);
        font-weight: 500;
      }

      .nl-header__nav a:hover {
        color: var(--bw-color-fg);
      }

      .nl-footer {
        display: flex;
        flex-wrap: wrap;
        gap: var(--bw-space-4);
        justify-content: space-between;
        padding: var(--bw-space-6);
        border-top: 1px solid var(--bw-color-border);
        color: var(--bw-color-fg-muted);
        font-size: var(--bw-font-size-sm);
      }

      .nl-footer p {
        margin: 0;
      }

      .nl-footer a {
        color: inherit;
      }

      .nl-eyebrow {
        margin: 0;
        font-size: var(--bw-font-size-sm);
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--bw-color-fg-muted);
      }

      .nl-heading {
        margin: 0;
        font-family: var(--bw-font-family-display);
        font-weight: 650;
        font-size: clamp(2rem, 4vw, 3rem);
        line-height: 1.1;
        letter-spacing: -0.02em;
        text-wrap: balance;
      }

      .nl-lede {
        margin: 0;
        max-inline-size: 44ch;
        font-size: var(--bw-font-size-lg);
        line-height: 1.5;
        color: var(--bw-color-fg-muted);
      }

      .nl-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--bw-space-3);
      }

      @media (max-width: 48rem) {
        .nl-header__nav {
          display: none;
        }
      }

      .nl-empty {
        display: grid;
        place-items: center;
        min-block-size: 62vh;
        padding: var(--bw-space-10) var(--bw-space-6);
      }

      .nl-empty__inner {
        display: grid;
        justify-items: center;
        gap: var(--bw-space-4);
        max-inline-size: 30rem;
        text-align: center;
      }

      .nl-empty__art {
        display: grid;
        place-items: center;
        inline-size: 4.5rem;
        block-size: 4.5rem;
        border-radius: var(--bw-radius-lg);
        border: 1px dashed var(--bw-color-border);
        color: var(--bw-color-accent);
        background: color-mix(in oklab, var(--bw-color-accent) 6%, var(--bw-color-surface));
      }

      .nl-empty__inner .nl-heading {
        font-size: clamp(1.75rem, 3vw, 2.25rem);
      }

      .nl-empty__inner .nl-lede {
        font-size: var(--bw-font-size-md);
      }

      .nl-empty__hint {
        margin: 0;
        font-size: var(--bw-font-size-sm);
        color: var(--bw-color-fg-muted);
      }
    </style>
  </head>
  <body data-theme="light" data-bw-brand="northline">
    <a class="bw-skip-link" href="#main">Skip to content</a>

    <header class="nl-header">
      <a class="nl-header__brand" href="/templates/homepage/full/">
        <span class="nl-header__mark" aria-hidden="true"></span>
        Northline
      </a>
      <nav class="nl-header__nav" aria-label="Primary">
        <a href="/templates/homepage/full/">Product</a>
        <a href="/templates/landing/full/">Customers</a>
        <a href="/templates/pricing/full/">Pricing</a>
      </nav>
      <a class="bw-btn bw-btn--solid" href="/templates/contact/full/">Book a walkthrough</a>
    </header>

    <main id="main" class="nl-empty">
      <div class="nl-empty__inner">
        <div class="nl-empty__art" aria-hidden="true">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
            <path d="M4 22h6l2 4h8l2-4h6" />
            <path d="M6 22 9 8h14l3 14" />
            <path d="M16 13v5M13.5 15.5h5" />
          </svg>
        </div>
        <h1 class="nl-heading">No routes on the board yet</h1>
        <p class="nl-lede">
          Add your first route and Northline starts tracking live ETAs, driver handoffs and late loads for the depot.
        </p>
        <div class="nl-actions" style="justify-content: center">
          <a class="bw-btn bw-btn--solid bw-btn--lg" href="/templates/contact/full/">Add your first route</a>
          <a class="bw-btn bw-btn--ghost bw-btn--lg" href="/templates/homepage/full/">See the product</a>
        </div>
        <p class="nl-empty__hint">Most depots are live in under an hour. No card for fourteen days.</p>
      </div>
    </main>

    <footer class="nl-footer">
      <p>&copy; Northline. Fleet operations software for depots and drivers.</p>
      <p><a href="/templates/homepage/full/">Homepage</a> · <a href="/templates/landing/full/">Landing</a> · <a href="/templates/contact/full/">Contact</a></p>
    </footer>
  </body>
</html>