---
title: "Pactline - Activity"
platform: web
slug: pactline-activity
screens: ["notifications"]
domains: ["crm"]
style: "brutalist"
fonts: ["Space Grotesk", "JetBrains Mono"]
roles: ["top-navigation-bar", "tab-bar", "search-bar", "button", "avatar", "toolbar", "segmented-control", "chip", "card"]
score: {clean: 100, consistent: 85, accessible: 71, comprehensible: 32}
url: https://gui.farm/web/pactline-activity
raw: https://gui.farm/web/pactline-activity/design.guix
download: https://gui.farm/web/pactline-activity.gui
---

# Pactline - Activity

A dark brutalist web activity/notifications center for a B2B sales CRM, grouping deal updates, mentions, leads, and tasks with unread rails and a daily glance panel.

- **Live preview:** https://gui.farm/web/pactline-activity
- **Raw source:** https://gui.farm/web/pactline-activity/design.guix
- **Download (.gui):** https://gui.farm/web/pactline-activity.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Pactline - Activity">
  <tokens>
    <color name="bg" value="#15120C" />
    <color name="panel" value="#1E1A12" />
    <color name="raised" value="#2A2416" />
    <color name="track" value="#2C2618" />
    <color name="ink" value="#F5EFE1" />
    <color name="muted" value="#BCAF90" />
    <color name="dim" value="#A2946F" />
    <color name="edge" value="#7C6E4E" />
    <color name="line" value="#3A3220" />
    <color name="orange" value="#FF7A1A" />
    <color name="orange-bright" value="#FF9B4D" />
    <color name="orange-ink" value="#1A1206" />
  </tokens>
  <fonts>
    <font family="Space Grotesk" source="google" weights="500 600 700" styles="normal" />
    <font family="JetBrains Mono" source="google" weights="400 500 700" styles="normal" />
  </fonts>
  <styles>
    <text-style
      name="Word"
      font-family="Space Grotesk"
      font-size="17"
      font-weight="700"
      line-height="20"
      letter-spacing="1"
    />
    <text-style
      name="Tab"
      font-family="JetBrains Mono"
      font-size="12"
      font-weight="700"
      line-height="15"
      letter-spacing="0.5"
    />
    <text-style name="Title" font-family="Space Grotesk" font-size="26" font-weight="700" line-height="30" />
    <text-style name="Sub" font-family="JetBrains Mono" font-size="13" font-weight="500" line-height="18" />
    <text-style name="Card" font-family="Space Grotesk" font-size="15" font-weight="700" line-height="19" />
    <text-style name="Prim" font-family="JetBrains Mono" font-size="13" font-weight="700" line-height="17" />
    <text-style name="Sec" font-family="JetBrains Mono" font-size="12" font-weight="500" line-height="16" />
    <text-style
      name="Label"
      font-family="JetBrains Mono"
      font-size="11"
      font-weight="700"
      line-height="14"
      letter-spacing="0.6"
    />
    <text-style name="Mono" font-family="JetBrains Mono" font-size="12" font-weight="500" line-height="16" />
    <text-style name="MonoB" font-family="JetBrains Mono" font-size="12" font-weight="700" line-height="15" />
    <text-style
      name="Tiny"
      font-family="JetBrains Mono"
      font-size="10"
      font-weight="600"
      line-height="13"
      letter-spacing="0.5"
    />
    <text-style name="Time" font-family="JetBrains Mono" font-size="12" font-weight="500" line-height="15" />
    <text-style name="Stat" font-family="Space Grotesk" font-size="24" font-weight="700" line-height="26" />
  </styles>
  <col w="1440" fill="$bg">
    <!-- ===================== TOP NAV ===================== -->
    <row
      w="1440"
      h="64"
      p="0 28"
      gap="24"
      align="middle-left"
      fill="$panel"
      border="0 0 2 0 $ink"
      role="top-navigation-bar"
    >
      <row gap="11" align="middle-center">
        <col w="32" h="32" fill="$orange" border="2 $ink" align="middle-center">
          <img src="https://api.iconify.design/lucide/radar.svg?color=%231A1206" w="19" h="19" />
        </col>
        <text text-style="Word" value="PACTLINE" color="$ink" />
      </row>
      <row h="64" gap="0" align="middle-left" role="tab-bar">
        <row p="0 16" h="64" align="middle-center">
          <text text-style="Tab" value="PIPELINE" color="$muted" text-case="uppercase" />
        </row>
        <row p="0 16" h="64" align="middle-center">
          <text text-style="Tab" value="CONTACTS" color="$muted" text-case="uppercase" />
        </row>
        <row p="0 16" h="64" align="middle-center" border="0 0 4 0 $orange">
          <text text-style="Tab" value="ACTIVITY" color="$ink" text-case="uppercase" />
        </row>
        <row p="0 16" h="64" align="middle-center">
          <text text-style="Tab" value="REPORTS" color="$muted" text-case="uppercase" />
        </row>
      </row>
      <row w="fill" gap="14" align="middle-right">
        <row w="272" h="38" p="0 12" gap="10" fill="$bg" border="2 $edge" align="middle-left" role="search-bar">
          <img src="https://api.iconify.design/lucide/search.svg?color=%23A2946F" w="15" h="15" />
          <text w="fill" text-style="Mono" value="Search deals, people, co..." color="$dim" />
          <row p="1 6" fill="$panel" border="1 $edge" align="middle-center">
            <text text-style="Tiny" value="/" color="$dim" />
          </row>
        </row>
        <col w="38" h="38" fill="$panel" border="2 $edge" align="middle-center" role="button">
          <img src="https://api.iconify.design/lucide/sliders-horizontal.svg?color=%23BCAF90" w="17" h="17" />
        </col>
        <col w="38" h="38" fill="$panel" border="2 $edge" align="middle-center" role="button">
          <img src="https://api.iconify.design/lucide/bell-dot.svg?color=%23FF9B4D" w="17" h="17" />
        </col>
        <col w="38" h="38" fill="$orange" border="2 $ink" align="middle-center" role="avatar">
          <text text-style="MonoB" value="DO" color="$orange-ink" />
        </col>
      </row>
    </row>
    <!-- ===================== BODY ===================== -->
    <row w="1440" p="24 28" gap="24" align="top-left">
      <!-- ============ MAIN COLUMN ============ -->
      <col w="988" gap="20">
        <!-- page header / toolbar -->
        <row w="988" gap="16" align="middle-left" role="toolbar">
          <col gap="5">
            <text text-style="Title" value="Activity" color="$ink" />
            <text
              text-style="Sub"
              value="Everything happening across your book of business, newest first."
              color="$muted"
            />
          </col>
          <row w="fill" gap="12" align="middle-right">
            <row h="38" p="3" gap="2" fill="$bg" border="2 $edge" align="middle-left" role="segmented-control">
              <row h="30" p="0 12" fill="$orange" align="middle-center">
                <text text-style="MonoB" value="TODAY" color="$orange-ink" />
              </row>
              <row h="30" p="0 12" align="middle-center">
                <text text-style="MonoB" value="7 DAYS" color="$muted" />
              </row>
              <row h="30" p="0 12" align="middle-center">
                <text text-style="MonoB" value="30 DAYS" color="$muted" />
              </row>
            </row>
            <row h="38" p="0 14" gap="8" fill="$orange" border="2 $ink" align="middle-center" role="button">
              <img src="https://api.iconify.design/lucide/check-check.svg?color=%231A1206" w="16" h="16" />
              <text text-style="MonoB" value="MARK ALL READ" color="$orange-ink" letter-spacing="0.4" />
            </row>
          </row>
        </row>
        <!-- filter chips -->
        <row w="988" gap="10" align="middle-left">
          <row h="34" p="0 13" gap="8" fill="$orange" border="2 $ink" align="middle-center" role="chip">
            <text text-style="MonoB" value="ALL" color="$orange-ink" letter-spacing="0.4" />
            <row p="1 6" fill="$orange-ink" align="middle-center">
              <text text-style="Tiny" value="24" color="$orange-bright" />
            </row>
          </row>
          <row h="34" p="0 13" gap="8" fill="$panel" border="2 $edge" align="middle-center" role="chip">
            <text text-style="MonoB" value="DEALS" color="$ink" letter-spacing="0.4" />
            <text text-style="Tiny" value="9" color="$dim" />
          </row>
          <row h="34" p="0 13" gap="8" fill="$panel" border="2 $edge" align="middle-center" role="chip">
            <text text-style="MonoB" value="LEADS" color="$ink" letter-spacing="0.4" />
            <text text-style="Tiny" value="5" color="$dim" />
          </row>
          <row h="34" p="0 13" gap="8" fill="$panel" border="2 $edge" align="middle-center" role="chip">
            <text text-style="MonoB" value="TASKS" color="$ink" letter-spacing="0.4" />
            <text text-style="Tiny" value="7" color="$dim" />
          </row>
          <row h="34" p="0 13" gap="8" fill="$panel" border="2 $edge" align="middle-center" role="chip">
            <text text-style="MonoB" value="MENTIONS" color="$ink" letter-spacing="0.4" />
            <text text-style="Tiny" value="3" color="$dim" />
          </row>
        </row>
        <!-- feed card -->
        <col w="988" fill="$panel" border="2 $ink" role="card">
          <!-- group header -->
          <row w="988" h="46" p="0 22" gap="12" align="middle-left" fill="$raised" border="0 0 2 0 $ink">
            <text text-style="Label" value="TODAY - TUE AUG 18" color="$ink" text-case="uppercase" />
            <row w="fill" align="middle-right">
              <text text-style="Tiny" value="24 EVENTS" color="$dim" />
            </row>
          </row>
          <!-- row 1 : deal move (unread) -->
          <row w="988" h="80" align="middle-left" border="0 0 1 0 $line">
            <rect w="4" h="80" fill="$orange" />
            <row w="fill" h="80" p="0 22" gap="16" align="middle-left">
              <col w="42" h="42" fill="$raised" border="2 $edge" align="middle-center">
                <img src="https://api.iconify.design/lucide/trending-up.svg?color=%23FF9B4D" w="20" h="20" />
              </col>
              <col w="fill" gap="4" align="middle-left">
                <text
                  text-style="Prim"
                  value="Brightwell Foods - Q3 Supply moved to Negotiation"
                  color="$ink"
                />
                <text
                  text-style="Sec"
                  value="Dana Osei advanced the deal · $47,200 · stage 4 of 6"
                  color="$muted"
                />
              </col>
              <col w="96" gap="7" align="middle-right">
                <text w="96" text-style="Time" value="9:42 AM" color="$dim" align="right" />
                <row w="96" align="middle-right">
                  <row p="2 6" fill="$orange" align="middle-center">
                    <text text-style="Tiny" value="NEW" color="$orange-ink" />
                  </row>
                </row>
              </col>
            </row>
          </row>
          <!-- row 2 : mention (unread) -->
          <row w="988" h="80" align="middle-left" border="0 0 1 0 $line">
            <rect w="4" h="80" fill="$orange" />
            <row w="fill" h="80" p="0 22" gap="16" align="middle-left">
              <col w="42" h="42" fill="$raised" border="2 $edge" align="middle-center">
                <img src="https://api.iconify.design/lucide/at-sign.svg?color=%23FF9B4D" w="20" h="20" />
              </col>
              <col w="fill" gap="4" align="middle-left">
                <text text-style="Prim" value="Priya Raman mentioned you in Kestrel Logistics" color="$ink" />
                <text
                  text-style="Sec"
                  value="&quot;@you can you confirm the revised net-45 terms before I send?&quot;"
                  color="$muted"
                />
              </col>
              <col w="96" gap="7" align="middle-right">
                <text w="96" text-style="Time" value="9:28 AM" color="$dim" align="right" />
                <row w="96" align="middle-right">
                  <row p="2 6" fill="$orange" align="middle-center">
                    <text text-style="Tiny" value="NEW" color="$orange-ink" />
                  </row>
                </row>
              </col>
            </row>
          </row>
          <!-- row 3 : lead (unread) -->
          <row w="988" h="80" align="middle-left" border="0 0 1 0 $line">
            <rect w="4" h="80" fill="$orange" />
            <row w="fill" h="80" p="0 22" gap="16" align="middle-left">
              <col w="42" h="42" fill="$raised" border="2 $edge" align="middle-center">
                <img src="https://api.iconify.design/lucide/user-plus.svg?color=%23FF9B4D" w="20" h="20" />
              </col>
              <col w="fill" gap="4" align="middle-left">
                <text
                  text-style="Prim"
                  value="New inbound lead assigned to you - Nomad Coffee Co."
                  color="$ink"
                />
                <text
                  text-style="Sec"
                  value="Marcus Lindqvist, Head of Ops · from the pricing-page form"
                  color="$muted"
                />
              </col>
              <col w="96" gap="7" align="middle-right">
                <text w="96" text-style="Time" value="9:11 AM" color="$dim" align="right" />
                <row w="96" align="middle-right">
                  <row p="2 6" fill="$orange" align="middle-center">
                    <text text-style="Tiny" value="NEW" color="$orange-ink" />
                  </row>
                </row>
              </col>
            </row>
          </row>
          <!-- row 4 : task due (unread) -->
          <row w="988" h="80" align="middle-left" border="0 0 1 0 $line">
            <rect w="4" h="80" fill="$orange" />
            <row w="fill" h="80" p="0 22" gap="16" align="middle-left">
              <col w="42" h="42" fill="$raised" border="2 $edge" align="middle-center">
                <img src="https://api.iconify.design/lucide/calendar-clock.svg?color=%23FF9B4D" w="20" h="20" />
              </col>
              <col w="fill" gap="4" align="middle-left">
                <text text-style="Prim" value="Task due today - Send proposal to Vantage Health" color="$ink" />
                <text text-style="Sec" value="Assigned to you by Nadia Fischer · due 5:00 PM" color="$muted" />
              </col>
              <col w="96" gap="7" align="middle-right">
                <text w="96" text-style="Time" value="8:55 AM" color="$dim" align="right" />
                <row w="96" align="middle-right">
                  <row p="2 6" fill="$orange" align="middle-center">
                    <text text-style="Tiny" value="NEW" color="$orange-ink" />
                  </row>
                </row>
              </col>
            </row>
          </row>
          <!-- row 5 : closed won (unread) -->
          <row w="988" h="80" align="middle-left" border="0 0 1 0 $line">
            <rect w="4" h="80" fill="$orange" />
            <row w="fill" h="80" p="0 22" gap="16" align="middle-left">
              <col w="42" h="42" fill="$raised" border="2 $edge" align="middle-center">
                <img src="https://api.iconify.design/lucide/badge-check.svg?color=%23FF9B4D" w="20" h="20" />
              </col>
              <col w="fill" gap="4" align="middle-left">
                <text text-style="Prim" value="Delmar &amp; Finch - Renewal marked Closed Won" color="$ink" />
                <text
                  text-style="Sec"
                  value="Tomás Rivera closed the deal · $63,000 · 14-month term"
                  color="$muted"
                />
              </col>
              <col w="96" gap="7" align="middle-right">
                <text w="96" text-style="Time" value="8:40 AM" color="$dim" align="right" />
                <row w="96" align="middle-right">
                  <row p="2 6" fill="$orange" align="middle-center">
                    <text text-style="Tiny" value="NEW" color="$orange-ink" />
                  </row>
                </row>
              </col>
            </row>
          </row>
          <!-- row 6 : email logged (read) -->
          <row w="988" h="80" align="middle-left" border="0 0 1 0 $line">
            <rect w="4" h="80" fill="$panel" />
            <row w="fill" h="80" p="0 22" gap="16" align="middle-left">
              <col w="42" h="42" fill="$panel" border="2 $line" align="middle-center">
                <img src="https://api.iconify.design/lucide/mail.svg?color=%23A2946F" w="20" h="20" />
              </col>
              <col w="fill" gap="4" align="middle-left">
                <text text-style="Prim" value="Email logged - reply from Nadia Fischer" color="$muted" />
                <text
                  text-style="Sec"
                  value="Brightwell Foods · &quot;Looks good, let's lock the QBR for Thursday.&quot;"
                  color="$dim"
                />
              </col>
              <col w="96" gap="7" align="middle-right">
                <text w="96" text-style="Time" value="8:22 AM" color="$dim" align="right" />
              </col>
            </row>
          </row>
          <!-- row 7 : stage change (read) -->
          <row w="988" h="80" align="middle-left" border="0 0 1 0 $line">
            <rect w="4" h="80" fill="$panel" />
            <row w="fill" h="80" p="0 22" gap="16" align="middle-left">
              <col w="42" h="42" fill="$panel" border="2 $line" align="middle-center">
                <img src="https://api.iconify.design/lucide/git-branch.svg?color=%23A2946F" w="20" h="20" />
              </col>
              <col w="fill" gap="4" align="middle-left">
                <text
                  text-style="Prim"
                  value="Kestrel Logistics - Fleet SaaS moved to Proposal"
                  color="$muted"
                />
                <text
                  text-style="Sec"
                  value="Priya Raman advanced the deal · $18,900 · stage 3 of 6"
                  color="$dim"
                />
              </col>
              <col w="96" gap="7" align="middle-right">
                <text w="96" text-style="Time" value="8:05 AM" color="$dim" align="right" />
              </col>
            </row>
          </row>
          <!-- row 8 : task done (read, last - no divider) -->
          <row w="988" h="80" align="middle-left">
            <rect w="4" h="80" fill="$panel" />
            <row w="fill" h="80" p="0 22" gap="16" align="middle-left">
              <col w="42" h="42" fill="$panel" border="2 $line" align="middle-center">
                <img src="https://api.iconify.design/lucide/check.svg?color=%23A2946F" w="20" h="20" />
              </col>
              <col w="fill" gap="4" align="middle-left">
                <text
                  text-style="Prim"
                  value="You completed - Follow-up call with Nomad Coffee Co."
                  color="$muted"
                />
                <text text-style="Sec" value="Logged a call outcome · 12 min · next step set" color="$dim" />
              </col>
              <col w="96" gap="7" align="middle-right">
                <text w="96" text-style="Time" value="7:50 AM" color="$dim" align="right" />
              </col>
            </row>
          </row>
          <!-- feed footer -->
          <row
            w="988"
            h="52"
            p="0 22"
            gap="10"
            align="middle-center"
            fill="$raised"
            border="2 0 0 0 $ink"
            role="button"
          >
            <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%23FF9B4D" w="16" h="16" />
            <text
              text-style="MonoB"
              value="LOAD 16 EARLIER EVENTS"
              color="$orange-bright"
              letter-spacing="0.5"
            />
          </row>
        </col>
      </col>
      <!-- ============ RIGHT RAIL ============ -->
      <col w="372" gap="20">
        <!-- glance card -->
        <col w="372" fill="$panel" border="2 $ink" role="card">
          <row w="372" h="46" p="0 20" align="middle-left" fill="$raised" border="0 0 2 0 $ink">
            <text w="fill" text-style="Label" value="TODAY AT A GLANCE" color="$ink" text-case="uppercase" />
            <text text-style="Tiny" value="TUE" color="$dim" align="right" />
          </row>
          <col w="372" p="18 20" gap="15">
            <!-- deal updates 9 -> 108 -->
            <row w="332" gap="8" align="middle-left">
              <text w="104" text-style="Mono" value="Deal updates" color="$muted" />
              <frame w="144" h="10" clip="true">
                <rect x="0" y="0" w="144" h="10" fill="$track" />
                <rect x="0" y="0" w="108" h="10" fill="$orange" />
              </frame>
              <text w="fill" text-style="MonoB" value="9" color="$ink" align="right" />
            </row>
            <!-- new leads 5 -> 60 -->
            <row w="332" gap="8" align="middle-left">
              <text w="104" text-style="Mono" value="New leads" color="$muted" />
              <frame w="144" h="10" clip="true">
                <rect x="0" y="0" w="144" h="10" fill="$track" />
                <rect x="0" y="0" w="60" h="10" fill="$orange" />
              </frame>
              <text w="fill" text-style="MonoB" value="5" color="$ink" align="right" />
            </row>
            <!-- tasks 7 -> 84 -->
            <row w="332" gap="8" align="middle-left">
              <text w="104" text-style="Mono" value="Tasks" color="$muted" />
              <frame w="144" h="10" clip="true">
                <rect x="0" y="0" w="144" h="10" fill="$track" />
                <rect x="0" y="0" w="84" h="10" fill="$orange" />
              </frame>
              <text w="fill" text-style="MonoB" value="7" color="$ink" align="right" />
            </row>
            <!-- mentions 3 -> 36 -->
            <row w="332" gap="8" align="middle-left">
              <text w="104" text-style="Mono" value="@Mentions" color="$muted" />
              <frame w="144" h="10" clip="true">
                <rect x="0" y="0" w="144" h="10" fill="$track" />
                <rect x="0" y="0" w="36" h="10" fill="$orange" />
              </frame>
              <text w="fill" text-style="MonoB" value="3" color="$ink" align="right" />
            </row>
            <!-- emails 12 -> 144 -->
            <row w="332" gap="8" align="middle-left">
              <text w="104" text-style="Mono" value="Emails logged" color="$muted" />
              <frame w="144" h="10" clip="true">
                <rect x="0" y="0" w="144" h="10" fill="$track" />
                <rect x="0" y="0" w="144" h="10" fill="$orange" />
              </frame>
              <text w="fill" text-style="MonoB" value="12" color="$ink" align="right" />
            </row>
          </col>
        </col>
        <!-- needs you card -->
        <col w="372" fill="$panel" border="2 $ink" role="card">
          <row w="372" h="46" p="0 20" gap="10" align="middle-left" fill="$raised" border="0 0 2 0 $ink">
            <text w="fill" text-style="Label" value="NEEDS YOU" color="$ink" text-case="uppercase" />
            <row p="2 7" fill="$orange" align="middle-center">
              <text text-style="Tiny" value="3" color="$orange-ink" />
            </row>
          </row>
          <!-- q1 mention -->
          <row w="372" h="66" p="0 20" gap="13" align="middle-left" border="0 0 1 0 $line">
            <col w="36" h="36" fill="$raised" border="2 $edge" align="middle-center">
              <img src="https://api.iconify.design/lucide/at-sign.svg?color=%23FF9B4D" w="17" h="17" />
            </col>
            <col w="fill" gap="3" align="middle-left">
              <text text-style="MonoB" value="Reply to Priya Raman" color="$ink" />
              <text text-style="Sec" value="Kestrel Logistics · 9:28 AM" color="$muted" />
            </col>
            <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23A2946F" w="17" h="17" />
          </row>
          <!-- q2 task -->
          <row w="372" h="66" p="0 20" gap="13" align="middle-left" border="0 0 1 0 $line">
            <col w="36" h="36" fill="$raised" border="2 $edge" align="middle-center">
              <img src="https://api.iconify.design/lucide/calendar-clock.svg?color=%23FF9B4D" w="17" h="17" />
            </col>
            <col w="fill" gap="3" align="middle-left">
              <text text-style="MonoB" value="Send proposal - Vantage Health" color="$ink" />
              <text text-style="Sec" value="Due today · 5:00 PM" color="$muted" />
            </col>
            <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23A2946F" w="17" h="17" />
          </row>
          <!-- q3 task -->
          <row w="372" h="66" p="0 20" gap="13" align="middle-left">
            <col w="36" h="36" fill="$raised" border="2 $edge" align="middle-center">
              <img src="https://api.iconify.design/lucide/calendar-clock.svg?color=%23FF9B4D" w="17" h="17" />
            </col>
            <col w="fill" gap="3" align="middle-left">
              <text text-style="MonoB" value="Prep QBR deck - Brightwell Foods" color="$ink" />
              <text text-style="Sec" value="Due today · 6:30 PM" color="$muted" />
            </col>
            <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23A2946F" w="17" h="17" />
          </row>
        </col>
        <!-- momentum card -->
        <col w="372" fill="$panel" border="2 $ink" role="card">
          <col w="372" p="18 20" gap="14">
            <text text-style="Label" value="MOMENTUM TODAY" color="$ink" text-case="uppercase" />
            <row w="332" gap="18" align="top-left">
              <col w="fill" gap="4" align="top-left">
                <text text-style="Stat" value="$63,000" color="$orange-bright" />
                <text text-style="Sec" value="Won today" color="$muted" />
              </col>
              <rect w="2" h="46" fill="$line" />
              <col w="fill" gap="4" align="top-left">
                <text text-style="Stat" value="4" color="$ink" />
                <text text-style="Sec" value="Deals touched" color="$muted" />
              </col>
            </row>
          </col>
        </col>
        <!-- team online -->
        <col w="372" fill="$panel" border="2 $ink" p="16 20" gap="12" role="card">
          <row w="332" align="middle-left">
            <text w="fill" text-style="Label" value="TEAM ONLINE" color="$ink" text-case="uppercase" />
            <text text-style="Tiny" value="4 ACTIVE" color="$dim" align="right" />
          </row>
          <row gap="8" align="middle-left">
            <col w="34" h="34" fill="$orange" border="2 $ink" align="middle-center">
              <text text-style="Tiny" value="DO" color="$orange-ink" />
            </col>
            <col w="34" h="34" fill="$raised" border="2 $edge" align="middle-center">
              <text text-style="Tiny" value="PR" color="$muted" />
            </col>
            <col w="34" h="34" fill="$raised" border="2 $edge" align="middle-center">
              <text text-style="Tiny" value="TR" color="$muted" />
            </col>
            <col w="34" h="34" fill="$raised" border="2 $edge" align="middle-center">
              <text text-style="Tiny" value="NF" color="$muted" />
            </col>
            <col w="34" h="34" fill="$bg" border="2 $edge" align="middle-center">
              <text text-style="Tiny" value="+3" color="$dim" />
            </col>
          </row>
        </col>
      </col>
    </row>
    <!-- ===================== STATUS BAR ===================== -->
    <row
      w="1440"
      h="32"
      p="0 28"
      gap="16"
      align="middle-left"
      fill="$raised"
      border="2 0 0 0 $ink"
      role="toolbar"
    >
      <row gap="7" align="middle-left">
        <ellipse w="7" h="7" fill="$orange" />
        <text text-style="Tiny" value="LIVE · SYNCED 9:47 AM" color="$muted" />
      </row>
      <rect w="1" h="14" fill="$line" />
      <text text-style="Tiny" value="WORKSPACE: NORTHWIND TRADING" color="$dim" />
      <row w="fill" gap="16" align="middle-right">
        <row gap="6" align="middle-center">
          <rect w="8" h="8" fill="$orange" />
          <text text-style="Tiny" value="= UNREAD" color="$dim" />
        </row>
        <text text-style="Tiny" value="PACTLINE v3.1" color="$dim" />
      </row>
    </row>
  </col>
</gui>
```