---
title: "Harbour Championship - Promotion Race Table"
platform: ios
slug: harbour-championship-promotion-race-table
screens: ["leaderboard"]
domains: []
style: "glassmorphism"
fonts: ["SF Pro Display", "Oswald"]
roles: ["top-navigation-bar", "button", "segmented-control", "card", "badge", "divider", "banner", "tab-bar"]
score: {clean: 100, consistent: 71, accessible: 43, comprehensible: 23}
url: https://gui.farm/ios/harbour-championship-promotion-race-table
raw: https://gui.farm/ios/harbour-championship-promotion-race-table/design.guix
download: https://gui.farm/ios/harbour-championship-promotion-race-table.gui
---

# Harbour Championship - Promotion Race Table

A dark glassmorphism iOS football league table for a second-division promotion race, with a top-four points-bar race, a 12-club standings table showing played, W-D-L, goal difference and points across automatic-promotion, play-off and relegation zones, the user's followed club highlighted, plus its next fixture.

- **Live preview:** https://gui.farm/ios/harbour-championship-promotion-race-table
- **Raw source:** https://gui.farm/ios/harbour-championship-promotion-race-table/design.guix
- **Download (.gui):** https://gui.farm/ios/harbour-championship-promotion-race-table.gui

## Source (design.guix)

