---
title: "Switchback — Weekly Climb"
platform: android
slug: switchback-weekly-climb
screens: ["leaderboard"]
domains: ["fitness"]
style: "flat"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "segmented-control", "avatar", "card", "badge", "button", "tab-bar"]
score: {clean: 100, consistent: 89, accessible: 98, comprehensible: 46}
url: https://gui.farm/android/switchback-weekly-climb
raw: https://gui.farm/android/switchback-weekly-climb/design.guix
download: https://gui.farm/android/switchback-weekly-climb.gui
---

# Switchback — Weekly Climb

Weekly climbing leaderboard ranking climbers by elevation gained, with a your-position card and weekly goal.

- **Live preview:** https://gui.farm/android/switchback-weekly-climb
- **Raw source:** https://gui.farm/android/switchback-weekly-climb/design.guix
- **Download (.gui):** https://gui.farm/android/switchback-weekly-climb.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Switchback — Weekly Climb">
  <tokens>
    <color name="surface" value="#141017" />
    <color name="surface-container" value="#1D1822" />
    <color name="surface-container-high" value="#27212E" />
    <color name="on-surface" value="#EEE9F1" />
    <color name="on-surface-variant" value="#B6AEC0" />
    <color name="accent" value="#F4577E" />
    <color name="accent-text" value="#FF90AC" />
    <color name="on-accent" value="#25060F" />
    <color name="your-surface" value="#381B27" />
    <color name="delta-surface" value="#3D2130" />
    <color name="track" value="#2E2733" />
    <color name="ring" value="#8A8194" />
    <number name="r-md" value="12" />
    <number name="r-lg" value="16" />
    <number name="r-xl" value="28" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="TitleLarge" font-family="Roboto" font-size="22" font-weight="500" line-height="28" />
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="500" line-height="24" />
    <text-style name="TitleSmall" font-family="Roboto" font-size="14" font-weight="500" line-height="20" />
    <text-style name="BodyMedium" font-family="Roboto" font-size="14" font-weight="400" line-height="20" />
    <text-style name="LabelLarge" font-family="Roboto" font-size="14" font-weight="500" line-height="20" />
    <text-style name="LabelMedium" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="LabelSmall" font-family="Roboto" font-size="11" font-weight="500" line-height="16" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 700" styles="normal" />
  </fonts>
  <col w="360" fill="$surface">
    <!-- status bar : device chrome, untagged -->
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="LabelSmall" value="9:41" color="$on-surface" />
      <row gap="6" align="middle-right">
        <img
          src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23EEE9F1"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23EEE9F1" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23EEE9F1"
          w="15"
          h="15"
        />
      </row>
    </row>
    <!-- top app bar -->
    <row role="top-navigation-bar" w="fill" h="64" p="0 4" gap="4" align="middle-center">
      <row w="48" h="48" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23EEE9F1"
          w="24"
          h="24"
        />
      </row>
      <col w="fill" gap="1">
        <text text-style="TitleLarge" value="Weekly Climb" color="$on-surface" />
        <text text-style="LabelMedium" value="Cascade Cols · 6 days left" color="$on-surface-variant" />
      </col>
      <row w="48" h="48" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/share-rounded.svg?color=%23EEE9F1"
          w="22"
          h="22"
        />
      </row>
    </row>
    <!-- timeframe segmented control -->
    <col w="fill" p="8 16 4 16">
      <row role="segmented-control" w="fill" h="40" radius="$r-full" fill="$surface-container" p="4" gap="4">
        <row w="fill" h="fill" radius="$r-full" fill="$accent" align="middle-center">
          <text text-style="LabelLarge" value="This week" color="$on-accent" />
        </row>
        <row w="fill" h="fill" radius="$r-full" align="middle-center">
          <text text-style="LabelLarge" value="All time" color="$on-surface-variant" />
        </row>
      </row>
    </col>
    <!-- podium : top three -->
    <col w="fill" p="8 16 4 16">
      <row w="fill" fill="$surface-container" radius="$r-xl" p="16 6 14 6" gap="8" align="bottom-center">
        <!-- #2 -->
        <col w="100" gap="8" align="middle-center">
          <col gap="6" align="middle-center">
            <row
              role="avatar"
              w="56"
              h="56"
              radius="28"
              fill="$surface-container-high"
              border="2 $ring"
              align="middle-center"
            >
              <text text-style="TitleMedium" value="MR" color="$on-surface" />
            </row>
            <col gap="1" align="middle-center">
              <text text-style="LabelLarge" value="Maya R." color="$on-surface" align="center" />
              <text text-style="LabelMedium" value="4,540 m" color="$on-surface-variant" />
            </col>
          </col>
          <col w="fill" h="44" radius="$r-md" fill="$surface-container-high" align="middle-center">
            <text text-style="TitleMedium" value="2" color="$on-surface-variant" />
          </col>
        </col>
        <!-- #1 -->
        <col w="100" gap="8" align="middle-center">
          <col gap="4" align="middle-center">
            <img
              src="https://api.iconify.design/material-symbols/workspace-premium-rounded.svg?color=%23F4577E"
              w="22"
              h="22"
            />
            <row
              role="avatar"
              w="72"
              h="72"
              radius="36"
              fill="$your-surface"
              border="2 $accent"
              align="middle-center"
            >
              <text text-style="TitleLarge" value="LK" color="$accent-text" />
            </row>
            <col gap="1" align="middle-center">
              <text text-style="LabelLarge" value="Leo K." color="$on-surface" align="center" />
              <text text-style="LabelMedium" value="4,820 m" color="$accent-text" />
            </col>
          </col>
          <col w="fill" h="64" radius="$r-md" fill="$accent" align="middle-center">
            <text text-style="TitleLarge" value="1" color="$on-accent" />
          </col>
        </col>
        <!-- #3 -->
        <col w="100" gap="8" align="middle-center">
          <col gap="6" align="middle-center">
            <row
              role="avatar"
              w="56"
              h="56"
              radius="28"
              fill="$surface-container-high"
              border="2 $ring"
              align="middle-center"
            >
              <text text-style="TitleMedium" value="JT" color="$on-surface" />
            </row>
            <col gap="1" align="middle-center">
              <text text-style="LabelLarge" value="Jonas T." color="$on-surface" align="center" />
              <text text-style="LabelMedium" value="4,180 m" color="$on-surface-variant" />
            </col>
          </col>
          <col w="fill" h="36" radius="$r-md" fill="$surface-container-high" align="middle-center">
            <text text-style="TitleMedium" value="3" color="$on-surface-variant" />
          </col>
        </col>
      </row>
    </col>
    <!-- your position card -->
    <col w="fill" p="4 16 4 16">
      <col role="card" w="fill" fill="$your-surface" radius="$r-lg" p="16" gap="12">
        <row w="fill" gap="12" align="middle-center">
          <col w="24" align="middle-center">
            <text text-style="TitleMedium" value="6" color="$accent-text" />
          </col>
          <row
            role="avatar"
            w="44"
            h="44"
            radius="22"
            fill="$surface-container-high"
            border="2 $accent"
            align="middle-center"
          >
            <text text-style="TitleMedium" value="JJ" color="$accent-text" />
          </row>
          <col w="fill" gap="3">
            <row gap="8" align="middle-left">
              <text text-style="TitleMedium" value="You" color="$accent-text" />
              <row
                role="badge"
                h="20"
                radius="$r-full"
                fill="$delta-surface"
                p="0 8"
                gap="2"
                align="middle-center"
              >
                <img
                  src="https://api.iconify.design/material-symbols/trending-up-rounded.svg?color=%23FF90AC"
                  w="14"
                  h="14"
                />
                <text text-style="LabelSmall" value="2" color="$accent-text" />
              </row>
            </row>
            <text text-style="LabelMedium" value="Moved up from 8th" color="$on-surface-variant" />
          </col>
          <col gap="1" align="middle-right">
            <text text-style="TitleMedium" value="3,120 m" color="$on-surface" align="right" />
            <text text-style="LabelSmall" value="climbed" color="$on-surface-variant" align="right" />
          </col>
        </row>
        <col w="fill" gap="6">
          <row w="fill" gap="auto" align="middle-center">
            <text text-style="LabelMedium" value="Weekly goal" color="$on-surface-variant" />
            <text text-style="LabelMedium" value="3,120 / 4,000 m" color="$on-surface" />
          </row>
          <col w="fill" h="8" radius="$r-full" fill="$track">
            <rect w="231" h="8" radius="$r-full" fill="$accent" />
          </col>
        </col>
      </col>
    </col>
    <!-- standings header -->
    <row w="fill" p="12 16 6 16" gap="auto" align="middle-center">
      <text text-style="TitleSmall" value="Standings" color="$on-surface" />
      <text text-style="LabelMedium" value="Ranked by metres climbed" color="$on-surface-variant" />
    </row>
    <!-- standings list : ranks 4–10 -->
    <col w="fill" p="0 16" gap="8">
      <!-- rank 4 -->
      <col role="card" w="fill" fill="$surface-container" radius="$r-md" p="12 14" gap="10">
        <row w="fill" gap="12" align="middle-center">
          <col w="24" align="middle-center">
            <text text-style="TitleMedium" value="4" color="$on-surface-variant" />
          </col>
          <row
            role="avatar"
            w="40"
            h="40"
            radius="20"
            fill="$surface-container-high"
            border="2 $ring"
            align="middle-center"
          >
            <text text-style="LabelLarge" value="SP" color="$on-surface" />
          </row>
          <text w="fill" text-style="TitleSmall" value="Sam P." color="$on-surface" />
          <text text-style="TitleMedium" value="3,760 m" color="$on-surface" />
        </row>
        <col w="fill" h="6" radius="$r-full" fill="$track">
          <rect w="234" h="6" radius="$r-full" fill="$accent" />
        </col>
      </col>
      <!-- rank 5 -->
      <col role="card" w="fill" fill="$surface-container" radius="$r-md" p="12 14" gap="10">
        <row w="fill" gap="12" align="middle-center">
          <col w="24" align="middle-center">
            <text text-style="TitleMedium" value="5" color="$on-surface-variant" />
          </col>
          <row
            role="avatar"
            w="40"
            h="40"
            radius="20"
            fill="$surface-container-high"
            border="2 $ring"
            align="middle-center"
          >
            <text text-style="LabelLarge" value="PN" color="$on-surface" />
          </row>
          <text w="fill" text-style="TitleSmall" value="Priya N." color="$on-surface" />
          <text text-style="TitleMedium" value="3,410 m" color="$on-surface" />
        </row>
        <col w="fill" h="6" radius="$r-full" fill="$track">
          <rect w="212" h="6" radius="$r-full" fill="$accent" />
        </col>
      </col>
      <!-- rank 6 : you -->
      <col role="card" w="fill" fill="$your-surface" radius="$r-md" p="12 14" gap="10" border="1 $accent">
        <row w="fill" gap="12" align="middle-center">
          <col w="24" align="middle-center">
            <text text-style="TitleMedium" value="6" color="$accent-text" />
          </col>
          <row
            role="avatar"
            w="40"
            h="40"
            radius="20"
            fill="$surface-container-high"
            border="2 $accent"
            align="middle-center"
          >
            <text text-style="LabelLarge" value="JJ" color="$accent-text" />
          </row>
          <text w="fill" text-style="TitleSmall" value="You" color="$accent-text" />
          <text text-style="TitleMedium" value="3,120 m" color="$on-surface" />
        </row>
        <col w="fill" h="6" radius="$r-full" fill="$track">
          <rect w="194" h="6" radius="$r-full" fill="$accent" />
        </col>
      </col>
      <!-- rank 7 -->
      <col role="card" w="fill" fill="$surface-container" radius="$r-md" p="12 14" gap="10">
        <row w="fill" gap="12" align="middle-center">
          <col w="24" align="middle-center">
            <text text-style="TitleMedium" value="7" color="$on-surface-variant" />
          </col>
          <row
            role="avatar"
            w="40"
            h="40"
            radius="20"
            fill="$surface-container-high"
            border="2 $ring"
            align="middle-center"
          >
            <text text-style="LabelLarge" value="DF" color="$on-surface" />
          </row>
          <text w="fill" text-style="TitleSmall" value="Diego F." color="$on-surface" />
          <text text-style="TitleMedium" value="2,880 m" color="$on-surface" />
        </row>
        <col w="fill" h="6" radius="$r-full" fill="$track">
          <rect w="179" h="6" radius="$r-full" fill="$accent" />
        </col>
      </col>
      <!-- rank 8 -->
      <col role="card" w="fill" fill="$surface-container" radius="$r-md" p="12 14" gap="10">
        <row w="fill" gap="12" align="middle-center">
          <col w="24" align="middle-center">
            <text text-style="TitleMedium" value="8" color="$on-surface-variant" />
          </col>
          <row
            role="avatar"
            w="40"
            h="40"
            radius="20"
            fill="$surface-container-high"
            border="2 $ring"
            align="middle-center"
          >
            <text text-style="LabelLarge" value="MV" color="$on-surface" />
          </row>
          <text w="fill" text-style="TitleSmall" value="Mara V." color="$on-surface" />
          <text text-style="TitleMedium" value="2,540 m" color="$on-surface" />
        </row>
        <col w="fill" h="6" radius="$r-full" fill="$track">
          <rect w="158" h="6" radius="$r-full" fill="$accent" />
        </col>
      </col>
      <!-- rank 9 -->
      <col role="card" w="fill" fill="$surface-container" radius="$r-md" p="12 14" gap="10">
        <row w="fill" gap="12" align="middle-center">
          <col w="24" align="middle-center">
            <text text-style="TitleMedium" value="9" color="$on-surface-variant" />
          </col>
          <row
            role="avatar"
            w="40"
            h="40"
            radius="20"
            fill="$surface-container-high"
            border="2 $ring"
            align="middle-center"
          >
            <text text-style="LabelLarge" value="TL" color="$on-surface" />
          </row>
          <text w="fill" text-style="TitleSmall" value="Toby L." color="$on-surface" />
          <text text-style="TitleMedium" value="2,200 m" color="$on-surface" />
        </row>
        <col w="fill" h="6" radius="$r-full" fill="$track">
          <rect w="137" h="6" radius="$r-full" fill="$accent" />
        </col>
      </col>
      <!-- rank 10 -->
      <col role="card" w="fill" fill="$surface-container" radius="$r-md" p="12 14" gap="10">
        <row w="fill" gap="12" align="middle-center">
          <col w="24" align="middle-center">
            <text text-style="TitleMedium" value="10" color="$on-surface-variant" />
          </col>
          <row
            role="avatar"
            w="40"
            h="40"
            radius="20"
            fill="$surface-container-high"
            border="2 $ring"
            align="middle-center"
          >
            <text text-style="LabelLarge" value="AG" color="$on-surface" />
          </row>
          <text w="fill" text-style="TitleSmall" value="Ana G." color="$on-surface" />
          <text text-style="TitleMedium" value="1,980 m" color="$on-surface" />
        </row>
        <col w="fill" h="6" radius="$r-full" fill="$track">
          <rect w="123" h="6" radius="$r-full" fill="$accent" />
        </col>
      </col>
    </col>
    <!-- primary action -->
    <col w="fill" p="14 16 6 16">
      <row role="button" w="fill" h="48" radius="$r-full" fill="$accent" gap="8" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/person-add-rounded.svg?color=%2325060F"
          w="20"
          h="20"
        />
        <text text-style="LabelLarge" value="Invite friends to the climb" color="$on-accent" />
      </row>
    </col>
    <!-- bottom navigation : last flow child -->
    <row role="tab-bar" w="fill" h="80" fill="$surface-container" p="10 0 0 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/material-symbols/home-outline-rounded.svg?color=%23B6AEC0"
            w="24"
            h="24"
          />
        </row>
        <text text-style="LabelMedium" value="Home" color="$on-surface-variant" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/route-outline-rounded.svg?color=%23B6AEC0"
            w="24"
            h="24"
          />
        </row>
        <text text-style="LabelMedium" value="Routes" color="$on-surface-variant" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" radius="$r-full" fill="$accent" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/check-circle-outline.svg" w="24" h="24" />
        </row>
        <text text-style="LabelMedium" value="Compete" color="$on-surface" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/person-outline-rounded.svg?color=%23B6AEC0"
            w="24"
            h="24"
          />
        </row>
        <text text-style="LabelMedium" value="You" color="$on-surface-variant" />
      </col>
    </row>
    <!-- home indicator : device chrome, untagged -->
    <col w="fill" h="24" align="middle-center">
      <rect w="108" h="4" radius="$r-full" fill="#5A5560" />
    </col>
  </col>
</gui>
```