---
title: "TAPE Terminal - US Momentum Watchlist"
platform: web
slug: tape-terminal-us-momentum-watchlist
screens: []
domains: ["fintech"]
style: "brutalist"
fonts: ["Space Grotesk", "IBM Plex Mono"]
roles: ["top-navigation-bar", "tab-bar", "search-bar", "badge", "avatar", "toolbar", "table", "segmented-control", "button", "item-indicator", "card", "divider"]
score: {clean: 100, consistent: 78, accessible: 78, comprehensible: 41}
url: https://gui.farm/web/tape-terminal-us-momentum-watchlist
raw: https://gui.farm/web/tape-terminal-us-momentum-watchlist/design.guix
download: https://gui.farm/web/tape-terminal-us-momentum-watchlist.gui
---

# TAPE Terminal - US Momentum Watchlist

A brutalist dark web trading-terminal watchlist where an active retail trader monitors seven US equities with live quotes, day change, per-row sparklines and day-range bars, plus a market-breadth panel and a selected-symbol detail rail.

- **Live preview:** https://gui.farm/web/tape-terminal-us-momentum-watchlist
- **Raw source:** https://gui.farm/web/tape-terminal-us-momentum-watchlist/design.guix
- **Download (.gui):** https://gui.farm/web/tape-terminal-us-momentum-watchlist.gui

## Source (design.guix)