```xml
<?xml version="1.0" encoding="UTF-8"?>
<gui version="0.2" name="Harbour Championship - Promotion Race Table">
  <tokens>
    <color name="ink" value="#06090E" />
    <color name="text" value="#F1F5FA" />
    <color name="text-2" value="#B4C0CE" />
    <color name="text-3" value="#8B96A4" />
    <color name="glass" value="#FFFFFF0F" />
    <color name="glass-2" value="#FFFFFF1A" />
    <color name="glass-line" value="#FFFFFF2B" />
    <color name="glass-line-soft" value="#FFFFFF14" />
    <color name="track" value="#FFFFFF12" />
    <color name="azure" value="#2E9BFF" />
    <color name="azure-ink" value="#031326" />
    <color name="azure-text" value="#7CC0FF" />
    <color name="azure-soft" value="#2E9BFF1F" />
    <color name="azure-tint" value="#2E9BFF14" />
    <color name="sky" value="#5AB0F0" />
    <color name="sky-tint" value="#5AB0F012" />
    <color name="red" value="#F0736F" />
    <color name="red-tint" value="#F0736F14" />
    <color name="green" value="#4CD08E" />
    <color name="mid-tint" value="#FFFFFF07" />
    <number name="r-card" value="20" />
    <number name="r-pill" value="999" />
    <number name="r-sm" value="12" />
    <number name="r-bar" value="4" />
  </tokens>

  <fonts>
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
    <font family="Oswald" source="google" weights="500 600 700" styles="normal" />
  </fonts>

  <styles>
    <text-style name="Clock" font-family="SF Pro Display" font-size="14" font-weight="600" line-height="18" />
    <text-style name="NavTitle" font-family="Oswald" font-size="18" font-weight="600" line-height="20" letter-spacing="0.4" />
    <text-style name="NavSub" font-family="SF Pro Display" font-size="10" font-weight="700" line-height="13" letter-spacing="0.6" />
    <text-style name="Pill" font-family="SF Pro Display" font-size="10" font-weight="700" line-height="12" letter-spacing="0.6" />
    <text-style name="HeroTitle" font-family="Oswald" font-size="27" font-weight="700" line-height="29" letter-spacing="0.3" />
    <text-style name="HeroSub" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Seg" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="16" />
    <text-style name="CardH" font-family="Oswald" font-size="14" font-weight="600" line-height="17" letter-spacing="0.8" />
    <text-style name="Badge" font-family="SF Pro Display" font-size="10" font-weight="700" line-height="12" letter-spacing="0.5" />
    <text-style name="BarName" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="16" />
    <text-style name="BarPts" font-family="Oswald" font-size="16" font-weight="600" line-height="18" />
    <text-style name="Note" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
    <text-style name="ZoneLabel" font-family="SF Pro Display" font-size="10" font-weight="700" line-height="12" letter-spacing="0.8" />
    <text-style name="ColLabel" font-family="SF Pro Display" font-size="10" font-weight="700" line-height="12" letter-spacing="0.4" />
    <text-style name="Pos" font-family="Oswald" font-size="15" font-weight="600" line-height="17" />
    <text-style name="Mono" font-family="Oswald" font-size="13" font-weight="700" line-height="15" letter-spacing="0.3" />
    <text-style name="Team" font-family="SF Pro Display" font-size="14" font-weight="600" line-height="17" />
    <text-style name="TeamB" font-family="SF Pro Display" font-size="14" font-weight="700" line-height="17" />
    <text-style name="Stat" font-family="Oswald" font-size="14" font-weight="500" line-height="16" />
    <text-style name="Pts" font-family="Oswald" font-size="16" font-weight="600" line-height="18" />
    <text-style name="Legend" font-family="SF Pro Display" font-size="11" font-weight="500" line-height="14" />
    <text-style name="BannerKick" font-family="SF Pro Display" font-size="10" font-weight="700" line-height="12" letter-spacing="1.0" />
    <text-style name="BannerBody" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="17" />
    <text-style name="TabLabel" font-family="SF Pro Display" font-size="10" font-weight="600" line-height="12" />
  </styles>

  <col w="393" fill="linear-gradient(180deg, #0B1420 0%, #0A0F17 55%, #06090E 100%)">

    <!-- status bar (device chrome, untagged) -->
    <row w="fill" h="24" p="0 22" gap="auto" align="middle-center">
      <text text-style="Clock" value="9:41" color="$text" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal-high.svg?color=%23F1F5FA" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23F1F5FA" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23F1F5FA" w="20" h="20" />
      </row>
    </row>

    <!-- top navigation -->
    <row role="top-navigation-bar" w="fill" h="52" p="0 12" gap="auto" align="middle-center">
      <row role="button" w="38" h="38" radius="$r-pill" fill="$glass" border="1 $glass-line-soft" align="middle-center">
        <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%23F1F5FA" w="20" h="20" />
      </row>
      <col gap="2" align="top-center">
        <text text-style="NavTitle" value="Harbour Championship" color="$text" align="center" />
        <text text-style="NavSub" value="MATCHWEEK 30 - TABLE" color="$azure-text" align="center" />
      </col>
      <row role="button" w="38" h="38" radius="$r-pill" fill="$azure-soft" border="1 $azure" align="middle-center">
        <img src="https://api.iconify.design/lucide/star.svg?color=%232E9BFF" w="18" h="18" />
      </row>
    </row>

    <!-- hero: real stadium-at-night photo + legibility scrim -->
    <frame w="393" h="158" clip="true">
      <img x="0" y="0" w="393" h="158" fit="cover"
        src="https://images.unsplash.com/photo-1652541090220-c9a0d15edbe4?w=786&amp;h=316&amp;fit=crop&amp;q=80&amp;auto=format" />
      <rect x="0" y="0" w="393" h="158"
        fill="linear-gradient(180deg, #0A0F1733 0%, #0A0F17AB 60%, #0A0F17 100%)" />
      <row x="16" y="16" gap="8" align="middle-left">
        <row h="26" p="0 10" radius="$r-pill" gap="6" align="middle-center">
          <appearance>
            <fill type="color" value="#0A0F17A6" />
            <border color="$glass-line" w="1" />
            <effect type="background-blur" radius="18" />
          </appearance>
          <img src="https://api.iconify.design/lucide/calendar.svg?color=%237CC0FF" w="12" h="12" />
          <text text-style="Pill" value="2025/26 SEASON" color="$text" />
        </row>
        <row h="26" p="0 10" radius="$r-pill" gap="6" fill="$azure" align="middle-center">
          <img src="https://api.iconify.design/lucide/flag.svg?color=%23031326" w="12" h="12" />
          <text text-style="Pill" value="3 MATCHES LEFT" color="$azure-ink" />
        </row>
      </row>
      <col x="16" y="98" gap="4" align="top-left">
        <text text-style="HeroTitle" value="PROMOTION RACE" color="$text" />
        <text text-style="HeroSub" value="Top 2 go up automatically, 3rd to 6th enter the play-offs." color="$text-2" />
      </col>
    </frame>

    <col w="fill" p="14 16 20 16" gap="12">

      <!-- segmented control -->
      <row role="segmented-control" w="fill" h="40" radius="$r-pill" p="3" gap="0" fill="$glass" border="1 $glass-line-soft" align="middle-center">
        <row w="fill" h="fill" radius="$r-pill" fill="$azure" align="middle-center">
          <text text-style="Seg" value="Table" color="$azure-ink" />
        </row>
        <row w="fill" h="fill" align="middle-center">
          <text text-style="Seg" value="Fixtures" color="$text-2" />
        </row>
        <row w="fill" h="fill" align="middle-center">
          <text text-style="Seg" value="Scorers" color="$text-2" />
        </row>
      </row>

      <!-- promotion race card: bar widths encode points at 3.0 px/pt on a 198px track -->
      <col role="card" w="fill" radius="$r-card" p="16" gap="13" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="30" />
        </appearance>
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="CardH" value="PROMOTION RACE" color="$text" />
          <row role="badge" h="22" radius="$r-pill" p="0 9" gap="5" fill="$azure-soft" align="middle-center">
            <img src="https://api.iconify.design/lucide/trophy.svg?color=%237CC0FF" w="12" h="12" />
            <text text-style="Badge" value="AUTO: TOP 2" color="$azure-text" />
          </row>
        </row>

        <!-- Ashford Vale 66 -> 198 -->
        <row w="fill" gap="8" align="middle-center">
          <text w="80" text-style="BarName" value="Ashford Vale" color="$text" />
          <frame w="198" h="8" radius="$r-bar" clip="true">
            <rect x="0" y="0" w="198" h="8" fill="$track" />
            <rect x="0" y="0" w="198" h="8" fill="$azure" />
          </frame>
          <text w="26" text-style="BarPts" value="66" color="$text" align="right" />
        </row>
        <!-- Portbury AFC 62 -> 186 -->
        <row w="fill" gap="8" align="middle-center">
          <text w="80" text-style="BarName" value="Portbury AFC" color="$text" />
          <frame w="198" h="8" radius="$r-bar" clip="true">
            <rect x="0" y="0" w="198" h="8" fill="$track" />
            <rect x="0" y="0" w="186" h="8" fill="$azure" />
          </frame>
          <text w="26" text-style="BarPts" value="62" color="$text" align="right" />
        </row>
        <!-- Kingsmoor City 58 -> 174 -->
        <row w="fill" gap="8" align="middle-center">
          <text w="80" text-style="BarName" value="Kingsmoor City" color="$text" />
          <frame w="198" h="8" radius="$r-bar" clip="true">
            <rect x="0" y="0" w="198" h="8" fill="$track" />
            <rect x="0" y="0" w="174" h="8" fill="$sky" />
          </frame>
          <text w="26" text-style="BarPts" value="58" color="$text" align="right" />
        </row>
        <!-- Selby Harriers 54 -> 162 (followed) -->
        <row w="fill" gap="8" align="middle-center">
          <row w="80" gap="5" align="middle-center">
            <text text-style="BarName" value="Selby Harriers" color="$azure-text" />
          </row>
          <frame w="198" h="8" radius="$r-bar" clip="true">
            <rect x="0" y="0" w="198" h="8" fill="$track" />
            <rect x="0" y="0" w="162" h="8" fill="$sky" />
          </frame>
          <text w="26" text-style="BarPts" value="54" color="$azure-text" align="right" />
        </row>

        <line w="fill" fill="$glass-line-soft" thickness="1" role="divider" />
        <text text-style="Note" value="Ashford Vale lead by 4 points with 3 to play, Selby sit 3 points inside the play-offs." color="$text-3" />
      </col>

      <!-- full standings -->
      <col role="card" w="fill" radius="$r-card" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="30" />
        </appearance>

        <!-- column header -->
        <row w="fill" h="34" gap="4" p="0 12 0 10" align="middle-center">
          <rect w="4" h="34" fill="#00000000" />
          <text w="66" text-style="ColLabel" value="#" color="$text-3" />
          <text w="fill" text-style="ColLabel" value="CLUB" color="$text-3" />
          <text w="20" text-style="ColLabel" value="PL" color="$text-3" align="right" />
          <text w="18" text-style="ColLabel" value="W" color="$text-3" align="right" />
          <text w="18" text-style="ColLabel" value="D" color="$text-3" align="right" />
          <text w="18" text-style="ColLabel" value="L" color="$text-3" align="right" />
          <text w="30" text-style="ColLabel" value="GD" color="$text-3" align="right" />
          <text w="30" text-style="ColLabel" value="PTS" color="$text-3" align="right" />
        </row>
        <line w="fill" fill="$glass-line-soft" thickness="1" role="divider" />

        <!-- zone: automatic promotion -->
        <row w="fill" h="24" p="0 14" gap="7" fill="$azure-tint" align="middle-center">
          <rect w="6" h="6" radius="2" fill="$azure" />
          <text text-style="ZoneLabel" value="AUTOMATIC PROMOTION" color="$azure-text" />
          <text w="fill" text-style="ZoneLabel" value="TOP 2" color="$text-3" align="right" />
        </row>

        <!-- 1 Ashford Vale -->
        <row w="fill" h="52" gap="0" align="middle-left">
          <rect w="4" h="52" fill="$azure" />
          <row w="fill" h="52" gap="4" p="0 12 0 10" align="middle-center">
            <row w="28" gap="3" align="middle-left">
              <img src="https://api.iconify.design/lucide/minus.svg?color=%238B96A4" w="9" h="9" />
              <text text-style="Pos" value="1" color="$text" />
            </row>
            <col w="30" h="30" radius="$r-pill" fill="$glass-2" border="1 $glass-line" align="middle-center">
              <text text-style="Mono" value="AV" color="$text" />
            </col>
            <text w="fill" text-style="Team" value="Ashford Vale" color="$text" />
            <text w="20" text-style="Stat" value="30" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="20" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="6" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="4" color="$text-2" align="right" />
            <text w="30" text-style="Stat" value="+38" color="$green" align="right" />
            <text w="30" text-style="Pts" value="66" color="$text" align="right" />
          </row>
        </row>
        <line w="fill" fill="$glass-line-soft" thickness="1" role="divider" />

        <!-- 2 Portbury AFC -->
        <row w="fill" h="52" gap="0" align="middle-left">
          <rect w="4" h="52" fill="$azure" />
          <row w="fill" h="52" gap="4" p="0 12 0 10" align="middle-center">
            <row w="28" gap="3" align="middle-left">
              <img src="https://api.iconify.design/lucide/chevron-up.svg?color=%234CD08E" w="9" h="9" />
              <text text-style="Pos" value="2" color="$text" />
            </row>
            <col w="30" h="30" radius="$r-pill" fill="$glass-2" border="1 $glass-line" align="middle-center">
              <text text-style="Mono" value="PA" color="$text" />
            </col>
            <text w="fill" text-style="Team" value="Portbury AFC" color="$text" />
            <text w="20" text-style="Stat" value="30" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="19" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="5" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="6" color="$text-2" align="right" />
            <text w="30" text-style="Stat" value="+31" color="$green" align="right" />
            <text w="30" text-style="Pts" value="62" color="$text" align="right" />
          </row>
        </row>

        <!-- zone: play-offs -->
        <row w="fill" h="24" p="0 14" gap="7" fill="$sky-tint" align="middle-center">
          <rect w="6" h="6" radius="2" fill="$sky" />
          <text text-style="ZoneLabel" value="PLAY-OFF PLACES" color="$sky" />
          <text w="fill" text-style="ZoneLabel" value="3RD - 6TH" color="$text-3" align="right" />
        </row>

        <!-- 3 Kingsmoor City -->
        <row w="fill" h="52" gap="0" align="middle-left">
          <rect w="4" h="52" fill="$sky" />
          <row w="fill" h="52" gap="4" p="0 12 0 10" align="middle-center">
            <row w="28" gap="3" align="middle-left">
              <img src="https://api.iconify.design/lucide/chevron-up.svg?color=%234CD08E" w="9" h="9" />
              <text text-style="Pos" value="3" color="$text" />
            </row>
            <col w="30" h="30" radius="$r-pill" fill="$glass-2" border="1 $glass-line" align="middle-center">
              <text text-style="Mono" value="KC" color="$text" />
            </col>
            <text w="fill" text-style="Team" value="Kingsmoor City" color="$text" />
            <text w="20" text-style="Stat" value="30" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="17" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="7" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="6" color="$text-2" align="right" />
            <text w="30" text-style="Stat" value="+24" color="$green" align="right" />
            <text w="30" text-style="Pts" value="58" color="$text" align="right" />
          </row>
        </row>
        <line w="fill" fill="$glass-line-soft" thickness="1" role="divider" />

        <!-- 4 Selby Harriers (followed) -->
        <row w="fill" h="54" gap="0" fill="$azure-tint" align="middle-left">
          <rect w="4" h="54" fill="$azure" />
          <row w="fill" h="54" gap="4" p="0 12 0 10" align="middle-center">
            <row w="28" gap="3" align="middle-left">
              <img src="https://api.iconify.design/lucide/chevron-up.svg?color=%234CD08E" w="9" h="9" />
              <text text-style="Pos" value="4" color="$azure-text" />
            </row>
            <col w="30" h="30" radius="$r-pill" fill="$azure" border="1 $azure" align="middle-center">
              <text text-style="Mono" value="SH" color="$azure-ink" />
            </col>
            <row w="fill" gap="6" align="middle-center">
              <text text-style="TeamB" value="Selby Harriers" color="$text" />
              <img src="https://api.iconify.design/lucide/star.svg?color=%232E9BFF" w="13" h="13" />
            </row>
            <text w="20" text-style="Stat" value="30" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="16" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="6" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="8" color="$text-2" align="right" />
            <text w="30" text-style="Stat" value="+19" color="$green" align="right" />
            <text w="30" text-style="Pts" value="54" color="$azure-text" align="right" />
          </row>
        </row>
        <line w="fill" fill="$glass-line-soft" thickness="1" role="divider" />

        <!-- 5 Dunmere Town -->
        <row w="fill" h="52" gap="0" align="middle-left">
          <rect w="4" h="52" fill="$sky" />
          <row w="fill" h="52" gap="4" p="0 12 0 10" align="middle-center">
            <row w="28" gap="3" align="middle-left">
              <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%23F0736F" w="9" h="9" />
              <text text-style="Pos" value="5" color="$text" />
            </row>
            <col w="30" h="30" radius="$r-pill" fill="$glass-2" border="1 $glass-line" align="middle-center">
              <text text-style="Mono" value="DT" color="$text" />
            </col>
            <text w="fill" text-style="Team" value="Dunmere Town" color="$text" />
            <text w="20" text-style="Stat" value="30" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="15" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="6" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="9" color="$text-2" align="right" />
            <text w="30" text-style="Stat" value="+12" color="$green" align="right" />
            <text w="30" text-style="Pts" value="51" color="$text" align="right" />
          </row>
        </row>
        <line w="fill" fill="$glass-line-soft" thickness="1" role="divider" />

        <!-- 6 Calder Rangers -->
        <row w="fill" h="52" gap="0" align="middle-left">
          <rect w="4" h="52" fill="$sky" />
          <row w="fill" h="52" gap="4" p="0 12 0 10" align="middle-center">
            <row w="28" gap="3" align="middle-left">
              <img src="https://api.iconify.design/lucide/minus.svg?color=%238B96A4" w="9" h="9" />
              <text text-style="Pos" value="6" color="$text" />
            </row>
            <col w="30" h="30" radius="$r-pill" fill="$glass-2" border="1 $glass-line" align="middle-center">
              <text text-style="Mono" value="CR" color="$text" />
            </col>
            <text w="fill" text-style="Team" value="Calder Rangers" color="$text" />
            <text w="20" text-style="Stat" value="30" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="13" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="9" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="8" color="$text-2" align="right" />
            <text w="30" text-style="Stat" value="+9" color="$green" align="right" />
            <text w="30" text-style="Pts" value="48" color="$text" align="right" />
          </row>
        </row>

        <!-- zone: mid-table -->
        <row w="fill" h="24" p="0 14" gap="7" fill="$mid-tint" align="middle-center">
          <rect w="6" h="6" radius="2" fill="$text-3" />
          <text text-style="ZoneLabel" value="MID-TABLE" color="$text-3" />
        </row>

        <!-- 7 Wexley United -->
        <row w="fill" h="52" gap="0" align="middle-left">
          <rect w="4" h="52" fill="#00000000" />
          <row w="fill" h="52" gap="4" p="0 12 0 10" align="middle-center">
            <row w="28" gap="3" align="middle-left">
              <img src="https://api.iconify.design/lucide/chevron-up.svg?color=%234CD08E" w="9" h="9" />
              <text text-style="Pos" value="7" color="$text" />
            </row>
            <col w="30" h="30" radius="$r-pill" fill="$glass-2" border="1 $glass-line" align="middle-center">
              <text text-style="Mono" value="WU" color="$text" />
            </col>
            <text w="fill" text-style="Team" value="Wexley United" color="$text" />
            <text w="20" text-style="Stat" value="30" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="12" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="8" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="10" color="$text-2" align="right" />
            <text w="30" text-style="Stat" value="+2" color="$text-2" align="right" />
            <text w="30" text-style="Pts" value="44" color="$text" align="right" />
          </row>
        </row>
        <line w="fill" fill="$glass-line-soft" thickness="1" role="divider" />

        <!-- 8 Harlow Rovers -->
        <row w="fill" h="52" gap="0" align="middle-left">
          <rect w="4" h="52" fill="#00000000" />
          <row w="fill" h="52" gap="4" p="0 12 0 10" align="middle-center">
            <row w="28" gap="3" align="middle-left">
              <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%23F0736F" w="9" h="9" />
              <text text-style="Pos" value="8" color="$text" />
            </row>
            <col w="30" h="30" radius="$r-pill" fill="$glass-2" border="1 $glass-line" align="middle-center">
              <text text-style="Mono" value="HR" color="$text" />
            </col>
            <text w="fill" text-style="Team" value="Harlow Rovers" color="$text" />
            <text w="20" text-style="Stat" value="30" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="11" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="9" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="10" color="$text-2" align="right" />
            <text w="30" text-style="Stat" value="-1" color="$text-2" align="right" />
            <text w="30" text-style="Pts" value="42" color="$text" align="right" />
          </row>
        </row>
        <line w="fill" fill="$glass-line-soft" thickness="1" role="divider" />

        <!-- 9 Thornbeck FC -->
        <row w="fill" h="52" gap="0" align="middle-left">
          <rect w="4" h="52" fill="#00000000" />
          <row w="fill" h="52" gap="4" p="0 12 0 10" align="middle-center">
            <row w="28" gap="3" align="middle-left">
              <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%23F0736F" w="9" h="9" />
              <text text-style="Pos" value="9" color="$text" />
            </row>
            <col w="30" h="30" radius="$r-pill" fill="$glass-2" border="1 $glass-line" align="middle-center">
              <text text-style="Mono" value="TF" color="$text" />
            </col>
            <text w="fill" text-style="Team" value="Thornbeck FC" color="$text" />
            <text w="20" text-style="Stat" value="30" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="10" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="8" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="12" color="$text-2" align="right" />
            <text w="30" text-style="Stat" value="-6" color="$text-2" align="right" />
            <text w="30" text-style="Pts" value="38" color="$text" align="right" />
          </row>
        </row>
        <line w="fill" fill="$glass-line-soft" thickness="1" role="divider" />

        <!-- 10 Marsh End -->
        <row w="fill" h="52" gap="0" align="middle-left">
          <rect w="4" h="52" fill="#00000000" />
          <row w="fill" h="52" gap="4" p="0 12 0 10" align="middle-center">
            <row w="28" gap="3" align="middle-left">
              <img src="https://api.iconify.design/lucide/chevron-up.svg?color=%234CD08E" w="9" h="9" />
              <text text-style="Pos" value="10" color="$text" />
            </row>
            <col w="30" h="30" radius="$r-pill" fill="$glass-2" border="1 $glass-line" align="middle-center">
              <text text-style="Mono" value="ME" color="$text" />
            </col>
            <text w="fill" text-style="Team" value="Marsh End" color="$text" />
            <text w="20" text-style="Stat" value="30" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="8" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="9" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="13" color="$text-2" align="right" />
            <text w="30" text-style="Stat" value="-14" color="$text-2" align="right" />
            <text w="30" text-style="Pts" value="33" color="$text" align="right" />
          </row>
        </row>

        <!-- zone: relegation -->
        <row w="fill" h="24" p="0 14" gap="7" fill="$red-tint" align="middle-center">
          <rect w="6" h="6" radius="2" fill="$red" />
          <text text-style="ZoneLabel" value="RELEGATION ZONE" color="$red" />
          <text w="fill" text-style="ZoneLabel" value="BOTTOM 2" color="$text-3" align="right" />
        </row>

        <!-- 11 Bracken Heath -->
        <row w="fill" h="52" gap="0" align="middle-left">
          <rect w="4" h="52" fill="$red" />
          <row w="fill" h="52" gap="4" p="0 12 0 10" align="middle-center">
            <row w="28" gap="3" align="middle-left">
              <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%23F0736F" w="9" h="9" />
              <text text-style="Pos" value="11" color="$text" />
            </row>
            <col w="30" h="30" radius="$r-pill" fill="$glass-2" border="1 $glass-line" align="middle-center">
              <text text-style="Mono" value="BH" color="$text" />
            </col>
            <text w="fill" text-style="Team" value="Bracken Heath" color="$text" />
            <text w="20" text-style="Stat" value="30" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="6" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="8" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="16" color="$text-2" align="right" />
            <text w="30" text-style="Stat" value="-25" color="$red" align="right" />
            <text w="30" text-style="Pts" value="26" color="$text" align="right" />
          </row>
        </row>
        <line w="fill" fill="$glass-line-soft" thickness="1" role="divider" />

        <!-- 12 Ivelo County -->
        <row w="fill" h="52" gap="0" align="middle-left">
          <rect w="4" h="52" fill="$red" />
          <row w="fill" h="52" gap="4" p="0 12 0 10" align="middle-center">
            <row w="28" gap="3" align="middle-left">
              <img src="https://api.iconify.design/lucide/minus.svg?color=%238B96A4" w="9" h="9" />
              <text text-style="Pos" value="12" color="$text" />
            </row>
            <col w="30" h="30" radius="$r-pill" fill="$glass-2" border="1 $glass-line" align="middle-center">
              <text text-style="Mono" value="IC" color="$text" />
            </col>
            <text w="fill" text-style="Team" value="Ivelo County" color="$text" />
            <text w="20" text-style="Stat" value="30" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="4" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="7" color="$text-2" align="right" />
            <text w="18" text-style="Stat" value="19" color="$text-2" align="right" />
            <text w="30" text-style="Stat" value="-37" color="$red" align="right" />
            <text w="30" text-style="Pts" value="19" color="$text" align="right" />
          </row>
        </row>
      </col>

      <!-- legend -->
      <row w="fill" p="0 4" gap="16" align="middle-left">
        <row gap="6" align="middle-center">
          <rect w="8" h="8" radius="2" fill="$azure" />
          <text text-style="Legend" value="Promotion" color="$text-2" />
        </row>
        <row gap="6" align="middle-center">
          <rect w="8" h="8" radius="2" fill="$sky" />
          <text text-style="Legend" value="Play-offs" color="$text-2" />
        </row>
        <row gap="6" align="middle-center">
          <rect w="8" h="8" radius="2" fill="$red" />
          <text text-style="Legend" value="Relegation" color="$text-2" />
        </row>
      </row>

      <!-- followed-team next match banner -->
      <row role="banner" w="fill" radius="$r-card" p="14 16" gap="12" align="middle-center" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="24" />
        </appearance>
        <col w="42" h="42" radius="$r-pill" fill="$azure" align="middle-center">
          <text text-style="Mono" value="SH" color="$azure-ink" />
        </col>
        <col w="fill" gap="3" align="middle-left">
          <text text-style="BannerKick" value="YOUR CLUB - NEXT MATCH" color="$azure-text" />
          <text text-style="BannerBody" value="Sat 12 Apr, 15:00 vs Dunmere Town (H)" color="$text" />
        </col>
        <row role="button" w="38" h="38" radius="$r-pill" fill="$azure-soft" border="1 $glass-line-soft" align="middle-center">
          <img src="https://api.iconify.design/lucide/bell.svg?color=%237CC0FF" w="17" h="17" />
        </row>
      </row>

    </col>

    <!-- tab bar (last flow child) -->
    <row role="tab-bar" w="393" h="64" p="0 6" gap="0" fill="#0A0F17" border="1 0 0 0 $glass-line-soft" align="middle-center">
      <col w="fill" h="fill" align="middle-center" gap="4">
        <img src="https://api.iconify.design/lucide/house.svg?color=%238B96A4" w="22" h="22" />
        <text text-style="TabLabel" value="Home" color="$text-3" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="4">
        <img src="https://api.iconify.design/lucide/calendar-days.svg?color=%238B96A4" w="22" h="22" />
        <text text-style="TabLabel" value="Matches" color="$text-3" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="4">
        <img src="https://api.iconify.design/lucide/list-ordered.svg?color=%232E9BFF" w="22" h="22" />
        <text text-style="TabLabel" value="Table" color="$azure-text" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="4">
        <img src="https://api.iconify.design/lucide/newspaper.svg?color=%238B96A4" w="22" h="22" />
        <text text-style="TabLabel" value="News" color="$text-3" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="4">
        <img src="https://api.iconify.design/lucide/user-round.svg?color=%238B96A4" w="22" h="22" />
        <text text-style="TabLabel" value="You" color="$text-3" />
      </col>
    </row>

    <!-- home indicator (device chrome, untagged) -->
    <frame w="393" h="22">
      <rect x="129" y="8" w="134" h="5" radius="3" fill="#FFFFFFCC" />
    </frame>

  </col>
</gui>

```