---
title: "Copperline — Weekly High Rollers"
platform: ios
slug: copperline-weekly-high-rollers
screens: ["leaderboard"]
domains: ["gaming"]
style: "art-deco"
fonts: ["Cinzel", "SF Pro Display"]
roles: ["top-navigation-bar", "button", "badge", "segmented-control", "card", "avatar", "divider", "table", "tab-bar"]
score: {clean: 100, consistent: 75, accessible: 77, comprehensible: 46}
url: https://gui.farm/ios/copperline-weekly-high-rollers
raw: https://gui.farm/ios/copperline-weekly-high-rollers/design.guix
download: https://gui.farm/ios/copperline-weekly-high-rollers.gui
---

# Copperline — Weekly High Rollers

An art-deco weekly winnings leaderboard for a 1920s-styled private card-club game, showing a top-three podium, your standing, and the ranked members list.

- **Live preview:** https://gui.farm/ios/copperline-weekly-high-rollers
- **Raw source:** https://gui.farm/ios/copperline-weekly-high-rollers/design.guix
- **Download (.gui):** https://gui.farm/ios/copperline-weekly-high-rollers.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Copperline — Weekly High Rollers">
  <tokens>
    <color name="bg" value="#0F0E12" />
    <color name="panel" value="#17151C" />
    <color name="panel2" value="#211C27" />
    <color name="ink" value="#F5EEDD" />
    <color name="muted" value="#B7A681" />
    <color name="gold" value="#E4B45C" />
    <color name="gold-bright" value="#F2C879" />
    <color name="on-gold" value="#241804" />
    <color name="oxblood" value="#8C2740" />
    <color name="oxblood-tint" value="#2A141A" />
    <color name="silver" value="#C9CDD2" />
    <color name="copper" value="#C0824A" />
    <color name="down" value="#E0805C" />
    <color name="gold-line" value="#6E5A34" />
    <color name="line" value="#2C2833" />
  </tokens>
  <fonts>
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
    <font family="Cinzel" source="google" weights="400 600 700 900" styles="normal" />
  </fonts>
  <styles>
    <text-style
      name="Wordmark"
      font-family="Cinzel"
      font-size="18"
      font-weight="700"
      line-height="22"
      letter-spacing="2"
    />
    <text-style
      name="Masthead"
      font-family="Cinzel"
      font-size="30"
      font-weight="900"
      line-height="34"
      letter-spacing="1"
    />
    <text-style
      name="RomanBig"
      font-family="Cinzel"
      font-size="26"
      font-weight="700"
      line-height="28"
      letter-spacing="1"
    />
    <text-style
      name="PodName"
      font-family="Cinzel"
      font-size="15"
      font-weight="600"
      line-height="19"
      letter-spacing="0.3"
    />
    <text-style name="Ordinal" font-family="Cinzel" font-size="17" font-weight="700" line-height="20" />
    <text-style name="YourBig" font-family="Cinzel" font-size="34" font-weight="900" line-height="36" />
    <text-style
      name="Init"
      font-family="Cinzel"
      font-size="13"
      font-weight="600"
      line-height="16"
      letter-spacing="0.5"
    />
    <text-style
      name="StatusTime"
      font-family="SF Pro Display"
      font-size="15"
      font-weight="600"
      line-height="18"
    />
    <text-style
      name="Eyebrow"
      font-family="SF Pro Display"
      font-size="11"
      font-weight="700"
      line-height="14"
      letter-spacing="1.4"
    />
    <text-style
      name="NavSub"
      font-family="SF Pro Display"
      font-size="9"
      font-weight="600"
      line-height="12"
      letter-spacing="2"
    />
    <text-style
      name="Label"
      font-family="SF Pro Display"
      font-size="13"
      font-weight="600"
      line-height="17"
      letter-spacing="0.3"
    />
    <text-style
      name="LabelSm"
      font-family="SF Pro Display"
      font-size="11"
      font-weight="700"
      line-height="14"
      letter-spacing="0.4"
    />
    <text-style name="Chips" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="19" />
    <text-style name="ChipsSm" font-family="SF Pro Display" font-size="12" font-weight="600" line-height="15" />
    <text-style name="Body" font-family="SF Pro Display" font-size="13" font-weight="400" line-height="18" />
    <text-style
      name="BtnLabel"
      font-family="SF Pro Display"
      font-size="15"
      font-weight="700"
      line-height="18"
      letter-spacing="0.6"
    />
    <text-style name="Trend" font-family="SF Pro Display" font-size="11" font-weight="700" line-height="14" />
    <text-style
      name="TabLabel"
      font-family="SF Pro Display"
      font-size="10"
      font-weight="600"
      line-height="13"
      letter-spacing="0.3"
    />
    <text-style
      name="SeasonBadge"
      font-family="SF Pro Display"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="1"
    />
  </styles>
  <col w="393" fill="$bg">
    <!-- status bar (device chrome, untagged) -->
    <row w="393" h="50" p="16 20 0 20" align="middle-left">
      <text w="fill" value="9:41" text-style="StatusTime" color="$ink" />
      <row gap="7" align="middle-right">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23F5EEDD" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23F5EEDD" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23F5EEDD" w="24" h="17" />
      </row>
    </row>
    <!-- top navigation -->
    <row
      w="393"
      h="56"
      p="0 14"
      gap="10"
      align="middle-left"
      fill="$bg"
      border-bottom="1 $gold-line"
      role="top-navigation-bar"
    >
      <col w="40" h="40" fill="$panel" border="1 $gold-line" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%23E4B45C" w="20" h="20" />
      </col>
      <col w="fill" gap="2" align="middle-center">
        <text value="COPPERLINE" text-style="Wordmark" color="$gold" align="center" />
        <text value="SOCIAL CLUB · EST 1924" text-style="NavSub" color="$muted" align="center" />
      </col>
      <col w="40" h="40" fill="$panel" border="1 $gold-line" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/menu.svg?color=%23E4B45C" w="20" h="20" />
      </col>
    </row>
    <!-- masthead: verified art-deco cinema facade photo (texture only, no text over it) -->
    <frame
      w="393"
      h="300"
      clip="true"
      border-bottom="3 $gold"
      border-top="3 $gold"
      border-align="outline"
    >
      <img
        src="https://images.unsplash.com/photo-1780248346974-2f8960a5c69b?w=1200&amp;q=80&amp;auto=format&amp;fit=crop"
        w="393"
        h="300"
        fit="cover"
      />
      <rect x="0" y="0" w="393" h="300" fill="#0B0A0F59" />
    </frame>
    <!-- title block (all text on solid ground) -->
    <col w="393" p="20 16 6 16" gap="12" fill="$bg" align="middle-center">
      <text value="THE COPPERLINE HIGH TABLE" text-style="Eyebrow" color="$gold" align="center" />
      <text value="HIGH ROLLERS" text-style="Masthead" color="$ink" align="center" />
      <row role="badge" fill="$oxblood" border="1 $gold-line" p="5 12" gap="6" align="middle-center">
        <img src="https://api.iconify.design/lucide/clock.svg?color=%23F5EEDD" w="12" h="12" />
        <text value="VERMILLION SEASON · 4 DAYS LEFT" text-style="SeasonBadge" color="$ink" />
      </row>
      <!-- deco skyline rule ornament -->
      <row gap="3" align="bottom-center" pt="2">
        <rect w="3" h="8" fill="$gold-line" />
        <rect w="3" h="14" fill="$gold" />
        <rect w="3" h="20" fill="$gold" />
        <rect w="3" h="14" fill="$gold" />
        <rect w="3" h="8" fill="$gold-line" />
      </row>
    </col>
    <!-- body -->
    <col w="393" p="10 16 22 16" gap="16">
      <!-- segmented control -->
      <row
        role="segmented-control"
        w="361"
        h="44"
        fill="$panel"
        border="1 $gold-line"
        p="3"
        gap="3"
        align="middle-center"
      >
        <row w="fill" h="fill" fill="$gold" align="middle-center">
          <text value="This Week" text-style="Label" color="$on-gold" />
        </row>
        <row w="fill" h="fill" align="middle-center">
          <text value="All-Time" text-style="Label" color="$muted" />
        </row>
      </row>
      <!-- podium card -->
      <col role="card" w="361" fill="$panel" border="1 $gold-line" p="16 16 18 16" gap="14">
        <text w="329" value="THE PODIUM" text-style="Eyebrow" color="$muted" align="center" />
        <row w="329" gap="7" align="bottom-center">
          <!-- 2nd -->
          <col w="101" gap="7" align="middle-center">
            <row
              role="avatar"
              w="52"
              h="52"
              radius="26"
              fill="$panel2"
              border="1 $silver"
              align="middle-center"
            >
              <text value="AS" text-style="Init" color="$silver" />
            </row>
            <text w="101" value="Auggie Salcedo" text-style="PodName" color="$ink" align="center" />
            <text w="101" value="172,405" text-style="ChipsSm" color="$muted" align="center" />
            <col w="88" h="140" fill="$panel2" border="1 $silver" p="12 0 0 0" gap="2" align="top-center">
              <text value="II" text-style="RomanBig" color="$silver" align="center" />
              <text value="SILVER" text-style="NavSub" color="$muted" align="center" />
            </col>
          </col>
          <!-- 1st -->
          <col w="113" gap="6" align="middle-center">
            <img src="https://api.iconify.design/lucide/crown.svg?color=%23E4B45C" w="22" h="22" />
            <row role="avatar" w="64" h="64" radius="32" fill="$panel2" border="2 $gold" align="middle-center">
              <text value="VR" text-style="PodName" color="$gold" />
            </row>
            <text w="113" value="Vivienne Roux" text-style="PodName" color="$ink" align="center" />
            <text w="113" value="184,920" text-style="ChipsSm" color="$gold" align="center" />
            <col w="100" h="150" fill="$oxblood-tint" border="1 $gold" p="14 0 0 0" gap="2" align="top-center">
              <text value="I" text-style="RomanBig" color="$gold" align="center" />
              <text value="HOUSE LEADER" text-style="NavSub" color="$gold" align="center" />
            </col>
          </col>
          <!-- 3rd -->
          <col w="101" gap="7" align="middle-center">
            <row
              role="avatar"
              w="52"
              h="52"
              radius="26"
              fill="$panel2"
              border="1 $copper"
              align="middle-center"
            >
              <text value="MF" text-style="Init" color="$copper" />
            </row>
            <text w="101" value="Mabel Fong" text-style="PodName" color="$ink" align="center" />
            <text w="101" value="158,640" text-style="ChipsSm" color="$muted" align="center" />
            <col w="88" h="129" fill="$panel2" border="1 $copper" p="12 0 0 0" gap="2" align="top-center">
              <text value="III" text-style="RomanBig" color="$copper" align="center" />
              <text value="BRONZE" text-style="NavSub" color="$muted" align="center" />
            </col>
          </col>
        </row>
      </col>
      <!-- your standing card -->
      <col role="card" w="361" fill="$panel2" border="1 $gold" p="16" gap="14">
        <row w="329" gap="12" align="middle-left">
          <row role="avatar" w="48" h="48" radius="24" fill="$oxblood" border="1 $gold" align="middle-center">
            <text value="CV" text-style="Init" color="$gold" />
          </row>
          <col w="fill" gap="3" align="top-left">
            <text value="YOUR STANDING" text-style="Eyebrow" color="$muted" />
            <row gap="8" align="bottom-left">
              <text value="#4" text-style="YourBig" color="$gold" />
              <col h="30" align="bottom-left">
                <text value="of 312 members" text-style="Body" color="$muted" />
              </col>
            </row>
          </col>
          <col gap="7" align="middle-right">
            <row role="badge" fill="$oxblood-tint" border="1 $gold-line" p="4 9" gap="4" align="middle-center">
              <img src="https://api.iconify.design/lucide/arrow-up.svg?color=%23E4B45C" w="13" h="13" />
              <text value="UP 3" text-style="Trend" color="$gold" />
            </row>
            <text value="142,310 chips" text-style="Chips" color="$ink" align="right" />
          </col>
        </row>
        <line w="329" fill="$gold-line" thickness="1" role="divider" />
        <col w="329" gap="8">
          <row w="329" gap="8" align="middle-left">
            <text w="fill" value="CLIMB TO BRONZE" text-style="Eyebrow" color="$muted" />
            <text value="16,330 chips behind" text-style="LabelSm" color="$gold" align="right" />
          </row>
          <frame w="329" h="8" clip="true">
            <rect x="0" y="0" w="329" h="8" fill="$bg" />
            <rect x="0" y="0" w="253" h="8" fill="$gold" />
          </frame>
        </col>
      </col>
      <!-- ranking list -->
      <col w="361" gap="10">
        <row w="361" p="0 14" gap="10" align="middle-left">
          <text w="28" value="#" text-style="Eyebrow" color="$muted" align="center" />
          <text w="fill" value="MEMBER" text-style="Eyebrow" color="$muted" />
          <text w="66" value="CHIPS" text-style="Eyebrow" color="$muted" align="right" />
        </row>
        <col role="table" w="361" fill="$panel" border="1 $gold-line" clip="true">
          <!-- rank 1 -->
          <row w="fill" h="64" p="0 14" gap="10" align="middle-left">
            <col w="28" h="28" fill="$gold" align="middle-center">
              <text value="1" text-style="LabelSm" color="$on-gold" />
            </col>
            <row
              role="avatar"
              w="38"
              h="38"
              radius="19"
              fill="$panel2"
              border="1 $gold-line"
              align="middle-center"
            >
              <text value="VR" text-style="Init" color="$gold" />
            </row>
            <col w="171" gap="6">
              <row w="171" gap="8" align="middle-left">
                <text w="fill" value="Vivienne Roux" text-style="PodName" color="$ink" />
                <row gap="3" align="middle-center">
                  <img src="https://api.iconify.design/lucide/arrow-up.svg?color=%23E4B45C" w="12" h="12" />
                  <text value="2" text-style="Trend" color="$gold" />
                </row>
              </row>
              <frame w="171" h="6" clip="true">
                <rect x="0" y="0" w="171" h="6" fill="$panel2" />
                <rect x="0" y="0" w="171" h="6" fill="$gold" />
              </frame>
            </col>
            <text w="66" value="184,920" text-style="Chips" color="$ink" align="right" />
          </row>
          <line w="fill" fill="$line" thickness="1" role="divider" />
          <!-- rank 2 -->
          <row w="fill" h="64" p="0 14" gap="10" align="middle-left">
            <col w="28" h="28" fill="$silver" align="middle-center">
              <text value="2" text-style="LabelSm" color="$on-gold" />
            </col>
            <row
              role="avatar"
              w="38"
              h="38"
              radius="19"
              fill="$panel2"
              border="1 $gold-line"
              align="middle-center"
            >
              <text value="AS" text-style="Init" color="$silver" />
            </row>
            <col w="171" gap="6">
              <row w="171" gap="8" align="middle-left">
                <text w="fill" value="Auggie Salcedo" text-style="PodName" color="$ink" />
                <row gap="3" align="middle-center">
                  <img src="https://api.iconify.design/lucide/arrow-down.svg?color=%23E0805C" w="12" h="12" />
                  <text value="1" text-style="Trend" color="$down" />
                </row>
              </row>
              <frame w="171" h="6" clip="true">
                <rect x="0" y="0" w="171" h="6" fill="$panel2" />
                <rect x="0" y="0" w="159" h="6" fill="$gold" />
              </frame>
            </col>
            <text w="66" value="172,405" text-style="Chips" color="$ink" align="right" />
          </row>
          <line w="fill" fill="$line" thickness="1" role="divider" />
          <!-- rank 3 -->
          <row w="fill" h="64" p="0 14" gap="10" align="middle-left">
            <col w="28" h="28" fill="$copper" align="middle-center">
              <text value="3" text-style="LabelSm" color="$on-gold" />
            </col>
            <row
              role="avatar"
              w="38"
              h="38"
              radius="19"
              fill="$panel2"
              border="1 $gold-line"
              align="middle-center"
            >
              <text value="MF" text-style="Init" color="$copper" />
            </row>
            <col w="171" gap="6">
              <row w="171" gap="8" align="middle-left">
                <text w="fill" value="Mabel Fong" text-style="PodName" color="$ink" />
                <row gap="3" align="middle-center">
                  <img src="https://api.iconify.design/lucide/arrow-up.svg?color=%23E4B45C" w="12" h="12" />
                  <text value="1" text-style="Trend" color="$gold" />
                </row>
              </row>
              <frame w="171" h="6" clip="true">
                <rect x="0" y="0" w="171" h="6" fill="$panel2" />
                <rect x="0" y="0" w="147" h="6" fill="$gold" />
              </frame>
            </col>
            <text w="66" value="158,640" text-style="Chips" color="$ink" align="right" />
          </row>
          <line w="fill" fill="$line" thickness="1" role="divider" />
          <!-- rank 4 — YOU -->
          <row w="fill" h="64" p="0 14" gap="10" fill="$oxblood-tint" align="middle-left">
            <text w="28" value="4" text-style="Ordinal" color="$gold" align="center" />
            <row role="avatar" w="38" h="38" radius="19" fill="$oxblood" border="1 $gold" align="middle-center">
              <text value="CV" text-style="Init" color="$gold" />
            </row>
            <col w="171" gap="6">
              <row w="171" gap="8" align="middle-left">
                <row w="fill" gap="6" align="middle-left">
                  <text value="Cassius Vane" text-style="PodName" color="$ink" />
                  <text value="YOU" text-style="Trend" color="$gold" />
                </row>
                <row gap="3" align="middle-center">
                  <img src="https://api.iconify.design/lucide/arrow-up.svg?color=%23E4B45C" w="12" h="12" />
                  <text value="3" text-style="Trend" color="$gold" />
                </row>
              </row>
              <frame w="171" h="6" clip="true">
                <rect x="0" y="0" w="171" h="6" fill="$bg" />
                <rect x="0" y="0" w="132" h="6" fill="$gold-bright" />
              </frame>
            </col>
            <text w="66" value="142,310" text-style="Chips" color="$ink" align="right" />
          </row>
          <line w="fill" fill="$line" thickness="1" role="divider" />
          <!-- rank 5 -->
          <row w="fill" h="64" p="0 14" gap="10" align="middle-left">
            <text w="28" value="5" text-style="Ordinal" color="$muted" align="center" />
            <row
              role="avatar"
              w="38"
              h="38"
              radius="19"
              fill="$panel2"
              border="1 $gold-line"
              align="middle-center"
            >
              <text value="DA" text-style="Init" color="$muted" />
            </row>
            <col w="171" gap="6">
              <row w="171" gap="8" align="middle-left">
                <text w="fill" value="Dorian Athas" text-style="PodName" color="$ink" />
                <row gap="3" align="middle-center">
                  <img src="https://api.iconify.design/lucide/arrow-down.svg?color=%23E0805C" w="12" h="12" />
                  <text value="2" text-style="Trend" color="$down" />
                </row>
              </row>
              <frame w="171" h="6" clip="true">
                <rect x="0" y="0" w="171" h="6" fill="$panel2" />
                <rect x="0" y="0" w="128" h="6" fill="$gold" />
              </frame>
            </col>
            <text w="66" value="138,775" text-style="Chips" color="$ink" align="right" />
          </row>
          <line w="fill" fill="$line" thickness="1" role="divider" />
          <!-- rank 6 -->
          <row w="fill" h="64" p="0 14" gap="10" align="middle-left">
            <text w="28" value="6" text-style="Ordinal" color="$muted" align="center" />
            <row
              role="avatar"
              w="38"
              h="38"
              radius="19"
              fill="$panel2"
              border="1 $gold-line"
              align="middle-center"
            >
              <text value="IS" text-style="Init" color="$muted" />
            </row>
            <col w="171" gap="6">
              <row w="171" gap="8" align="middle-left">
                <text w="fill" value="Ingrid Sølvberg" text-style="PodName" color="$ink" />
                <row gap="3" align="middle-center">
                  <img src="https://api.iconify.design/lucide/arrow-up.svg?color=%23E4B45C" w="12" h="12" />
                  <text value="1" text-style="Trend" color="$gold" />
                </row>
              </row>
              <frame w="171" h="6" clip="true">
                <rect x="0" y="0" w="171" h="6" fill="$panel2" />
                <rect x="0" y="0" w="112" h="6" fill="$gold" />
              </frame>
            </col>
            <text w="66" value="121,540" text-style="Chips" color="$ink" align="right" />
          </row>
          <line w="fill" fill="$line" thickness="1" role="divider" />
          <!-- rank 7 -->
          <row w="fill" h="64" p="0 14" gap="10" align="middle-left">
            <text w="28" value="7" text-style="Ordinal" color="$muted" align="center" />
            <row
              role="avatar"
              w="38"
              h="38"
              radius="19"
              fill="$panel2"
              border="1 $gold-line"
              align="middle-center"
            >
              <text value="TN" text-style="Init" color="$muted" />
            </row>
            <col w="171" gap="6">
              <row w="171" gap="8" align="middle-left">
                <text w="fill" value="Theo Nakamura" text-style="PodName" color="$ink" />
                <img src="https://api.iconify.design/lucide/minus.svg?color=%23B7A681" w="12" h="12" />
              </row>
              <frame w="171" h="6" clip="true">
                <rect x="0" y="0" w="171" h="6" fill="$panel2" />
                <rect x="0" y="0" w="102" h="6" fill="$gold" />
              </frame>
            </col>
            <text w="66" value="109,880" text-style="Chips" color="$ink" align="right" />
          </row>
          <line w="fill" fill="$line" thickness="1" role="divider" />
          <!-- rank 8 -->
          <row w="fill" h="64" p="0 14" gap="10" align="middle-left">
            <text w="28" value="8" text-style="Ordinal" color="$muted" align="center" />
            <row
              role="avatar"
              w="38"
              h="38"
              radius="19"
              fill="$panel2"
              border="1 $gold-line"
              align="middle-center"
            >
              <text value="OL" text-style="Init" color="$muted" />
            </row>
            <col w="171" gap="6">
              <row w="171" gap="8" align="middle-left">
                <text w="fill" value="Odette Lamarr" text-style="PodName" color="$ink" />
                <row gap="3" align="middle-center">
                  <img src="https://api.iconify.design/lucide/arrow-up.svg?color=%23E4B45C" w="12" h="12" />
                  <text value="4" text-style="Trend" color="$gold" />
                </row>
              </row>
              <frame w="171" h="6" clip="true">
                <rect x="0" y="0" w="171" h="6" fill="$panel2" />
                <rect x="0" y="0" w="89" h="6" fill="$gold" />
              </frame>
            </col>
            <text w="66" value="96,215" text-style="Chips" color="$ink" align="right" />
          </row>
        </col>
      </col>
      <!-- primary action -->
      <row role="button" w="361" h="56" fill="$gold" p="0 18" gap="10" align="middle-left">
        <img src="https://api.iconify.design/lucide/armchair.svg?color=%23241804" w="20" h="20" />
        <text value="TAKE A SEAT" text-style="BtnLabel" color="$on-gold" />
        <text w="fill" value="TONIGHT · 9:00 PM" text-style="BtnLabel" color="$on-gold" align="right" />
      </row>
    </col>
    <!-- tab bar (fixed bottom, last flow child before device chrome) -->
    <row
      role="tab-bar"
      w="fill"
      h="80"
      fill="$panel"
      border-top="1 $gold-line"
      p="10 0 16 0"
      gap="auto"
      align="top-center"
    >
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" align="middle-center">
          <img src="https://api.iconify.design/lucide/layout-grid.svg?color=%23B7A681" w="22" h="22" />
        </row>
        <text value="Tables" text-style="TabLabel" color="$muted" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" fill="$oxblood-tint" border="1 $gold-line" align="middle-center">
          <img src="https://api.iconify.design/lucide/trophy.svg?color=%23E4B45C" w="22" h="22" />
        </row>
        <text value="Rankings" text-style="TabLabel" color="$gold" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" align="middle-center">
          <img src="https://api.iconify.design/lucide/wallet.svg?color=%23B7A681" w="22" h="22" />
        </row>
        <text value="Wallet" text-style="TabLabel" color="$muted" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" align="middle-center">
          <img src="https://api.iconify.design/lucide/user.svg?color=%23B7A681" w="22" h="22" />
        </row>
        <text value="Profile" text-style="TabLabel" color="$muted" />
      </col>
    </row>
    <!-- home indicator (device chrome, untagged) -->
    <row w="393" h="24" align="middle-center">
      <rect w="140" h="5" radius="3" fill="$gold-line" />
    </row>
  </col>
</gui>
```