```xml
<gui version="0.2" name="TAPE Terminal - US Momentum Watchlist">
  <tokens>
    <color name="bg" value="#0A0C0E" />
    <color name="panel" value="#101416" />
    <color name="panel-2" value="#151A1D" />
    <color name="line" value="#232B2E" />
    <color name="line-strong" value="#37454A" />
    <color name="phosphor" value="#E8F2F0" />
    <color name="body" value="#A7BBBE" />
    <color name="faint" value="#7C9195" />
    <color name="cyan" value="#34E1DC" />
    <color name="cyan-dim" value="#12B8B4" />
    <color name="cyan-track" value="#123234" />
    <color name="cyan-ink" value="#04211F" />
    <color name="red" value="#FF6152" />
    <color name="red-track" value="#2A1512" />
    <color name="red-ink" value="#2A0A06" />
  </tokens>
  <fonts>
    <font family="IBM Plex Mono" source="google" weights="400 500 600 700" styles="normal" />
    <font family="Space Grotesk" source="google" weights="500 600 700" styles="normal" />
  </fonts>
  <styles>
    <text-style
      name="Wordmark"
      font-family="Space Grotesk"
      font-size="19"
      font-weight="700"
      line-height="22"
      letter-spacing="1"
    />
    <text-style
      name="Section"
      font-family="Space Grotesk"
      font-size="13"
      font-weight="600"
      line-height="16"
      letter-spacing="0.6"
    />
    <text-style
      name="Hero"
      font-family="IBM Plex Mono"
      font-size="34"
      font-weight="600"
      line-height="38"
      letter-spacing="-1"
    />
    <text-style name="BigNum" font-family="IBM Plex Mono" font-size="16" font-weight="600" line-height="20" />
    <text-style
      name="Sym"
      font-family="IBM Plex Mono"
      font-size="14"
      font-weight="600"
      line-height="18"
      letter-spacing="0.3"
    />
    <text-style name="Name" font-family="IBM Plex Mono" font-size="11" font-weight="400" line-height="14" />
    <text-style name="Num" font-family="IBM Plex Mono" font-size="13" font-weight="500" line-height="17" />
    <text-style name="NumB" font-family="IBM Plex Mono" font-size="13" font-weight="600" line-height="17" />
    <text-style
      name="Label"
      font-family="IBM Plex Mono"
      font-size="10"
      font-weight="600"
      line-height="13"
      letter-spacing="1"
    />
    <text-style
      name="Tiny"
      font-family="IBM Plex Mono"
      font-size="10"
      font-weight="500"
      line-height="13"
      letter-spacing="0.5"
    />
    <text-style name="Mono" font-family="IBM Plex Mono" font-size="12" font-weight="500" line-height="16" />
    <text-style
      name="Clock"
      font-family="IBM Plex Mono"
      font-size="13"
      font-weight="600"
      line-height="16"
      letter-spacing="0.5"
    />
  </styles>
  <col w="1440" fill="$bg">
    <!-- ================= MASTHEAD ================= -->
    <row
      w="1440"
      h="54"
      p="0 20"
      gap="18"
      align="middle-left"
      fill="$bg"
      border="0 0 2 0 $line-strong"
      role="top-navigation-bar"
    >
      <row w="188" gap="10" align="middle-left">
        <col w="30" h="30" fill="$cyan" align="middle-center">
          <appearance>
            <fill type="color" value="#34E1DC" />
            <effect type="drop-shadow" x="3" y="3" radius="0" spread="0" color="#04211F" />
          </appearance>
          <img src="https://api.iconify.design/lucide/activity.svg?color=%2304211F" w="18" h="18" />
        </col>
        <text text-style="Wordmark" value="TAPE" color="$phosphor" />
      </row>
      <row w="fill" gap="4" align="middle-left" role="tab-bar">
        <row h="30" p="0 14" fill="$panel-2" border="0 0 2 0 $cyan" align="middle-center">
          <text text-style="Mono" value="WATCHLIST" color="$phosphor" />
        </row>
        <row h="30" p="0 14" align="middle-center">
          <text text-style="Mono" value="MOVERS" color="$faint" />
        </row>
        <row h="30" p="0 14" align="middle-center">
          <text text-style="Mono" value="SCREENER" color="$faint" />
        </row>
        <row h="30" p="0 14" align="middle-center">
          <text text-style="Mono" value="NEWS" color="$faint" />
        </row>
        <row h="30" p="0 14" align="middle-center">
          <text text-style="Mono" value="ORDERS" color="$faint" />
        </row>
      </row>
      <row w="252" h="32" p="0 12" gap="9" fill="$panel" border="1 $line" align="middle-left" role="search-bar">
        <img src="https://api.iconify.design/lucide/search.svg?color=%237C9195" w="15" h="15" />
        <text w="fill" text-style="Mono" value="Symbol or ID" color="$faint" />
        <row p="1 5" fill="$panel-2" border="1 $line">
          <text text-style="Tiny" value="/" color="$faint" />
        </row>
      </row>
      <row gap="9" align="middle-right">
        <row p="5 10" gap="7" fill="$panel" border="1 $line-strong" align="middle-center" role="badge">
          <ellipse w="7" h="7" fill="$cyan" />
          <text text-style="Label" value="MARKETS OPEN" color="$phosphor" text-case="uppercase" />
        </row>
        <text text-style="Clock" value="14:32:07 ET" color="$body" />
        <col w="32" h="32" fill="$panel-2" border="1 $line-strong" align="middle-center" role="avatar">
          <text text-style="Tiny" value="MO" color="$cyan" />
        </col>
      </row>
    </row>
    <!-- ================= TICKER TAPE STRIP ================= -->
    <row
      w="1440"
      h="42"
      p="0 20"
      gap="0"
      align="middle-left"
      fill="$panel"
      border="0 0 1 0 $line"
      role="toolbar"
    >
      <row w="192" gap="8" align="middle-left">
        <text text-style="Label" value="S&amp;P 500" color="$faint" />
        <text text-style="NumB" value="6431.20" color="$phosphor" />
        <text text-style="Num" value="▲0.34%" color="$cyan" />
      </row>
      <rect w="1" h="18" fill="$line" />
      <row w="192" gap="8" p="0 0 0 16" align="middle-left">
        <text text-style="Label" value="NASDAQ" color="$faint" />
        <text text-style="NumB" value="23118.7" color="$phosphor" />
        <text text-style="Num" value="▲0.62%" color="$cyan" />
      </row>
      <rect w="1" h="18" fill="$line" />
      <row w="176" gap="8" p="0 0 0 16" align="middle-left">
        <text text-style="Label" value="DOW" color="$faint" />
        <text text-style="NumB" value="44905" color="$phosphor" />
        <text text-style="Num" value="▼0.11%" color="$red" />
      </row>
      <rect w="1" h="18" fill="$line" />
      <row w="150" gap="8" p="0 0 0 16" align="middle-left">
        <text text-style="Label" value="VIX" color="$faint" />
        <text text-style="NumB" value="15.82" color="$phosphor" />
        <text text-style="Num" value="▲2.07%" color="$cyan" />
      </row>
      <rect w="1" h="18" fill="$line" />
      <row w="196" gap="8" p="0 0 0 16" align="middle-left">
        <text text-style="Label" value="EUR/USD" color="$faint" />
        <text text-style="NumB" value="1.0846" color="$phosphor" />
        <text text-style="Num" value="▼0.18%" color="$red" />
      </row>
      <rect w="1" h="18" fill="$line" />
      <row w="168" gap="8" p="0 0 0 16" align="middle-left">
        <text text-style="Label" value="US10Y" color="$faint" />
        <text text-style="NumB" value="4.212%" color="$phosphor" />
        <text text-style="Num" value="▲3bp" color="$cyan" />
      </row>
      <rect w="1" h="18" fill="$line" />
      <row w="fill" gap="8" p="0 0 0 16" align="middle-left">
        <text text-style="Label" value="WTI" color="$faint" />
        <text text-style="NumB" value="$71.35" color="$phosphor" />
        <text text-style="Num" value="▲1.24%" color="$cyan" />
      </row>
    </row>
    <!-- ================= BODY ================= -->
    <row w="1440" p="16 20" gap="16" align="top-left">
      <!-- ============ MAIN (watchlist + breadth) ============ -->
      <col w="960" gap="16">
        <!-- watchlist block -->
        <col w="960" fill="$panel" border="2 $line-strong" role="table">
          <!-- block header -->
          <row
            w="960"
            h="44"
            p="0 16"
            gap="12"
            align="middle-left"
            fill="$panel-2"
            border="0 0 1 0 $line-strong"
          >
            <text text-style="Section" value="WATCHLIST" color="$phosphor" text-case="uppercase" />
            <row p="2 7" fill="$bg" border="1 $line" align="middle-center">
              <text text-style="Tiny" value="US MOMENTUM" color="$cyan" />
            </row>
            <text text-style="Mono" value="7 symbols" color="$faint" />
            <row w="fill" gap="8" align="middle-right">
              <row
                h="28"
                p="2"
                gap="2"
                fill="$bg"
                border="1 $line"
                align="middle-left"
                role="segmented-control"
              >
                <row h="22" p="0 9" fill="$cyan" align="middle-center">
                  <text text-style="Tiny" value="1D" color="$cyan-ink" />
                </row>
                <row h="22" p="0 9" align="middle-center">
                  <text text-style="Tiny" value="5D" color="$faint" />
                </row>
                <row h="22" p="0 9" align="middle-center">
                  <text text-style="Tiny" value="1M" color="$faint" />
                </row>
                <row h="22" p="0 9" align="middle-center">
                  <text text-style="Tiny" value="6M" color="$faint" />
                </row>
                <row h="22" p="0 9" align="middle-center">
                  <text text-style="Tiny" value="1Y" color="$faint" />
                </row>
              </row>
              <row h="28" p="0 10" gap="7" fill="$bg" border="1 $line" align="middle-center" role="button">
                <text text-style="Tiny" value="SORT: %CHG" color="$body" />
                <img
                  src="https://api.iconify.design/lucide/chevrons-up-down.svg?color=%237C9195"
                  w="13"
                  h="13"
                />
              </row>
            </row>
          </row>
          <!-- column header -->
          <row w="928" h="30" p="0 16" gap="11" align="middle-left" border="0 0 1 0 $line">
            <text w="224" text-style="Label" value="SYMBOL" color="$faint" />
            <text w="100" align="right" text-style="Label" value="LAST" color="$faint" />
            <text w="92" align="right" text-style="Label" value="CHG" color="$faint" />
            <text w="88" align="right" text-style="Label" value="%CHG" color="$faint" />
            <text w="84" align="right" text-style="Label" value="VOL" color="$faint" />
            <text w="150" text-style="Label" value="DAY RANGE" color="$faint" />
            <text w="120" align="right" text-style="Label" value="1D TREND" color="$faint" />
          </row>
          <!-- row NVDA (selected) -->
          <row
            w="fill"
            h="52"
            p="0 16"
            gap="11"
            align="middle-left"
            fill="$panel-2"
            border="0 0 1 3 $cyan"
            role="item-indicator"
          >
            <row w="224" gap="10" align="middle-left">
              <col w="30" h="30" fill="$bg" border="1 $line-strong" align="middle-center">
                <text text-style="Tiny" value="NV" color="$cyan" />
              </col>
              <col w="fill" gap="1" align="middle-left">
                <text text-style="Sym" value="NVDA" color="$phosphor" />
                <text text-style="Name" value="NVIDIA Corp" color="$faint" />
              </col>
            </row>
            <text w="100" align="right" text-style="NumB" value="178.42" color="$phosphor" />
            <text w="92" align="right" text-style="Num" value="+4.15" color="$cyan" />
            <row w="88" align="middle-right">
              <row p="2 6" border="1 $cyan" align="middle-center">
                <text text-style="NumB" value="▲2.38%" color="$cyan" />
              </row>
            </row>
            <text w="84" align="right" text-style="Num" value="182.4M" color="$body" />
            <frame w="150" h="52" clip="true">
              <rect x="2" y="24" w="146" h="4" fill="$bg" />
              <rect x="2" y="24" w="119" h="4" fill="$cyan-track" />
              <rect x="52" y="21" w="2" h="10" fill="$faint" />
              <rect x="119" y="20" w="3" h="12" fill="$cyan" />
            </frame>
            <img
              w="120"
              h="26"
              src="https://gui.farm/tools/charts/line-chart.svg?data=0:1.0,1:0.7,2:1.5,3:1.9,4:1.7,5:2.4,6:3.0&amp;line=%2334E1DC&amp;curve=smooth&amp;area=off&amp;points=hide&amp;grid=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=240&amp;height=52"
            />
          </row>
          <!-- row AMD -->
          <row w="928" h="52" p="0 16" gap="11" align="middle-left" border="0 0 1 0 $line">
            <row w="224" gap="10" align="middle-left">
              <col w="30" h="30" fill="$bg" border="1 $line-strong" align="middle-center">
                <text text-style="Tiny" value="AM" color="$body" />
              </col>
              <col w="fill" gap="1" align="middle-left">
                <text text-style="Sym" value="AMD" color="$phosphor" />
                <text text-style="Name" value="Adv Micro Dev" color="$faint" />
              </col>
            </row>
            <text w="100" align="right" text-style="NumB" value="187.55" color="$phosphor" />
            <text w="92" align="right" text-style="Num" value="+5.63" color="$cyan" />
            <row w="88" align="middle-right">
              <row p="2 6" border="1 $cyan" align="middle-center">
                <text text-style="NumB" value="▲3.09%" color="$cyan" />
              </row>
            </row>
            <text w="84" align="right" text-style="Num" value="96.7M" color="$body" />
            <frame w="150" h="52" clip="true">
              <rect x="2" y="24" w="146" h="4" fill="$bg" />
              <rect x="2" y="24" w="133" h="4" fill="$cyan-track" />
              <rect x="11" y="21" w="2" h="10" fill="$faint" />
              <rect x="133" y="20" w="3" h="12" fill="$cyan" />
            </frame>
            <img
              w="120"
              h="26"
              src="https://gui.farm/tools/charts/line-chart.svg?data=0:1.1,1:1.4,2:1.2,3:2.0,4:2.5,5:2.3,6:3.2&amp;line=%2334E1DC&amp;curve=smooth&amp;area=off&amp;points=hide&amp;grid=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=240&amp;height=52"
            />
          </row>
          <!-- row MSFT -->
          <row w="928" h="52" p="0 16" gap="11" align="middle-left" border="0 0 1 0 $line">
            <row w="224" gap="10" align="middle-left">
              <col w="30" h="30" fill="$bg" border="1 $line-strong" align="middle-center">
                <text text-style="Tiny" value="MS" color="$body" />
              </col>
              <col w="fill" gap="1" align="middle-left">
                <text text-style="Sym" value="MSFT" color="$phosphor" />
                <text text-style="Name" value="Microsoft" color="$faint" />
              </col>
            </row>
            <text w="100" align="right" text-style="NumB" value="512.34" color="$phosphor" />
            <text w="92" align="right" text-style="Num" value="+3.06" color="$cyan" />
            <row w="88" align="middle-right">
              <row p="2 6" border="1 $cyan" align="middle-center">
                <text text-style="NumB" value="▲0.60%" color="$cyan" />
              </row>
            </row>
            <text w="84" align="right" text-style="Num" value="28.1M" color="$body" />
            <frame w="150" h="52" clip="true">
              <rect x="2" y="24" w="146" h="4" fill="$bg" />
              <rect x="2" y="24" w="111" h="4" fill="$cyan-track" />
              <rect x="46" y="21" w="2" h="10" fill="$faint" />
              <rect x="111" y="20" w="3" h="12" fill="$cyan" />
            </frame>
            <img
              w="120"
              h="26"
              src="https://gui.farm/tools/charts/line-chart.svg?data=0:1.4,1:1.2,2:1.6,3:1.5,4:2.0,5:1.9,6:2.3&amp;line=%2334E1DC&amp;curve=smooth&amp;area=off&amp;points=hide&amp;grid=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=240&amp;height=52"
            />
          </row>
          <!-- row AMZN -->
          <row w="928" h="52" p="0 16" gap="11" align="middle-left" border="0 0 1 0 $line">
            <row w="224" gap="10" align="middle-left">
              <col w="30" h="30" fill="$bg" border="1 $line-strong" align="middle-center">
                <text text-style="Tiny" value="AM" color="$body" />
              </col>
              <col w="fill" gap="1" align="middle-left">
                <text text-style="Sym" value="AMZN" color="$phosphor" />
                <text text-style="Name" value="Amazon" color="$faint" />
              </col>
            </row>
            <text w="100" align="right" text-style="NumB" value="219.63" color="$phosphor" />
            <text w="92" align="right" text-style="Num" value="+0.47" color="$cyan" />
            <row w="88" align="middle-right">
              <row p="2 6" border="1 $cyan" align="middle-center">
                <text text-style="NumB" value="▲0.21%" color="$cyan" />
              </row>
            </row>
            <text w="84" align="right" text-style="Num" value="41.5M" color="$body" />
            <frame w="150" h="52" clip="true">
              <rect x="2" y="24" w="146" h="4" fill="$bg" />
              <rect x="2" y="24" w="99" h="4" fill="$cyan-track" />
              <rect x="72" y="21" w="2" h="10" fill="$faint" />
              <rect x="99" y="20" w="3" h="12" fill="$cyan" />
            </frame>
            <img
              w="120"
              h="26"
              src="https://gui.farm/tools/charts/line-chart.svg?data=0:1.6,1:1.5,2:1.8,3:1.7,4:1.9,5:1.8,6:2.0&amp;line=%2334E1DC&amp;curve=smooth&amp;area=off&amp;points=hide&amp;grid=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=240&amp;height=52"
            />
          </row>
          <!-- row AAPL -->
          <row w="928" h="52" p="0 16" gap="11" align="middle-left" border="0 0 1 0 $line">
            <row w="224" gap="10" align="middle-left">
              <col w="30" h="30" fill="$bg" border="1 $line-strong" align="middle-center">
                <text text-style="Tiny" value="AA" color="$body" />
              </col>
              <col w="fill" gap="1" align="middle-left">
                <text text-style="Sym" value="AAPL" color="$phosphor" />
                <text text-style="Name" value="Apple" color="$faint" />
              </col>
            </row>
            <text w="100" align="right" text-style="NumB" value="246.80" color="$phosphor" />
            <text w="92" align="right" text-style="Num" value="-1.92" color="$red" />
            <row w="88" align="middle-right">
              <row p="2 6" border="1 $red" align="middle-center">
                <text text-style="NumB" value="▼0.77%" color="$red" />
              </row>
            </row>
            <text w="84" align="right" text-style="Num" value="63.8M" color="$body" />
            <frame w="150" h="52" clip="true">
              <rect x="2" y="24" w="146" h="4" fill="$bg" />
              <rect x="2" y="24" w="30" h="4" fill="$red-track" />
              <rect x="108" y="21" w="2" h="10" fill="$faint" />
              <rect x="30" y="20" w="3" h="12" fill="$red" />
            </frame>
            <img
              w="120"
              h="26"
              src="https://gui.farm/tools/charts/line-chart.svg?data=0:3.0,1:2.7,2:2.9,3:2.2,4:2.4,5:1.9,6:1.6&amp;line=%23FF6152&amp;curve=smooth&amp;area=off&amp;points=hide&amp;grid=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=240&amp;height=52"
            />
          </row>
          <!-- row META -->
          <row w="928" h="52" p="0 16" gap="11" align="middle-left" border="0 0 1 0 $line">
            <row w="224" gap="10" align="middle-left">
              <col w="30" h="30" fill="$bg" border="1 $line-strong" align="middle-center">
                <text text-style="Tiny" value="ME" color="$body" />
              </col>
              <col w="fill" gap="1" align="middle-left">
                <text text-style="Sym" value="META" color="$phosphor" />
                <text text-style="Name" value="Meta Platforms" color="$faint" />
              </col>
            </row>
            <text w="100" align="right" text-style="NumB" value="704.18" color="$phosphor" />
            <text w="92" align="right" text-style="Num" value="-6.30" color="$red" />
            <row w="88" align="middle-right">
              <row p="2 6" border="1 $red" align="middle-center">
                <text text-style="NumB" value="▼0.89%" color="$red" />
              </row>
            </row>
            <text w="84" align="right" text-style="Num" value="19.2M" color="$body" />
            <frame w="150" h="52" clip="true">
              <rect x="2" y="24" w="146" h="4" fill="$bg" />
              <rect x="2" y="24" w="38" h="4" fill="$red-track" />
              <rect x="117" y="21" w="2" h="10" fill="$faint" />
              <rect x="38" y="20" w="3" h="12" fill="$red" />
            </frame>
            <img
              w="120"
              h="26"
              src="https://gui.farm/tools/charts/line-chart.svg?data=0:2.9,1:3.0,2:2.6,3:2.4,4:2.5,5:2.1,6:1.7&amp;line=%23FF6152&amp;curve=smooth&amp;area=off&amp;points=hide&amp;grid=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=240&amp;height=52"
            />
          </row>
          <!-- row TSLA (last, no bottom border) -->
          <row w="928" h="52" p="0 16" gap="11" align="middle-left">
            <row w="224" gap="10" align="middle-left">
              <col w="30" h="30" fill="$bg" border="1 $line-strong" align="middle-center">
                <text text-style="Tiny" value="TS" color="$body" />
              </col>
              <col w="fill" gap="1" align="middle-left">
                <text text-style="Sym" value="TSLA" color="$phosphor" />
                <text text-style="Name" value="Tesla" color="$faint" />
              </col>
            </row>
            <text w="100" align="right" text-style="NumB" value="331.09" color="$phosphor" />
            <text w="92" align="right" text-style="Num" value="-8.44" color="$red" />
            <row w="88" align="middle-right">
              <row p="2 6" border="1 $red" align="middle-center">
                <text text-style="NumB" value="▼2.49%" color="$red" />
              </row>
            </row>
            <text w="84" align="right" text-style="Num" value="108.9M" color="$body" />
            <frame w="150" h="52" clip="true">
              <rect x="2" y="24" w="146" h="4" fill="$bg" />
              <rect x="2" y="24" w="18" h="4" fill="$red-track" />
              <rect x="117" y="21" w="2" h="10" fill="$faint" />
              <rect x="18" y="20" w="3" h="12" fill="$red" />
            </frame>
            <img
              w="120"
              h="26"
              src="https://gui.farm/tools/charts/line-chart.svg?data=0:3.1,1:2.8,2:2.9,3:2.2,4:1.9,5:2.0,6:1.1&amp;line=%23FF6152&amp;curve=smooth&amp;area=off&amp;points=hide&amp;grid=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=240&amp;height=52"
            />
          </row>
        </col>
        <!-- market breadth block -->
        <row w="960" gap="16" align="top-left">
          <!-- advancers / decliners -->
          <col w="fill" fill="$panel" border="2 $line-strong" p="16" gap="14" role="card" h="hug">
            <row w="440" align="middle-left">
              <text
                w="fill"
                text-style="Section"
                value="NYSE BREADTH"
                color="$phosphor"
                text-case="uppercase"
              />
              <text text-style="Tiny" value="14:32 ET" color="$faint" align="right" />
            </row>
            <frame w="300" h="14" clip="true">
              <rect x="0" y="0" w="181" h="14" fill="$cyan" />
              <rect x="181" y="0" w="110" h="14" fill="$red" />
              <rect x="291" y="0" w="9" h="14" fill="$faint" />
            </frame>
            <row w="440" gap="12" align="middle-left">
              <row w="fill" gap="7" align="middle-left">
                <rect w="12" h="12" fill="$cyan" />
                <col gap="1" align="middle-left">
                  <text text-style="NumB" value="312" color="$phosphor" />
                  <text text-style="Tiny" value="ADVANCING" color="$faint" />
                </col>
              </row>
              <row w="fill" gap="7" align="middle-left">
                <rect w="12" h="12" fill="$red" />
                <col gap="1" align="middle-left">
                  <text text-style="NumB" value="189" color="$phosphor" />
                  <text text-style="Tiny" value="DECLINING" color="$faint" />
                </col>
              </row>
              <row w="fill" gap="7" align="middle-left">
                <rect w="12" h="12" fill="$faint" />
                <col gap="1" align="middle-left">
                  <text text-style="NumB" value="15" color="$phosphor" />
                  <text text-style="Tiny" value="UNCHANGED" color="$faint" />
                </col>
              </row>
            </row>
            <line w="440" fill="$line" thickness="1" role="divider" />
            <row w="440" align="middle-left">
              <text w="fill" text-style="Mono" value="Adv/Decl ratio" color="$body" />
              <text text-style="NumB" value="1.65" color="$cyan" align="right" />
            </row>
            <row w="440" align="middle-left">
              <text w="fill" text-style="Mono" value="New highs / lows" color="$body" />
              <text text-style="NumB" value="48 / 12" color="$body" align="right" />
            </row>
          </col>
          <!-- sector heat -->
          <col w="fill" fill="$panel" border="2 $line-strong" p="16" gap="12" role="card">
            <row w="fill" align="middle-left">
              <text w="fill" text-style="Section" value="SECTOR HEAT" color="$phosphor" text-case="uppercase" />
              <text text-style="Tiny" value="% CHG" color="$faint" align="right" />
            </row>
            <col w="fill" gap="9">
              <!-- Technology +1.42 -->
              <row w="fill" gap="10" align="middle-left">
                <text w="108" text-style="Tiny" value="Technology" color="$body" />
                <frame w="220" h="12" clip="true">
                  <rect x="0" y="5" w="220" h="2" fill="$line" />
                  <rect x="110" y="0" w="1" h="12" fill="$line-strong" />
                  <rect x="110" y="1" w="110" h="10" fill="$cyan" />
                </frame>
                <text w="fill" align="right" text-style="Num" value="+1.42" color="$cyan" />
              </row>
              <!-- Consumer Disc. +0.96 -->
              <row w="fill" gap="10" align="middle-left">
                <text w="108" text-style="Tiny" value="Consumer Disc." color="$body" />
                <frame w="220" h="12" clip="true">
                  <rect x="0" y="5" w="220" h="2" fill="$line" />
                  <rect x="110" y="0" w="1" h="12" fill="$line-strong" />
                  <rect x="110" y="1" w="74" h="10" fill="$cyan" />
                </frame>
                <text w="fill" align="right" text-style="Num" value="+0.96" color="$cyan" />
              </row>
              <!-- Utilities +0.63 -->
              <row w="fill" gap="10" align="middle-left">
                <text w="108" text-style="Tiny" value="Utilities" color="$body" />
                <frame w="220" h="12" clip="true">
                  <rect x="0" y="5" w="220" h="2" fill="$line" />
                  <rect x="110" y="0" w="1" h="12" fill="$line-strong" />
                  <rect x="110" y="1" w="49" h="10" fill="$cyan" />
                </frame>
                <text w="fill" align="right" text-style="Num" value="+0.63" color="$cyan" />
              </row>
              <!-- Financials +0.31 -->
              <row w="fill" gap="10" align="middle-left">
                <text w="108" text-style="Tiny" value="Financials" color="$body" />
                <frame w="220" h="12" clip="true">
                  <rect x="0" y="5" w="220" h="2" fill="$line" />
                  <rect x="110" y="0" w="1" h="12" fill="$line-strong" />
                  <rect x="110" y="1" w="24" h="10" fill="$cyan" />
                </frame>
                <text w="fill" align="right" text-style="Num" value="+0.31" color="$cyan" />
              </row>
              <!-- Industrials +0.22 -->
              <row w="fill" gap="10" align="middle-left">
                <text w="108" text-style="Tiny" value="Industrials" color="$body" />
                <frame w="220" h="12" clip="true">
                  <rect x="0" y="5" w="220" h="2" fill="$line" />
                  <rect x="110" y="0" w="1" h="12" fill="$line-strong" />
                  <rect x="110" y="1" w="17" h="10" fill="$cyan" />
                </frame>
                <text w="fill" align="right" text-style="Num" value="+0.22" color="$cyan" />
              </row>
              <!-- Health Care -0.54 -->
              <row w="fill" gap="10" align="middle-left">
                <text w="108" text-style="Tiny" value="Health Care" color="$body" />
                <frame w="220" h="12" clip="true">
                  <rect x="0" y="5" w="220" h="2" fill="$line" />
                  <rect x="110" y="0" w="1" h="12" fill="$line-strong" />
                  <rect x="68" y="1" w="42" h="10" fill="$red" />
                </frame>
                <text w="fill" align="right" text-style="Num" value="-0.54" color="$red" />
              </row>
              <!-- Energy -0.88 -->
              <row w="fill" gap="10" align="middle-left">
                <text w="108" text-style="Tiny" value="Energy" color="$body" />
                <frame w="220" h="12" clip="true">
                  <rect x="0" y="5" w="220" h="2" fill="$line" />
                  <rect x="110" y="0" w="1" h="12" fill="$line-strong" />
                  <rect x="42" y="1" w="68" h="10" fill="$red" />
                </frame>
                <text w="fill" align="right" text-style="Num" value="-0.88" color="$red" />
              </row>
              <!-- Materials -1.10 -->
              <row w="fill" gap="10" align="middle-left">
                <text w="108" text-style="Tiny" value="Materials" color="$body" />
                <frame w="220" h="12" clip="true">
                  <rect x="0" y="5" w="220" h="2" fill="$line" />
                  <rect x="110" y="0" w="1" h="12" fill="$line-strong" />
                  <rect x="25" y="1" w="85" h="10" fill="$red" />
                </frame>
                <text w="fill" align="right" text-style="Num" value="-1.10" color="$red" />
              </row>
            </col>
          </col>
        </row>
      </col>
      <!-- ============ RIGHT RAIL: selected symbol detail ============ -->
      <col w="424" fill="$panel" border="2 $line-strong" role="card">
        <appearance>
          <fill type="color" value="#101416" />
          <effect type="drop-shadow" x="5" y="5" radius="0" spread="0" color="#050708" />
        </appearance>
        <!-- header -->
        <col w="424" p="16 16 14 16" gap="12" fill="$panel-2" border="0 0 1 0 $line-strong">
          <row w="392" align="middle-left">
            <row gap="10" align="middle-left">
              <col w="36" h="36" fill="$bg" border="1 $line-strong" align="middle-center">
                <text text-style="Sym" value="NV" color="$cyan" />
              </col>
              <col gap="2" align="middle-left">
                <text text-style="Sym" value="NVDA" color="$phosphor" />
                <text text-style="Name" value="NVIDIA Corp · NASDAQ" color="$faint" />
              </col>
            </row>
            <col w="fill" gap="2" align="middle-right">
              <text text-style="Hero" value="178.42" color="$phosphor" align="right" />
            </col>
          </row>
          <row w="392" gap="8" align="middle-left">
            <row p="3 8" fill="$cyan" align="middle-center">
              <text text-style="NumB" value="+4.15  ▲2.38%" color="$cyan-ink" />
            </row>
            <text w="fill" text-style="Mono" value="USD · real-time" color="$faint" align="right" />
          </row>
        </col>
        <!-- intraday chart -->
        <col w="424" p="14 16" gap="10">
          <row w="392" align="middle-left">
            <text w="fill" text-style="Label" value="INTRADAY · 1D" color="$faint" />
            <text text-style="Tiny" value="VWAP 176.90" color="$body" align="right" />
          </row>
          <img
            w="392"
            h="120"
            src="https://gui.farm/tools/charts/line-chart.svg?data=0:174.6,1:173.2,2:175.9,3:176.1,4:175.2,5:176.8,6:177.3,7:176.6,8:178.0,9:177.6,10:178.4&amp;line=%2334E1DC&amp;surface=dark&amp;curve=smooth&amp;area=on&amp;points=hide&amp;grid=show&amp;xlabels=hide&amp;ylabels=hide&amp;width=784&amp;height=240"
          />
          <!-- session range bar -->
          <col w="392" gap="6">
            <frame w="392" h="16" clip="true">
              <rect x="0" y="7" w="356" h="3" fill="$bg" />
              <rect x="0" y="7" w="294" h="3" fill="$cyan-track" />
              <rect x="114" y="3" w="2" h="11" fill="$faint" />
              <rect x="128" y="3" w="2" h="11" fill="$line-strong" />
              <rect x="294" y="2" w="3" h="13" fill="$cyan" />
            </frame>
            <row w="392" align="middle-left">
              <text w="fill" text-style="Tiny" value="LO 171.05" color="$faint" />
              <text text-style="Tiny" value="HI 179.90" color="$faint" align="right" />
            </row>
          </col>
        </col>
        <row w="424" p="0 16" align="middle-left">
          <line w="392" fill="$line" thickness="1" role="divider" />
        </row>
        <!-- key stats grid -->
        <col w="424" p="10 16 14 16">
          <grid w="392" cols="196 196" gap="0">
            <col w="196" p="8 0" gap="3" border="0 0 1 0 $line">
              <text text-style="Tiny" value="OPEN" color="$faint" />
              <text text-style="NumB" value="173.90" color="$phosphor" />
            </col>
            <col w="196" p="8 0 8 14" gap="3" border="0 0 1 0 $line">
              <text text-style="Tiny" value="PREV CLOSE" color="$faint" />
              <text text-style="NumB" value="174.27" color="$phosphor" />
            </col>
            <col w="196" p="8 0" gap="3" border="0 0 1 0 $line">
              <text text-style="Tiny" value="VOLUME" color="$faint" />
              <text text-style="NumB" value="182.4M" color="$phosphor" />
            </col>
            <col w="196" p="8 0 8 14" gap="3" border="0 0 1 0 $line">
              <text text-style="Tiny" value="AVG VOL (30D)" color="$faint" />
              <text text-style="NumB" value="214.9M" color="$phosphor" />
            </col>
            <col w="196" p="8 0" gap="3" border="0 0 1 0 $line">
              <text text-style="Tiny" value="MKT CAP" color="$faint" />
              <text text-style="NumB" value="4.36T" color="$phosphor" />
            </col>
            <col w="196" p="8 0 8 14" gap="3" border="0 0 1 0 $line">
              <text text-style="Tiny" value="P/E (TTM)" color="$faint" />
              <text text-style="NumB" value="58.4" color="$phosphor" />
            </col>
            <col w="196" p="8 0 0 0" gap="3">
              <text text-style="Tiny" value="52W RANGE" color="$faint" />
              <text text-style="NumB" value="108.13 - 184.40" color="$phosphor" />
            </col>
            <col w="196" p="8 0 0 14" gap="3">
              <text text-style="Tiny" value="BID x ASK" color="$faint" />
              <text text-style="NumB" value="178.40 x 178.44" color="$phosphor" />
            </col>
          </grid>
        </col>
        <!-- action bar -->
        <row w="424" p="14 16 16 16" gap="10" fill="$panel-2" border="1 0 0 0 $line-strong">
          <row w="fill" h="46" fill="$cyan" align="middle-center" role="button">
            <appearance>
              <fill type="color" value="#34E1DC" />
              <effect type="drop-shadow" x="3" y="3" radius="0" spread="0" color="#04211F" />
            </appearance>
            <text text-style="Section" value="BUY" color="$cyan-ink" />
          </row>
          <row w="fill" h="46" fill="$bg" border="2 $red" align="middle-center" role="button">
            <text text-style="Section" value="SELL" color="$red" />
          </row>
          <col w="46" h="46" fill="$bg" border="1 $line-strong" align="middle-center" role="button">
            <img src="https://api.iconify.design/lucide/bell-plus.svg?color=%23E8F2F0" w="18" h="18" />
          </col>
        </row>
      </col>
    </row>
    <!-- ================= STATUS BAR (last flow child) ================= -->
    <row
      w="1440"
      h="30"
      p="0 20"
      gap="16"
      align="middle-left"
      fill="$panel-2"
      border="2 0 0 0 $line-strong"
      role="toolbar"
    >
      <row gap="7" align="middle-left">
        <ellipse w="7" h="7" fill="$cyan" />
        <text text-style="Tiny" value="FEED CONNECTED · 4ms" color="$body" />
      </row>
      <rect w="1" h="14" fill="$line" />
      <text text-style="Tiny" value="NBBO REAL-TIME · CTA/UTP" color="$faint" />
      <rect w="1" h="14" fill="$line" />
      <text text-style="Tiny" value="LAST SYNC 14:32:07 ET" color="$faint" />
      <row w="fill" gap="16" align="middle-right">
        <text text-style="Tiny" value="▲ UP: CYAN" color="$cyan" />
        <text text-style="Tiny" value="▼ DOWN: RED" color="$red" />
        <text text-style="Tiny" value="TAPE v2.4" color="$faint" />
      </row>
    </row>
  </col>
</gui>
```