---
title: "Northwind Billing - Subscriptions"
platform: web
slug: northwind-billing-subscriptions
screens: ["data-table"]
domains: ["saas"]
style: "flat"
fonts: ["Geist", "Geist Mono"]
roles: ["button", "card", "top-navigation-bar", "search-bar", "avatar", "sidebar", "navigation-menu", "divider", "segmented-control", "toolbar", "chip", "table", "pagination"]
score: {clean: 100, consistent: 87, accessible: 90, comprehensible: 55}
url: https://gui.farm/web/northwind-billing-subscriptions
raw: https://gui.farm/web/northwind-billing-subscriptions/design.guix
download: https://gui.farm/web/northwind-billing-subscriptions.gui
---

# Northwind Billing - Subscriptions

A dark, flat web billing console where a RevOps operator reviews a data table of nine customer subscriptions with plan, seat usage, MRR, status, and next-invoice date.

- **Live preview:** https://gui.farm/web/northwind-billing-subscriptions
- **Raw source:** https://gui.farm/web/northwind-billing-subscriptions/design.guix
- **Download (.gui):** https://gui.farm/web/northwind-billing-subscriptions.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Northwind Billing - Subscriptions">
  <tokens>
    <color name="bg" value="#0F0E12" />
    <color name="surface" value="#17151B" />
    <color name="surface-2" value="#1F1C24" />
    <color name="track" value="#262230" />
    <color name="line" value="#2A2731" />
    <color name="line-strong" value="#3A3644" />
    <color name="text" value="#F4F2F6" />
    <color name="body" value="#C9C5D0" />
    <color name="muted" value="#9C96A6" />
    <color name="faint" value="#8B8595" />
    <color name="accent" value="#A32C48" />
    <color name="accent-bright" value="#F093A8" />
    <color name="accent-mid" value="#C25470" />
    <color name="accent-deep" value="#5A2231" />
    <color name="accent-ink" value="#FFF4F6" />
    <color name="active" value="#5FCB93" />
    <color name="trial" value="#6FB4EE" />
    <number name="r-sm" value="6" />
    <number name="r-md" value="9" />
    <number name="r-lg" value="14" />
    <number name="r-pill" value="999" />
  </tokens>

  <fonts>
    <font family="Geist" source="google" weights="400 500 600 700" styles="normal" />
    <font family="Geist Mono" source="google" weights="400 500 600" styles="normal" />
  </fonts>

  <styles>
    <text-style name="Wordmark" font-family="Geist" font-size="16" font-weight="700" line-height="20" />
    <text-style name="Display" font-family="Geist" font-size="26" font-weight="600" line-height="32" />
    <text-style name="Section" font-family="Geist" font-size="15" font-weight="600" line-height="20" />
    <text-style name="Body" font-family="Geist" font-size="13" font-weight="400" line-height="19" />
    <text-style name="Label" font-family="Geist" font-size="13" font-weight="500" line-height="18" />
    <text-style name="LabelB" font-family="Geist" font-size="13" font-weight="600" line-height="18" />
    <text-style name="Small" font-family="Geist" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Tiny" font-family="Geist" font-size="11" font-weight="500" line-height="14" />
    <text-style name="Eyebrow" font-family="Geist" font-size="11" font-weight="600" line-height="14" />
    <text-style name="Nav" font-family="Geist" font-size="13" font-weight="500" line-height="16" />
    <text-style name="Btn" font-family="Geist" font-size="13" font-weight="600" line-height="16" />
    <text-style name="Metric" font-family="Geist Mono" font-size="28" font-weight="600" line-height="34" />
    <text-style name="Num" font-family="Geist Mono" font-size="13" font-weight="500" line-height="17" />
    <text-style name="NumB" font-family="Geist Mono" font-size="13" font-weight="600" line-height="17" />
    <text-style name="Mono" font-family="Geist Mono" font-size="12" font-weight="500" line-height="15" />
  </styles>

  <components>
    <component name="NavItem" id="comp-nav">
      <props>
        <prop name="label" type="text" target="ni-label" />
      </props>
      <row w="fill" p="8 11" gap="11" radius="$r-md" align="middle-left" role="button">
        <img id="ni-icon" src="https://api.iconify.design/lucide/circle.svg?color=%239C96A6" w="16" h="16" />
        <text id="ni-label" w="fill" text-style="Nav" value="Item" color="$body" />
      </row>
    </component>

    <component name="StatTile" id="comp-stat">
      <props>
        <prop name="eyebrow" type="text" target="st-eye" />
        <prop name="metric" type="text" target="st-metric" />
        <prop name="sub" type="text" target="st-sub" />
      </props>
      <col w="271" h="fill" fill="$surface" border="1 $line" radius="$r-lg" p="15 17" gap="7" role="card">
        <text id="st-eye" text-style="Eyebrow" value="LABEL" color="$faint" text-case="uppercase" letter-spacing="0.8" />
        <text id="st-metric" text-style="Metric" font-size="24" line-height="30" value="0" color="$text" />
        <text id="st-sub" text-style="Small" value="sub" color="$muted" />
      </col>
    </component>
  </components>

  <col w="1440" fill="$bg">

    <!-- ================= TOP NAV ================= -->
    <row w="fill" h="56" p="0 24" gap="20" align="middle-left" fill="$bg" border="0 0 1 0 $line" role="top-navigation-bar">
      <row w="212" gap="10" align="middle-left">
        <row w="26" h="26" radius="$r-sm" fill="$accent" align="middle-center">
          <img src="https://api.iconify.design/lucide/receipt.svg?color=%23FFF4F6" w="15" h="15" />
        </row>
        <text text-style="Wordmark" value="Northwind" color="$text" letter-spacing="-0.2" />
      </row>

      <row p="6 10" gap="9" radius="$r-md" fill="$surface" border="1 $line" align="middle-center" role="button">
        <ellipse w="7" h="7" fill="$active" />
        <text text-style="Label" value="Riverbend" color="$text" />
        <row p="1 5" radius="4" fill="$surface-2"><text text-style="Tiny" value="LIVE" color="$muted" letter-spacing="0.5" /></row>
        <img src="https://api.iconify.design/lucide/chevrons-up-down.svg?color=%239C96A6" w="14" h="14" />
      </row>

      <row w="fill" gap="12" align="middle-right">
        <row w="300" p="8 12" gap="9" radius="$r-md" fill="$surface" border="1 $line" align="middle-left" role="search-bar">
          <img src="https://api.iconify.design/lucide/search.svg?color=%238B8595" w="15" h="15" />
          <text w="fill" text-style="Small" value="Search customers, invoices, or IDs" color="$faint" />
          <row p="1 5" radius="4" fill="$surface-2" border="1 $line"><text text-style="Tiny" value="/" color="$muted" /></row>
        </row>
        <row w="34" h="34" radius="$r-md" fill="$surface" border="1 $line" align="middle-center">
          <img src="https://api.iconify.design/lucide/bell.svg?color=%239C96A6" w="16" h="16" />
        </row>
        <row w="34" h="34" radius="$r-pill" fill="$accent-deep" border="1 $accent" align="middle-center" role="avatar">
          <text text-style="Tiny" value="JC" color="$accent-bright" />
        </row>
      </row>
    </row>

    <!-- ================= BODY ================= -->
    <row w="fill" p="24 32" gap="24" align="top-left">

      <!-- ============ SIDEBAR ============ -->
      <col w="212" gap="18" role="sidebar">
        <col w="fill" gap="3" role="navigation-menu">
          <row w="fill" p="8 11" gap="11" radius="$r-md" align="middle-left" role="button">
            <img src="https://api.iconify.design/lucide/layout-dashboard.svg?color=%239C96A6" w="16" h="16" />
            <text w="fill" text-style="Nav" value="Home" color="$body" />
          </row>
          <row w="fill" p="8 11" gap="11" radius="$r-md" align="middle-left" role="button">
            <img src="https://api.iconify.design/lucide/users.svg?color=%239C96A6" w="16" h="16" />
            <text w="fill" text-style="Nav" value="Customers" color="$body" />
          </row>
          <row w="fill" p="8 11" gap="11" radius="$r-md" fill="$surface" border="0 0 0 2 $accent" align="middle-left" role="button">
            <img src="https://api.iconify.design/lucide/credit-card.svg?color=%23F093A8" w="16" h="16" />
            <text w="fill" text-style="Nav" value="Subscriptions" color="$text" font-weight="600" />
            <text text-style="Mono" value="9" color="$muted" />
          </row>
          <row w="fill" p="8 11" gap="11" radius="$r-md" align="middle-left" role="button">
            <img src="https://api.iconify.design/lucide/file-text.svg?color=%239C96A6" w="16" h="16" />
            <text w="fill" text-style="Nav" value="Invoices" color="$body" />
          </row>
          <row w="fill" p="8 11" gap="11" radius="$r-md" align="middle-left" role="button">
            <img src="https://api.iconify.design/lucide/gauge.svg?color=%239C96A6" w="16" h="16" />
            <text w="fill" text-style="Nav" value="Usage" color="$body" />
          </row>
          <row w="fill" p="8 11" gap="11" radius="$r-md" align="middle-left" role="button">
            <img src="https://api.iconify.design/lucide/trending-up.svg?color=%239C96A6" w="16" h="16" />
            <text w="fill" text-style="Nav" value="Revenue" color="$body" />
          </row>
        </col>

        <line fill="$line" role="divider" />

        <col w="fill" gap="3" role="navigation-menu">
          <row w="fill" p="8 11" gap="11" radius="$r-md" align="middle-left" role="button">
            <img src="https://api.iconify.design/lucide/settings.svg?color=%239C96A6" w="16" h="16" />
            <text w="fill" text-style="Nav" value="Settings" color="$body" />
          </row>
          <row w="fill" p="8 11" gap="11" radius="$r-md" align="middle-left" role="button">
            <img src="https://api.iconify.design/lucide/life-buoy.svg?color=%239C96A6" w="16" h="16" />
            <text w="fill" text-style="Nav" value="Help &amp; docs" color="$body" />
          </row>
        </col>

        <col w="fill" fill="$surface" border="1 $line" radius="$r-lg" p="14" gap="10">
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="Eyebrow" value="THIS MONTH" color="$faint" text-case="uppercase" letter-spacing="0.8" />
            <text text-style="Mono" value="Aug" color="$muted" />
          </row>
          <row w="fill" gap="auto" align="baseline">
            <text text-style="Small" value="Net new MRR" color="$muted" />
            <text text-style="NumB" value="+$6,240" color="$active" />
          </row>
          <row w="fill" gap="auto" align="baseline">
            <text text-style="Small" value="Churn" color="$muted" />
            <text text-style="NumB" value="-$1,180" color="$accent-bright" />
          </row>
          <line fill="$line" role="divider" />
          <row w="fill" gap="8" align="middle-left">
            <img src="https://api.iconify.design/lucide/circle-user-round.svg?color=%239C96A6" w="20" h="20" />
            <col w="fill" gap="0">
              <text text-style="Tiny" value="Jules Carrow" color="$text" />
              <text text-style="Tiny" value="Billing ops" color="$faint" />
            </col>
          </row>
        </col>
      </col>

      <!-- ============ MAIN ============ -->
      <col w="1140" gap="20">

        <!-- page header -->
        <row w="1140" gap="16" align="bottom-left">
          <col w="fill" gap="5">
            <row gap="9" align="middle-left">
              <text text-style="Display" value="Subscriptions" color="$text" letter-spacing="-0.4" />
              <row p="3 8" radius="$r-pill" fill="$surface" border="1 $line" align="middle-center">
                <text text-style="Mono" value="9 active accounts" color="$muted" />
              </row>
            </row>
            <text text-style="Body" value="Recurring revenue across the Riverbend workspace. Reviewed as of Aug 15, 2026." color="$muted" />
          </col>
          <row gap="10" align="middle-right">
            <row p="9 13" gap="8" radius="$r-md" fill="$surface" border="1 $line" align="middle-center" role="button">
              <img src="https://api.iconify.design/lucide/download.svg?color=%23C9C5D0" w="15" h="15" />
              <text text-style="Btn" value="Export CSV" color="$body" />
            </row>
            <row p="9 14" gap="8" radius="$r-md" fill="$accent" align="middle-center" role="button">
              <img src="https://api.iconify.design/lucide/plus.svg?color=%23FFF4F6" w="15" h="15" />
              <text text-style="Btn" value="New subscription" color="$accent-ink" />
            </row>
          </row>
        </row>

        <!-- KPI band -->
        <row w="1140" gap="24" align="top-left">
          <!-- MRR card + chart -->
          <col w="558" fill="$surface" border="1 $line" radius="$r-lg" p="18 20" gap="14" role="card">
            <row w="fill" gap="12" align="top-left">
              <col w="fill" gap="6">
                <text text-style="Eyebrow" value="BILLED MRR · THIS VIEW" color="$faint" text-case="uppercase" letter-spacing="0.8" />
                <row gap="10" align="baseline">
                  <text text-style="Metric" value="$28,919" color="$text" />
                  <row gap="4" align="middle-left">
                    <img src="https://api.iconify.design/lucide/arrow-up-right.svg?color=%235FCB93" w="14" h="14" />
                    <text text-style="Small" value="27.5% YoY" color="$active" />
                  </row>
                </row>
                <text text-style="Small" value="Sum of the 9 accounts below · USD, net of discounts" color="$muted" />
              </col>
              <row h="30" fill="$bg" border="1 $line" radius="$r-md" p="3" gap="2" align="middle-left" role="segmented-control">
                <row h="24" p="0 10" align="middle-center"><text text-style="Tiny" value="3M" color="$muted" /></row>
                <row h="24" p="0 10" radius="$r-sm" fill="$surface-2" align="middle-center"><text text-style="Tiny" value="6M" color="$text" /></row>
                <row h="24" p="0 10" align="middle-center"><text text-style="Tiny" value="1Y" color="$muted" /></row>
              </row>
            </row>
            <img src="https://gui.farm/tools/charts/line-chart.svg?data=Mar:22.1,Apr:24.0,May:25.3,Jun:26.7,Jul:27.9,Aug:28.9&amp;line=%23C25470&amp;curve=smooth&amp;area=on&amp;points=hide&amp;grid=show&amp;width=1036&amp;height=260" w="518" h="130" />
          </col>

          <!-- 4 stat tiles -->
          <grid w="558" cols="271 271" gap="16">
            <col w="271" fill="$surface" border="1 $accent-deep" radius="$r-lg" p="15 17" gap="7" role="card">
              <text text-style="Eyebrow" value="AT RISK · PAST DUE" color="$accent-bright" text-case="uppercase" letter-spacing="0.8" />
              <text text-style="Metric" font-size="24" line-height="30" value="$7,469" color="$text" />
              <text text-style="Small" value="2 accounts, 6+ days overdue" color="$muted" />
            </col>
            <col w="271" fill="$surface" border="1 $line" radius="$r-lg" p="15 17" gap="8" role="card">
              <text text-style="Eyebrow" value="SEATS IN USE" color="$faint" text-case="uppercase" letter-spacing="0.8" />
              <row gap="8" align="baseline">
                <text text-style="Metric" font-size="24" line-height="30" value="565" color="$text" />
                <text text-style="Num" value="/ 675" color="$muted" />
              </row>
              <row w="237" h="6" radius="$r-pill" fill="$track" align="middle-left">
                <rect w="198" h="6" radius="$r-pill" fill="$accent-mid" />
              </row>
              <text text-style="Small" value="83.7% provisioned" color="$muted" />
            </col>
            <col w="271" fill="$surface" border="1 $line" radius="$r-lg" p="15 17" gap="7" role="card">
              <text text-style="Eyebrow" value="TRIALING" color="$faint" text-case="uppercase" letter-spacing="0.8" />
              <text text-style="Metric" font-size="24" line-height="30" value="1" color="$text" />
              <text text-style="Small" value="Peppergrove · converts Aug 19" color="$muted" />
            </col>
            <col w="271" fill="$surface" border="1 $line" radius="$r-lg" p="15 17" gap="7" role="card">
              <text text-style="Eyebrow" value="ACTIVE" color="$faint" text-case="uppercase" letter-spacing="0.8" />
              <row gap="8" align="baseline">
                <text text-style="Metric" font-size="24" line-height="30" value="5" color="$text" />
                <text text-style="Num" value="of 9" color="$muted" />
              </row>
              <text text-style="Small" value="1 canceled this cycle" color="$muted" />
            </col>
          </grid>
        </row>

        <!-- TABLE CARD -->
        <col w="1140" fill="$surface" border="1 $line" radius="$r-lg" p="16 20 20 20" gap="14" role="card">

          <!-- toolbar -->
          <row w="1100" gap="12" align="middle-left" role="toolbar">
            <row h="34" fill="$bg" border="1 $line" radius="$r-md" p="3" gap="2" align="middle-left" role="segmented-control">
              <row h="26" p="0 12" radius="$r-sm" fill="$accent" align="middle-center"><text text-style="Small" value="All" color="$accent-ink" /></row>
              <row h="26" p="0 12" align="middle-center"><text text-style="Small" value="Active" color="$muted" /></row>
              <row h="26" p="0 12" align="middle-center"><text text-style="Small" value="Past due" color="$muted" /></row>
              <row h="26" p="0 12" align="middle-center"><text text-style="Small" value="Trialing" color="$muted" /></row>
              <row h="26" p="0 12" align="middle-center"><text text-style="Small" value="Canceled" color="$muted" /></row>
            </row>
            <row w="fill" gap="10" align="middle-right">
              <row p="7 11" gap="8" radius="$r-md" fill="$bg" border="1 $line" align="middle-center" role="chip">
                <img src="https://api.iconify.design/lucide/sliders-horizontal.svg?color=%239C96A6" w="14" h="14" />
                <text text-style="Small" value="Plan: All" color="$body" />
                <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%238B8595" w="14" h="14" />
              </row>
              <row p="7 11" gap="8" radius="$r-md" fill="$bg" border="1 $line" align="middle-center" role="button">
                <img src="https://api.iconify.design/lucide/columns-3.svg?color=%239C96A6" w="14" h="14" />
                <text text-style="Small" value="Columns" color="$body" />
              </row>
            </row>
          </row>

          <!-- table -->
          <col w="1100" gap="0" role="table">

            <!-- header -->
            <row w="1100" h="34" border="0 0 1 0 $line-strong" gap="16" align="middle-left">
              <row w="368" gap="6" align="middle-left">
                <text text-style="Tiny" value="CUSTOMER" color="$muted" letter-spacing="0.5" />
                <img src="https://api.iconify.design/lucide/arrow-down.svg?color=%23F093A8" w="12" h="12" />
              </row>
              <text w="110" text-style="Tiny" value="PLAN" color="$muted" letter-spacing="0.5" />
              <text w="132" text-style="Tiny" value="SEATS" color="$muted" letter-spacing="0.5" />
              <text w="120" align="right" text-style="Tiny" value="MRR" color="$muted" letter-spacing="0.5" />
              <text w="130" text-style="Tiny" value="STATUS" color="$muted" letter-spacing="0.5" />
              <text w="120" align="right" text-style="Tiny" value="NEXT INVOICE" color="$muted" letter-spacing="0.5" />
            </row>

            <!-- row 1: Northbeam -->
            <row w="1100" h="56" border="0 0 1 0 $line" gap="16" align="middle-left">
              <row w="368" gap="11" align="middle-left">
                <row w="32" h="32" radius="$r-sm" fill="$surface-2" border="1 $line-strong" align="middle-center"><text text-style="LabelB" value="NA" color="$body" /></row>
                <col w="fill" gap="1">
                  <text text-style="LabelB" value="Northbeam Analytics" color="$text" />
                  <text text-style="Mono" value="northbeam.io" color="$faint" />
                </col>
              </row>
              <row w="110" align="middle-left"><row p="3 8" radius="$r-sm" fill="$surface-2" border="1 $line" align="middle-center"><text text-style="Tiny" value="Scale" color="$body" /></row></row>
              <row w="132" gap="9" align="middle-left">
                <text w="46" text-style="Mono" value="48/60" color="$body" />
                <row w="64" h="6" radius="$r-pill" fill="$track" align="middle-left"><rect w="51" h="6" radius="$r-pill" fill="$accent-mid" /></row>
              </row>
              <text w="120" align="right" text-style="NumB" value="$4,180" color="$text" />
              <row w="130" gap="7" align="middle-left"><ellipse w="7" h="7" fill="$active" /><text text-style="Label" value="Active" color="$active" /></row>
              <text w="120" align="right" text-style="Num" value="Sep 1" color="$body" />
              <row w="24" align="middle-center"><img src="https://api.iconify.design/lucide/ellipsis-vertical.svg?color=%238B8595" w="16" h="16" /></row>
            </row>

            <!-- row 2: Cobalt Aero -->
            <row w="1100" h="56" border="0 0 1 0 $line" gap="16" align="middle-left">
              <row w="368" gap="11" align="middle-left">
                <row w="32" h="32" radius="$r-sm" fill="$surface-2" border="1 $line-strong" align="middle-center"><text text-style="LabelB" value="CA" color="$body" /></row>
                <col w="fill" gap="1">
                  <text text-style="LabelB" value="Cobalt Aero" color="$text" />
                  <text text-style="Mono" value="cobaltaero.com" color="$faint" />
                </col>
              </row>
              <row w="110" align="middle-left"><row p="3 8" radius="$r-sm" fill="$accent-deep" border="1 $accent" align="middle-center"><text text-style="Tiny" value="Enterprise" color="$accent-bright" /></row></row>
              <row w="132" gap="9" align="middle-left">
                <text w="46" text-style="Mono" value="210/250" color="$body" />
                <row w="64" h="6" radius="$r-pill" fill="$track" align="middle-left"><rect w="54" h="6" radius="$r-pill" fill="$accent-mid" /></row>
              </row>
              <text w="120" align="right" text-style="NumB" value="$9,850" color="$text" />
              <row w="130" gap="7" align="middle-left"><ellipse w="7" h="7" fill="$active" /><text text-style="Label" value="Active" color="$active" /></row>
              <text w="120" align="right" text-style="Num" value="Sep 15" color="$body" />
              <row w="24" align="middle-center"><img src="https://api.iconify.design/lucide/ellipsis-vertical.svg?color=%238B8595" w="16" h="16" /></row>
            </row>

            <!-- row 3: Ostrom Health (past due) -->
            <row w="1100" h="56" border="0 0 1 0 $line" gap="16" align="middle-left">
              <row w="368" gap="11" align="middle-left">
                <row w="32" h="32" radius="$r-sm" fill="$surface-2" border="1 $line-strong" align="middle-center"><text text-style="LabelB" value="OH" color="$body" /></row>
                <col w="fill" gap="1">
                  <text text-style="LabelB" value="Ostrom Health" color="$text" />
                  <text text-style="Mono" value="ostrom.health" color="$faint" />
                </col>
              </row>
              <row w="110" align="middle-left"><row p="3 8" radius="$r-sm" fill="$accent-deep" border="1 $accent" align="middle-center"><text text-style="Tiny" value="Enterprise" color="$accent-bright" /></row></row>
              <row w="132" gap="9" align="middle-left">
                <text w="46" text-style="Mono" value="164/200" color="$body" />
                <row w="64" h="6" radius="$r-pill" fill="$track" align="middle-left"><rect w="52" h="6" radius="$r-pill" fill="$accent-mid" /></row>
              </row>
              <text w="120" align="right" text-style="NumB" value="$7,320" color="$text" />
              <row w="130" gap="7" align="middle-left"><ellipse w="7" h="7" fill="$accent-bright" /><text text-style="Label" value="Past due" color="$accent-bright" /></row>
              <text w="120" align="right" text-style="Num" value="Aug 14" color="$accent-bright" />
              <row w="24" align="middle-center"><img src="https://api.iconify.design/lucide/ellipsis-vertical.svg?color=%238B8595" w="16" h="16" /></row>
            </row>

            <!-- row 4: Halyard Freight -->
            <row w="1100" h="56" border="0 0 1 0 $line" gap="16" align="middle-left">
              <row w="368" gap="11" align="middle-left">
                <row w="32" h="32" radius="$r-sm" fill="$surface-2" border="1 $line-strong" align="middle-center"><text text-style="LabelB" value="HF" color="$body" /></row>
                <col w="fill" gap="1">
                  <text text-style="LabelB" value="Halyard Freight" color="$text" />
                  <text text-style="Mono" value="halyard.co" color="$faint" />
                </col>
              </row>
              <row w="110" align="middle-left"><row p="3 8" radius="$r-sm" fill="$surface-2" border="1 $line" align="middle-center"><text text-style="Tiny" value="Scale" color="$body" /></row></row>
              <row w="132" gap="9" align="middle-left">
                <text w="46" text-style="Mono" value="71/80" color="$body" />
                <row w="64" h="6" radius="$r-pill" fill="$track" align="middle-left"><rect w="57" h="6" radius="$r-pill" fill="$accent-mid" /></row>
              </row>
              <text w="120" align="right" text-style="NumB" value="$3,640" color="$text" />
              <row w="130" gap="7" align="middle-left"><ellipse w="7" h="7" fill="$active" /><text text-style="Label" value="Active" color="$active" /></row>
              <text w="120" align="right" text-style="Num" value="Aug 28" color="$body" />
              <row w="24" align="middle-center"><img src="https://api.iconify.design/lucide/ellipsis-vertical.svg?color=%238B8595" w="16" h="16" /></row>
            </row>

            <!-- row 5: Dune & Vale -->
            <row w="1100" h="56" border="0 0 1 0 $line" gap="16" align="middle-left">
              <row w="368" gap="11" align="middle-left">
                <row w="32" h="32" radius="$r-sm" fill="$surface-2" border="1 $line-strong" align="middle-center"><text text-style="LabelB" value="DV" color="$body" /></row>
                <col w="fill" gap="1">
                  <text text-style="LabelB" value="Dune &amp; Vale" color="$text" />
                  <text text-style="Mono" value="duneandvale.studio" color="$faint" />
                </col>
              </row>
              <row w="110" align="middle-left"><row p="3 8" radius="$r-sm" fill="$surface-2" border="1 $line" align="middle-center"><text text-style="Tiny" value="Growth" color="$body" /></row></row>
              <row w="132" gap="9" align="middle-left">
                <text w="46" text-style="Mono" value="26/30" color="$body" />
                <row w="64" h="6" radius="$r-pill" fill="$track" align="middle-left"><rect w="55" h="6" radius="$r-pill" fill="$accent-mid" /></row>
              </row>
              <text w="120" align="right" text-style="NumB" value="$1,470" color="$text" />
              <row w="130" gap="7" align="middle-left"><ellipse w="7" h="7" fill="$active" /><text text-style="Label" value="Active" color="$active" /></row>
              <text w="120" align="right" text-style="Num" value="Sep 3" color="$body" />
              <row w="24" align="middle-center"><img src="https://api.iconify.design/lucide/ellipsis-vertical.svg?color=%238B8595" w="16" h="16" /></row>
            </row>

            <!-- row 6: Fernpath Labs -->
            <row w="1100" h="56" border="0 0 1 0 $line" gap="16" align="middle-left">
              <row w="368" gap="11" align="middle-left">
                <row w="32" h="32" radius="$r-sm" fill="$surface-2" border="1 $line-strong" align="middle-center"><text text-style="LabelB" value="FL" color="$body" /></row>
                <col w="fill" gap="1">
                  <text text-style="LabelB" value="Fernpath Labs" color="$text" />
                  <text text-style="Mono" value="fernpath.dev" color="$faint" />
                </col>
              </row>
              <row w="110" align="middle-left"><row p="3 8" radius="$r-sm" fill="$surface-2" border="1 $line" align="middle-center"><text text-style="Tiny" value="Growth" color="$body" /></row></row>
              <row w="132" gap="9" align="middle-left">
                <text w="46" text-style="Mono" value="22/25" color="$body" />
                <row w="64" h="6" radius="$r-pill" fill="$track" align="middle-left"><rect w="56" h="6" radius="$r-pill" fill="$accent-mid" /></row>
              </row>
              <text w="120" align="right" text-style="NumB" value="$1,290" color="$text" />
              <row w="130" gap="7" align="middle-left"><ellipse w="7" h="7" fill="$active" /><text text-style="Label" value="Active" color="$active" /></row>
              <text w="120" align="right" text-style="Num" value="Aug 24" color="$body" />
              <row w="24" align="middle-center"><img src="https://api.iconify.design/lucide/ellipsis-vertical.svg?color=%238B8595" w="16" h="16" /></row>
            </row>

            <!-- row 7: Peppergrove (trialing) -->
            <row w="1100" h="56" border="0 0 1 0 $line" gap="16" align="middle-left">
              <row w="368" gap="11" align="middle-left">
                <row w="32" h="32" radius="$r-sm" fill="$surface-2" border="1 $line-strong" align="middle-center"><text text-style="LabelB" value="PR" color="$body" /></row>
                <col w="fill" gap="1">
                  <text text-style="LabelB" value="Peppergrove Retail" color="$text" />
                  <text text-style="Mono" value="peppergrove.shop" color="$faint" />
                </col>
              </row>
              <row w="110" align="middle-left"><row p="3 8" radius="$r-sm" fill="$surface-2" border="1 $line" align="middle-center"><text text-style="Tiny" value="Growth" color="$body" /></row></row>
              <row w="132" gap="9" align="middle-left">
                <text w="46" text-style="Mono" value="17/20" color="$body" />
                <row w="64" h="6" radius="$r-pill" fill="$track" align="middle-left"><rect w="54" h="6" radius="$r-pill" fill="$accent-mid" /></row>
              </row>
              <text w="120" align="right" text-style="NumB" value="$1,020" color="$text" />
              <row w="130" gap="7" align="middle-left"><ellipse w="7" h="7" fill="$trial" /><text text-style="Label" value="Trialing" color="$trial" /></row>
              <text w="120" align="right" text-style="Num" value="Aug 19" color="$body" />
              <row w="24" align="middle-center"><img src="https://api.iconify.design/lucide/ellipsis-vertical.svg?color=%238B8595" w="16" h="16" /></row>
            </row>

            <!-- row 8: Marisol Studio (past due) -->
            <row w="1100" h="56" border="0 0 1 0 $line" gap="16" align="middle-left">
              <row w="368" gap="11" align="middle-left">
                <row w="32" h="32" radius="$r-sm" fill="$surface-2" border="1 $line-strong" align="middle-center"><text text-style="LabelB" value="MS" color="$body" /></row>
                <col w="fill" gap="1">
                  <text text-style="LabelB" value="Marisol Studio" color="$text" />
                  <text text-style="Mono" value="marisol.studio" color="$faint" />
                </col>
              </row>
              <row w="110" align="middle-left"><row p="3 8" radius="$r-sm" fill="$surface-2" border="1 $line" align="middle-center"><text text-style="Tiny" value="Starter" color="$body" /></row></row>
              <row w="132" gap="9" align="middle-left">
                <text w="46" text-style="Mono" value="4/5" color="$body" />
                <row w="64" h="6" radius="$r-pill" fill="$track" align="middle-left"><rect w="51" h="6" radius="$r-pill" fill="$accent-mid" /></row>
              </row>
              <text w="120" align="right" text-style="NumB" value="$149" color="$text" />
              <row w="130" gap="7" align="middle-left"><ellipse w="7" h="7" fill="$accent-bright" /><text text-style="Label" value="Past due" color="$accent-bright" /></row>
              <text w="120" align="right" text-style="Num" value="Aug 12" color="$accent-bright" />
              <row w="24" align="middle-center"><img src="https://api.iconify.design/lucide/ellipsis-vertical.svg?color=%238B8595" w="16" h="16" /></row>
            </row>

            <!-- row 9: Vantage Kettle (canceled) -->
            <row w="1100" h="56" gap="16" align="middle-left">
              <row w="368" gap="11" align="middle-left">
                <row w="32" h="32" radius="$r-sm" fill="$surface-2" border="1 $line" align="middle-center"><text text-style="LabelB" value="VK" color="$faint" /></row>
                <col w="fill" gap="1">
                  <text text-style="LabelB" value="Vantage Kettle" color="$muted" />
                  <text text-style="Mono" value="vantagekettle.com" color="$faint" />
                </col>
              </row>
              <row w="110" align="middle-left"><row p="3 8" radius="$r-sm" fill="$bg" border="1 $line" align="middle-center"><text text-style="Tiny" value="Starter" color="$faint" /></row></row>
              <row w="132" gap="9" align="middle-left">
                <text w="46" text-style="Mono" value="3/5" color="$faint" />
                <row w="64" h="6" radius="$r-pill" fill="$track" align="middle-left"><rect w="38" h="6" radius="$r-pill" fill="$line-strong" /></row>
              </row>
              <text w="120" align="right" text-style="NumB" value="$0" color="$muted" />
              <row w="130" gap="7" align="middle-left"><ellipse w="7" h="7" fill="$faint" /><text text-style="Label" value="Canceled" color="$muted" /></row>
              <text w="120" align="right" text-style="Num" value="None" color="$faint" />
              <row w="24" align="middle-center"><img src="https://api.iconify.design/lucide/ellipsis-vertical.svg?color=%238B8595" w="16" h="16" /></row>
            </row>

            <!-- total row -->
            <row w="1100" h="48" fill="$surface-2" radius="$r-md" gap="16" align="middle-left">
              <row w="642" gap="8" p="0 0 0 14" align="middle-left">
                <img src="https://api.iconify.design/lucide/sigma.svg?color=%239C96A6" w="15" h="15" />
                <text text-style="LabelB" value="Page total · 9 accounts" color="$text" />
              </row>
              <text w="120" align="right" text-style="NumB" value="$28,919" color="$accent-bright" />
              <text w="fill" text-style="Mono" value="/mo · net of discounts" color="$muted" />
            </row>
          </col>

          <!-- pagination -->
          <row w="1100" gap="12" align="middle-left" role="pagination">
            <text w="fill" text-style="Small" value="Showing 1 to 9 of 9 subscriptions" color="$muted" />
            <row p="6 10" gap="7" radius="$r-md" fill="$bg" border="1 $line" align="middle-center" role="button">
              <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%238B8595" w="14" h="14" />
              <text text-style="Small" value="Prev" color="$faint" />
            </row>
            <row w="28" h="28" radius="$r-md" fill="$surface-2" border="1 $line" align="middle-center"><text text-style="Small" value="1" color="$text" /></row>
            <row p="6 10" gap="7" radius="$r-md" fill="$bg" border="1 $line" align="middle-center" role="button">
              <text text-style="Small" value="Next" color="$faint" />
              <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%238B8595" w="14" h="14" />
            </row>
          </row>
        </col>

      </col>
    </row>
  </col>
</gui>
```