---
title: "Torque — Weekly Leaderboard"
platform: android
slug: torque-weekly-leaderboard
screens: ["leaderboard"]
domains: ["fitness"]
style: "flat"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "badge", "segmented-control", "card", "avatar", "button", "tab-bar"]
score: {clean: 100, consistent: 77, accessible: 96, comprehensible: 39}
url: https://gui.farm/android/torque-weekly-leaderboard
raw: https://gui.farm/android/torque-weekly-leaderboard/design.guix
download: https://gui.farm/android/torque-weekly-leaderboard.gui
---

# Torque — Weekly Leaderboard

Cycling power-challenge weekly leaderboard ranking riders by power points, with a your-position row.

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

## Source (design.guix)

```xml
<gui version="0.2" name="Torque — Weekly Leaderboard">
  <tokens>
    <color name="bg" value="#FFF7F9" />
    <color name="surface" value="#FFFFFF" />
    <color name="track" value="#F0E2E7" />
    <color name="on-surface" value="#211318" />
    <color name="on-surface-variant" value="#655056" />
    <color name="outline" value="#EAD9DF" />
    <color name="primary" value="#C11552" />
    <color name="primary-text" value="#B0124E" />
    <color name="on-primary" value="#FFFFFF" />
    <color name="you-fill" value="#FFE1EA" />
    <color name="ped-1" value="#C11552" />
    <color name="ped-2" value="#D84A7C" />
    <color name="ped-3" value="#E77AA0" />
    <color name="av-green" value="#2F724F" />
    <color name="av-amber" value="#96591C" />
    <color name="av-blue" value="#4A6DB0" />
    <color name="av-violet" value="#6357A8" />
    <color name="trend-up" value="#0F6E3E" />
    <color name="trend-down" value="#B0124E" />
    <number name="r-lg" value="16" />
    <number name="r-md" value="12" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="TitleLarge" font-family="Roboto" font-size="22" font-weight="400" line-height="28" />
    <text-style name="Headline" font-family="Roboto" font-size="20" font-weight="700" line-height="26" />
    <text-style name="Bold16" font-family="Roboto" font-size="16" font-weight="700" line-height="22" />
    <text-style name="Name" font-family="Roboto" font-size="15" font-weight="500" line-height="20" />
    <text-style name="BodyS" font-family="Roboto" font-size="13" font-weight="400" line-height="18" />
    <text-style name="Label" font-family="Roboto" font-size="14" font-weight="500" line-height="20" />
    <text-style name="LabelS" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style
      name="Section"
      font-family="Roboto"
      font-size="11"
      font-weight="700"
      line-height="16"
      letter-spacing="0.8"
    />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 700" styles="normal" />
  </fonts>
  <col w="360" fill="$bg">
    <!-- system status bar : device chrome, untagged -->
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="LabelS" value="9:41" fill="$on-surface" />
      <row gap="6" align="middle-right">
        <img
          src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23211318"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23211318" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23211318"
          w="15"
          h="15"
        />
      </row>
    </row>
    <!-- M3 small top app bar -->
    <row role="top-navigation-bar" w="fill" h="64" p="0 8 0 4" gap="4" align="middle-left">
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23211318"
          w="24"
          h="24"
        />
      </row>
      <text w="fill" text-style="TitleLarge" value="Leaderboard" fill="$on-surface" />
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/ios-share-rounded.svg?color=%23211318"
          w="24"
          h="24"
        />
      </row>
    </row>
    <!-- HEADER : challenge title + segmented range -->
    <col w="360" p="4 16 0 16" gap="12">
      <col w="328" gap="6">
        <row w="328" gap="8" align="middle-left">
          <img
            src="https://api.iconify.design/material-symbols/bolt-rounded.svg?color=%23C11552"
            w="22"
            h="22"
          />
          <text w="fill" text-style="Headline" value="Power Challenge" fill="$on-surface" />
          <row role="badge" h="22" radius="$r-full" fill="$you-fill" p="0 10" align="middle-center">
            <text text-style="Section" value="LIVE" fill="$primary-text" />
          </row>
        </row>
        <text
          w="328"
          text-style="BodyS"
          value="Ranked by total power output this week · resets Sun 11:59 PM"
          fill="$on-surface-variant"
        />
      </col>
      <!-- range segmented control : two 164px segments -->
      <row
        role="segmented-control"
        w="328"
        h="40"
        radius="$r-full"
        fill="none"
        border="1 $outline"
        clip="true"
        align="middle-left"
      >
        <row w="164" h="40" fill="$primary" gap="6" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FFFFFF"
            w="18"
            h="18"
          />
          <text text-style="Label" value="This Week" fill="$on-primary" />
        </row>
        <row w="164" h="40" align="middle-center">
          <text text-style="Label" value="All Time" fill="$on-surface-variant" />
        </row>
      </row>
    </col>
    <!-- PODIUM : top three, pedestal heights encode points (max 96px = 1,240 PP) -->
    <col w="360" p="12 16 0 16">
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $outline" p="18 16 20 16" gap="0">
        <row w="296" gap="16" align="bottom-center">
          <!-- 2nd place -->
          <col w="88" gap="6" align="middle-center">
            <frame role="avatar" w="60" h="60" radius="30" border="2 $ped-2" clip="true">
              <img
                x="0"
                y="0"
                w="60"
                h="60"
                fit="cover"
                src="https://images.unsplash.com/photo-1745434159123-5b99b94206ca?auto=format&amp;fit=crop&amp;w=160&amp;h=160&amp;q=80"
              />
            </frame>
            <text w="88" text-style="Name" value="Elena P." fill="$on-surface" align="center" />
            <text w="88" text-style="Bold16" value="1,120 PP" fill="$primary-text" align="center" />
            <col w="88" h="87" radius="$r-md $r-md 0 0" fill="$ped-2" p="10 0 0 0" align="top-center">
              <row w="30" h="30" radius="15" fill="$surface" align="middle-center">
                <text text-style="Bold16" value="2" fill="$primary-text" align="middle-center" />
              </row>
            </col>
          </col>
          <!-- 1st place -->
          <col w="88" gap="6" align="middle-center">
            <img
              src="https://api.iconify.design/material-symbols/workspace-premium-rounded.svg?color=%23C11552"
              w="26"
              h="26"
            />
            <frame role="avatar" w="72" h="72" radius="36" border="3 $primary" clip="true">
              <img
                x="0"
                y="0"
                w="72"
                h="72"
                fit="cover"
                src="https://images.unsplash.com/photo-1651684215020-f7a5b6610f23?auto=format&amp;fit=crop&amp;w=160&amp;h=160&amp;q=80"
              />
            </frame>
            <text w="88" text-style="Name" value="Marcus V." fill="$on-surface" align="center" />
            <text w="88" text-style="Bold16" value="1,240 PP" fill="$primary-text" align="center" />
            <col w="88" h="96" radius="$r-md $r-md 0 0" fill="$ped-1" p="10 0 0 0" align="top-center">
              <row w="30" h="30" radius="15" fill="$surface" align="middle-center">
                <text text-style="Bold16" value="1" fill="$primary-text" align="middle-center" />
              </row>
            </col>
          </col>
          <!-- 3rd place -->
          <col w="88" gap="6" align="middle-center">
            <frame role="avatar" w="60" h="60" radius="30" border="2 $ped-3" clip="true">
              <img
                x="0"
                y="0"
                w="60"
                h="60"
                fit="cover"
                src="https://images.unsplash.com/photo-1489507423881-4df2d5eb5d06?auto=format&amp;fit=crop&amp;w=160&amp;h=160&amp;q=80"
              />
            </frame>
            <text w="88" text-style="Name" value="Priya N." fill="$on-surface" align="center" />
            <text w="88" text-style="Bold16" value="1,015 PP" fill="$primary-text" align="center" />
            <col w="88" h="79" radius="$r-md $r-md 0 0" fill="$ped-3" p="10 0 0 0" align="top-center">
              <row w="30" h="30" radius="15" fill="$surface" align="middle-center">
                <text text-style="Bold16" value="3" fill="$primary-text" align="middle-center" />
              </row>
            </col>
          </col>
        </row>
      </col>
    </col>
    <!-- STANDINGS LIST : bar widths encode points relative to leader (104px = 1,240 PP) -->
    <col w="360" p="12 16 0 16">
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $outline" p="0 8" gap="0">
        <row w="fill" h="30" gap="10" align="middle-left" p="1 12">
          <text w="fill" text-style="Section" value="RIDER" fill="$on-surface-variant" />
          <text w="112" text-style="Section" value="POWER" fill="$on-surface-variant" align="right" />
        </row>
        <!-- rank 4 -->
        <row w="fill" h="64" gap="10" align="middle-left" p="1 12">
          <text w="18" text-style="Bold16" value="4" fill="$on-surface-variant" align="middle-center" />
          <row role="avatar" w="40" h="40" radius="20" fill="$av-green" align="middle-center">
            <text text-style="LabelS" value="DC" fill="$on-primary" />
          </row>
          <col w="fill" gap="2">
            <text text-style="Name" value="Devon Cole" fill="$on-surface" />
            <text text-style="BodyS" value="14 rides" fill="$on-surface-variant" />
          </col>
          <col w="112" gap="6" align="middle-right">
            <row gap="6" align="middle-right">
              <text text-style="Bold16" value="940 PP" fill="$on-surface" />
              <text text-style="LabelS" value="▲ 2" fill="$trend-up" />
            </row>
            <frame w="104" h="6">
              <rect x="0" y="0" w="104" h="6" radius="3" fill="$track" />
              <rect x="0" y="0" w="79" h="6" radius="3" fill="$primary" />
            </frame>
          </col>
        </row>
        <!-- rank 5 : current user, highlighted -->
        <row w="fill" h="64" radius="$r-md" fill="$you-fill" gap="10" align="middle-left" p="1 12">
          <text w="18" text-style="Bold16" value="5" fill="$primary-text" align="middle-center" />
          <row role="avatar" w="40" h="40" radius="20" fill="$primary" align="middle-center">
            <text text-style="LabelS" value="JJ" fill="$on-primary" />
          </row>
          <col w="fill" gap="2">
            <row gap="6" align="middle-left">
              <text text-style="Name" value="You" fill="$primary-text" />
              <row role="badge" h="16" radius="$r-full" fill="$primary" p="0 6" align="middle-center">
                <text text-style="Section" value="YOU" fill="$on-primary" />
              </row>
            </row>
            <text text-style="BodyS" value="16 rides · personal best" fill="$on-surface-variant" />
          </col>
          <col w="112" gap="6" align="middle-right">
            <row gap="6" align="middle-right">
              <text text-style="Bold16" value="865 PP" fill="$primary-text" />
              <text text-style="LabelS" value="▲ 3" fill="$trend-up" />
            </row>
            <frame w="104" h="6">
              <rect x="0" y="0" w="104" h="6" radius="3" fill="$track" />
              <rect x="0" y="0" w="73" h="6" radius="3" fill="$primary" />
            </frame>
          </col>
        </row>
        <!-- rank 6 -->
        <row w="fill" h="64" gap="10" align="middle-left" p="1 12">
          <text w="18" text-style="Bold16" value="6" fill="$on-surface-variant" align="middle-center" />
          <row role="avatar" w="40" h="40" radius="20" fill="$av-amber" align="middle-center">
            <text text-style="LabelS" value="AR" fill="$on-primary" />
          </row>
          <col w="fill" gap="2">
            <text text-style="Name" value="Aisha Rahman" fill="$on-surface" />
            <text text-style="BodyS" value="11 rides" fill="$on-surface-variant" />
          </col>
          <col w="112" gap="6" align="middle-right">
            <row gap="6" align="middle-right">
              <text text-style="Bold16" value="790 PP" fill="$on-surface" />
              <text text-style="LabelS" value="▼ 1" fill="$trend-down" />
            </row>
            <frame w="104" h="6">
              <rect x="0" y="0" w="104" h="6" radius="3" fill="$track" />
              <rect x="0" y="0" w="66" h="6" radius="3" fill="$primary" />
            </frame>
          </col>
        </row>
        <line w="fill" fill="$outline" />
        <!-- rank 7 -->
        <row w="fill" h="64" gap="10" align="middle-left" p="1 12">
          <text w="18" text-style="Bold16" value="7" fill="$on-surface-variant" align="middle-center" />
          <row role="avatar" w="40" h="40" radius="20" fill="$av-blue" align="middle-center">
            <text text-style="LabelS" value="TB" fill="$on-primary" />
          </row>
          <col w="fill" gap="2">
            <text text-style="Name" value="Tom Becker" fill="$on-surface" />
            <text text-style="BodyS" value="9 rides" fill="$on-surface-variant" />
          </col>
          <col w="112" gap="6" align="middle-right">
            <row gap="6" align="middle-right">
              <text text-style="Bold16" value="720 PP" fill="$on-surface" />
              <text text-style="LabelS" value="▲ 1" fill="$trend-up" />
            </row>
            <frame w="104" h="6">
              <rect x="0" y="0" w="104" h="6" radius="3" fill="$track" />
              <rect x="0" y="0" w="60" h="6" radius="3" fill="$primary" />
            </frame>
          </col>
        </row>
        <line w="fill" fill="$outline" />
        <!-- rank 8 -->
        <row w="fill" h="64" gap="10" align="middle-left" p="1 12">
          <text w="18" text-style="Bold16" value="8" fill="$on-surface-variant" align="middle-center" />
          <row role="avatar" w="40" h="40" radius="20" fill="$av-violet" align="middle-center">
            <text text-style="LabelS" value="NK" fill="$on-primary" />
          </row>
          <col w="fill" gap="2">
            <text text-style="Name" value="Noah Kim" fill="$on-surface" />
            <text text-style="BodyS" value="8 rides" fill="$on-surface-variant" />
          </col>
          <col w="112" gap="6" align="middle-right">
            <row gap="6" align="middle-right">
              <text text-style="Bold16" value="655 PP" fill="$on-surface" />
              <text text-style="LabelS" value="▲ 4" fill="$trend-up" />
            </row>
            <frame w="104" h="6">
              <rect x="0" y="0" w="104" h="6" radius="3" fill="$track" />
              <rect x="0" y="0" w="55" h="6" radius="3" fill="$primary" />
            </frame>
          </col>
        </row>
      </col>
    </col>
    <!-- PRIMARY ACTION -->
    <col w="360" p="16 16 8 16">
      <row role="button" w="328" h="52" radius="$r-full" fill="$primary" gap="8" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/directions-bike-rounded.svg?color=%23FFFFFF"
          w="20"
          h="20"
        />
        <text text-style="Label" value="Book your next ride" fill="$on-primary" />
      </row>
    </col>
    <!-- M3 bottom navigation : Rankings active -->
    <line w="fill" fill="$outline" />
    <row role="tab-bar" w="fill" h="80" fill="$surface" p="12 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/material-symbols/home-outline-rounded.svg?color=%23655056"
            w="24"
            h="24"
          />
        </row>
        <text text-style="LabelS" value="Home" fill="$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/directions-bike-outline-rounded.svg?color=%23655056"
            w="24"
            h="24"
          />
        </row>
        <text text-style="LabelS" value="Classes" fill="$on-surface-variant" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" radius="$r-full" fill="$you-fill" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/leaderboard-rounded.svg?color=%23B0124E"
            w="24"
            h="24"
          />
        </row>
        <text text-style="LabelS" value="Rankings" fill="$primary-text" />
      </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=%23655056"
            w="24"
            h="24"
          />
        </row>
        <text text-style="LabelS" value="Profile" fill="$on-surface-variant" />
      </col>
    </row>
  </col>
</gui>
```