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

# Harrier — Weekly Leaderboard

Run club weekly leaderboard ranking athletes by distance, with a your-position card and weekly goal.

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

## Source (design.guix)

```xml
<gui version="0.2" name="Harrier — Weekly Leaderboard">
  <tokens>
    <color name="surface" value="#14121A" />
    <color name="surface-container" value="#201C29" />
    <color name="surface-container-high" value="#2A2533" />
    <color name="on-surface" value="#F4F0F7" />
    <color name="on-surface-variant" value="#C9C2D2" />
    <color name="on-surface-dim" value="#ABA2B6" />
    <color name="outline-variant" value="#423B4E" />
    <color name="accent" value="#FF6F92" />
    <color name="rose-text" value="#FF9BB4" />
    <color name="rose-container" value="#3A1B27" />
    <color name="rose-track" value="#4A2A37" />
    <color name="on-accent" value="#3A0713" />
    <number name="r-sm" value="8" />
    <number name="r-md" value="12" />
    <number name="r-lg" value="16" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="HeadlineSmall" font-family="Roboto" font-size="24" font-weight="400" line-height="32" />
    <text-style name="RankBig" font-family="Roboto" font-size="30" font-weight="700" line-height="34" />
    <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="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="600" 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="600" line-height="16" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>
  <col w="360" fill="$surface">
    <!-- system status bar : device chrome, deliberately untagged -->
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="LabelSmall" 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=%23F4F0F7"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23F4F0F7" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23F4F0F7"
          w="15"
          h="15"
        />
      </row>
    </row>
    <!-- M3 top app bar -->
    <row role="top-navigation-bar" w="fill" h="64" p="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=%23F4F0F7"
          w="24"
          h="24"
        />
      </row>
      <text w="fill" text-style="TitleLarge" value="Harrier Run Club" fill="$on-surface" />
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/share-rounded.svg?color=%23F4F0F7"
          w="22"
          h="22"
        />
      </row>
    </row>
    <line fill="$outline-variant" />
    <col w="fill" p="12 16 16 16" gap="16">
      <!-- header : title + reset countdown -->
      <row w="fill" gap="auto" align="middle-left">
        <col gap="2">
          <text text-style="HeadlineSmall" value="Weekly Leaderboard" fill="$on-surface" />
          <text text-style="BodyMedium" value="Week 32 standings" fill="$on-surface-variant" />
        </col>
        <col gap="2" align="top-right">
          <text text-style="LabelSmall" value="RESETS IN" fill="$on-surface-dim" align="right" />
          <row gap="4" align="middle-right">
            <img
              src="https://api.iconify.design/material-symbols/schedule-rounded.svg?color=%23FF9BB4"
              w="15"
              h="15"
            />
            <text text-style="LabelLarge" value="2d 14h" fill="$rose-text" />
          </row>
        </col>
      </row>
      <!-- your-position summary card : rose accents drive the data -->
      <col role="card" w="fill" radius="$r-lg" fill="$surface-container" p="16" gap="14">
        <row w="fill" gap="auto" align="top-left">
          <col gap="2">
            <text text-style="LabelSmall" value="YOUR POSITION" fill="$rose-text" />
            <row gap="6" align="middle-left">
              <text text-style="RankBig" value="#5" fill="$on-surface" />
              <text text-style="BodyMedium" value="of 8 runners" fill="$on-surface-variant" />
            </row>
          </col>
          <col gap="2" align="top-right">
            <text text-style="TitleLarge" value="42.0 km" fill="$on-surface" align="right" />
            <row gap="2" align="middle-right">
              <img
                src="https://api.iconify.design/material-symbols/arrow-drop-up-rounded.svg?color=%23FF9BB4"
                w="18"
                h="18"
              />
              <text text-style="LabelMedium" value="+2 this week" fill="$rose-text" />
            </row>
          </col>
        </row>
        <col gap="6">
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="LabelMedium" value="Weekly goal" fill="$on-surface-variant" />
            <text text-style="LabelMedium" value="42.0 / 50 km" fill="$on-surface" />
          </row>
          <row w="296" h="8" radius="$r-full" fill="$surface-container-high">
            <rect w="249" h="8" radius="$r-full" fill="$accent" />
          </row>
        </col>
        <text text-style="BodyMedium" value="16.2 km behind Amara in 1st place" fill="$on-surface-variant" />
        <row role="button" w="fill" h="44" radius="$r-full" fill="$accent" gap="8" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/directions-run-rounded.svg?color=%233A0713"
            w="20"
            h="20"
          />
          <text text-style="LabelLarge" value="Log a run" fill="$on-accent" />
        </row>
      </col>
      <!-- timeframe segmented control -->
      <row
        role="segmented-control"
        w="fill"
        h="40"
        radius="$r-full"
        fill="$surface-container"
        p="4"
        gap="4"
        align="middle-center"
      >
        <row w="fill" h="fill" radius="$r-full" fill="$accent" align="middle-center">
          <text text-style="LabelLarge" value="This week" fill="$on-accent" />
        </row>
        <row w="fill" h="fill" radius="$r-full" align="middle-center">
          <text text-style="LabelLarge" value="This month" fill="$on-surface-variant" />
        </row>
        <row w="fill" h="fill" radius="$r-full" align="middle-center">
          <text text-style="LabelLarge" value="All time" fill="$on-surface-variant" />
        </row>
      </row>
      <!-- column header -->
      <row w="fill" p="0 14" gap="12" align="middle-left">
        <text w="28" text-style="LabelSmall" value="RANK" fill="$on-surface-dim" />
        <text w="fill" text-style="LabelSmall" value="ATHLETE" fill="$on-surface-dim" />
        <text text-style="LabelSmall" value="DISTANCE" fill="$on-surface-dim" align="right" />
      </row>
      <!-- ranked list -->
      <col w="fill" gap="8">
        <!-- 1 : leader, accent rank chip + accent avatar ring -->
        <col role="card" w="fill" radius="$r-md" fill="$surface-container" p="12" gap="10">
          <row w="fill" gap="12" align="middle-left">
            <row w="28" h="26" align="middle-center">
              <row w="26" h="26" radius="$r-full" fill="$accent" align="middle-center">
                <text text-style="LabelLarge" value="1" fill="$on-accent" />
              </row>
            </row>
            <row
              role="avatar"
              w="44"
              h="44"
              radius="22"
              fill="$surface-container-high"
              border="2 $accent"
              align="middle-center"
            >
              <text text-style="TitleMedium" value="AO" fill="$on-surface" />
            </row>
            <col w="fill" gap="2">
              <text truncate="true" text-style="TitleMedium" value="Amara Okafor" fill="$on-surface" />
              <text text-style="LabelMedium" value="7 runs · 4:38 /km" fill="$on-surface-dim" />
            </col>
            <col gap="2" align="top-right">
              <text text-style="TitleMedium" value="58.2 km" fill="$on-surface" align="right" />
              <row gap="1" align="middle-right">
                <img
                  src="https://api.iconify.design/material-symbols/arrow-drop-up-rounded.svg?color=%23C9C2D2"
                  w="16"
                  h="16"
                />
                <text text-style="LabelSmall" value="1" fill="$on-surface-variant" />
              </row>
            </col>
          </row>
          <row w="304" h="6" radius="$r-full" fill="$surface-container-high">
            <rect w="304" h="6" radius="$r-full" fill="$accent" />
          </row>
        </col>
        <!-- 2 : outlined rose rank chip -->
        <col role="card" w="fill" radius="$r-md" fill="$surface-container" p="12" gap="10">
          <row w="fill" gap="12" align="middle-left">
            <row w="28" h="26" align="middle-center">
              <row w="26" h="26" radius="$r-full" fill="none" border="1 $accent" align="middle-center">
                <text text-style="LabelLarge" value="2" fill="$rose-text" />
              </row>
            </row>
            <row role="avatar" w="44" h="44" radius="22" fill="$surface-container-high" align="middle-center">
              <text text-style="TitleMedium" value="DM" fill="$on-surface" />
            </row>
            <col w="fill" gap="2">
              <text truncate="true" text-style="TitleMedium" value="Diego Marín" fill="$on-surface" />
              <text text-style="LabelMedium" value="6 runs · 4:45 /km" fill="$on-surface-dim" />
            </col>
            <col gap="2" align="top-right">
              <text text-style="TitleMedium" value="51.6 km" fill="$on-surface" align="right" />
              <row gap="1" align="middle-right">
                <img
                  src="https://api.iconify.design/material-symbols/arrow-drop-down-rounded.svg?color=%23C9C2D2"
                  w="16"
                  h="16"
                />
                <text text-style="LabelSmall" value="1" fill="$on-surface-variant" />
              </row>
            </col>
          </row>
          <row w="304" h="6" radius="$r-full" fill="$surface-container-high">
            <rect w="270" h="6" radius="$r-full" fill="$accent" />
          </row>
        </col>
        <!-- 3 : outlined rose rank chip -->
        <col role="card" w="fill" radius="$r-md" fill="$surface-container" p="12" gap="10">
          <row w="fill" gap="12" align="middle-left">
            <row w="28" h="26" align="middle-center">
              <row w="26" h="26" radius="$r-full" fill="none" border="1 $accent" align="middle-center">
                <text text-style="LabelLarge" value="3" fill="$rose-text" />
              </row>
            </row>
            <row role="avatar" w="44" h="44" radius="22" fill="$surface-container-high" align="middle-center">
              <text text-style="TitleMedium" value="PN" fill="$on-surface" />
            </row>
            <col w="fill" gap="2">
              <text truncate="true" text-style="TitleMedium" value="Priya Nair" fill="$on-surface" />
              <text text-style="LabelMedium" value="6 runs · 4:51 /km" fill="$on-surface-dim" />
            </col>
            <col gap="2" align="top-right">
              <text text-style="TitleMedium" value="47.9 km" fill="$on-surface" align="right" />
              <row gap="1" align="middle-right">
                <img
                  src="https://api.iconify.design/material-symbols/remove-rounded.svg?color=%23ABA2B6"
                  w="16"
                  h="16"
                />
              </row>
            </col>
          </row>
          <row w="304" h="6" radius="$r-full" fill="$surface-container-high">
            <rect w="250" h="6" radius="$r-full" fill="$accent" />
          </row>
        </col>
        <!-- 4 : plain rank number -->
        <col role="card" w="fill" radius="$r-md" fill="$surface-container" p="12" gap="10">
          <row w="fill" gap="12" align="middle-left">
            <row w="28" h="26" align="middle-center">
              <text text-style="TitleMedium" value="4" fill="$on-surface-variant" />
            </row>
            <row role="avatar" w="44" h="44" radius="22" fill="$surface-container-high" align="middle-center">
              <text text-style="TitleMedium" value="NB" fill="$on-surface" />
            </row>
            <col w="fill" gap="2">
              <text truncate="true" text-style="TitleMedium" value="Noah Bergström" fill="$on-surface" />
              <text text-style="LabelMedium" value="5 runs · 4:58 /km" fill="$on-surface-dim" />
            </col>
            <col gap="2" align="top-right">
              <text text-style="TitleMedium" value="44.3 km" fill="$on-surface" align="right" />
              <row gap="1" align="middle-right">
                <img
                  src="https://api.iconify.design/material-symbols/arrow-drop-up-rounded.svg?color=%23C9C2D2"
                  w="16"
                  h="16"
                />
                <text text-style="LabelSmall" value="2" fill="$on-surface-variant" />
              </row>
            </col>
          </row>
          <row w="304" h="6" radius="$r-full" fill="$surface-container-high">
            <rect w="231" h="6" radius="$r-full" fill="$accent" />
          </row>
        </col>
        <!-- 5 : YOU — highlighted row with rose rail -->
        <col role="card" w="fill" radius="$r-md" fill="$rose-container" border-left="3 $accent" p="12" gap="10">
          <row w="fill" gap="12" align="middle-left">
            <row w="28" h="26" align="middle-center">
              <text text-style="TitleMedium" value="5" fill="$on-surface" />
            </row>
            <row
              role="avatar"
              w="44"
              h="44"
              radius="22"
              fill="$surface-container-high"
              border="2 $accent"
              align="middle-center"
            >
              <text text-style="TitleMedium" value="JR" fill="$on-surface" />
            </row>
            <col w="fill" gap="2">
              <row gap="6" align="middle-left">
                <text truncate="true" text-style="TitleMedium" value="Jordan Reyes" fill="$on-surface" />
                <row role="badge" h="18" radius="$r-sm" fill="$accent" p="0 6" align="middle-center">
                  <text text-style="LabelSmall" value="YOU" fill="$on-accent" />
                </row>
              </row>
              <text text-style="LabelMedium" value="5 runs · 5:02 /km" fill="$on-surface-variant" />
            </col>
            <col gap="2" align="top-right">
              <text text-style="TitleMedium" value="42.0 km" fill="$on-surface" align="right" />
              <row gap="1" align="middle-right">
                <img
                  src="https://api.iconify.design/material-symbols/arrow-drop-up-rounded.svg?color=%23FF9BB4"
                  w="16"
                  h="16"
                />
                <text text-style="LabelSmall" value="2" fill="$rose-text" />
              </row>
            </col>
          </row>
          <row w="304" h="6" radius="$r-full" fill="$rose-track">
            <rect w="219" h="6" radius="$r-full" fill="$accent" />
          </row>
        </col>
        <!-- 6 : plain rank number -->
        <col role="card" w="fill" radius="$r-md" fill="$surface-container" p="12" gap="10">
          <row w="fill" gap="12" align="middle-left">
            <row w="28" h="26" align="middle-center">
              <text text-style="TitleMedium" value="6" fill="$on-surface-variant" />
            </row>
            <row role="avatar" w="44" h="44" radius="22" fill="$surface-container-high" align="middle-center">
              <text text-style="TitleMedium" value="KM" fill="$on-surface" />
            </row>
            <col w="fill" gap="2">
              <text truncate="true" text-style="TitleMedium" value="Kwame Mensah" fill="$on-surface" />
              <text text-style="LabelMedium" value="5 runs · 5:09 /km" fill="$on-surface-dim" />
            </col>
            <col gap="2" align="top-right">
              <text text-style="TitleMedium" value="39.4 km" fill="$on-surface" align="right" />
              <row gap="1" align="middle-right">
                <img
                  src="https://api.iconify.design/material-symbols/arrow-drop-down-rounded.svg?color=%23C9C2D2"
                  w="16"
                  h="16"
                />
                <text text-style="LabelSmall" value="2" fill="$on-surface-variant" />
              </row>
            </col>
          </row>
          <row w="304" h="6" radius="$r-full" fill="$surface-container-high">
            <rect w="206" h="6" radius="$r-full" fill="$accent" />
          </row>
        </col>
        <!-- 7 : plain rank number -->
        <col role="card" w="fill" radius="$r-md" fill="$surface-container" p="12" gap="10">
          <row w="fill" gap="12" align="middle-left">
            <row w="28" h="26" align="middle-center">
              <text text-style="TitleMedium" value="7" fill="$on-surface-variant" />
            </row>
            <row role="avatar" w="44" h="44" radius="22" fill="$surface-container-high" align="middle-center">
              <text text-style="TitleMedium" value="LF" fill="$on-surface" />
            </row>
            <col w="fill" gap="2">
              <text truncate="true" text-style="TitleMedium" value="Lena Fischer" fill="$on-surface" />
              <text text-style="LabelMedium" value="4 runs · 5:14 /km" fill="$on-surface-dim" />
            </col>
            <col gap="2" align="top-right">
              <text text-style="TitleMedium" value="35.1 km" fill="$on-surface" align="right" />
              <row gap="1" align="middle-right">
                <img
                  src="https://api.iconify.design/material-symbols/remove-rounded.svg?color=%23ABA2B6"
                  w="16"
                  h="16"
                />
              </row>
            </col>
          </row>
          <row w="304" h="6" radius="$r-full" fill="$surface-container-high">
            <rect w="183" h="6" radius="$r-full" fill="$accent" />
          </row>
        </col>
        <!-- 8 : plain rank number -->
        <col role="card" w="fill" radius="$r-md" fill="$surface-container" p="12" gap="10">
          <row w="fill" gap="12" align="middle-left">
            <row w="28" h="26" align="middle-center">
              <text text-style="TitleMedium" value="8" fill="$on-surface-variant" />
            </row>
            <row role="avatar" w="44" h="44" radius="22" fill="$surface-container-high" align="middle-center">
              <text text-style="TitleMedium" value="SR" fill="$on-surface" />
            </row>
            <col w="fill" gap="2">
              <text truncate="true" text-style="TitleMedium" value="Sofia Rossi" fill="$on-surface" />
              <text text-style="LabelMedium" value="4 runs · 5:20 /km" fill="$on-surface-dim" />
            </col>
            <col gap="2" align="top-right">
              <text text-style="TitleMedium" value="30.8 km" fill="$on-surface" align="right" />
              <row gap="1" align="middle-right">
                <img
                  src="https://api.iconify.design/material-symbols/arrow-drop-down-rounded.svg?color=%23C9C2D2"
                  w="16"
                  h="16"
                />
                <text text-style="LabelSmall" value="1" fill="$on-surface-variant" />
              </row>
            </col>
          </row>
          <row w="304" h="6" radius="$r-full" fill="$surface-container-high">
            <rect w="161" h="6" radius="$r-full" fill="$accent" />
          </row>
        </col>
      </col>
      <!-- invite CTA : rose outlined pill -->
      <row
        role="button"
        w="fill"
        h="48"
        radius="$r-full"
        fill="none"
        border="1 $accent"
        gap="8"
        align="middle-center"
      >
        <img
          src="https://api.iconify.design/material-symbols/person-add-rounded.svg?color=%23FF9BB4"
          w="20"
          h="20"
        />
        <text text-style="LabelLarge" value="Invite friends to Harrier" fill="$rose-text" />
      </row>
    </col>
    <!-- M3 bottom navigation : active destination gets the accent pill -->
    <row role="tab-bar" w="fill" h="80" fill="$surface-container" p="12 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/dynamic-feed-rounded.svg?color=%23C9C2D2"
            w="24"
            h="24"
          />
        </row>
        <text text-style="LabelMedium" value="Feed" 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/flag-rounded.svg?color=%23C9C2D2"
            w="24"
            h="24"
          />
        </row>
        <text text-style="LabelMedium" value="Challenges" fill="$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/view-kanban-rounded.svg?color=%233A0713"
            w="24"
            h="24"
          />
        </row>
        <text text-style="LabelMedium" value="Leaderboard" fill="$rose-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-rounded.svg?color=%23C9C2D2"
            w="24"
            h="24"
          />
        </row>
        <text text-style="LabelMedium" value="Profile" fill="$on-surface-variant" />
      </col>
    </row>
  </col>
</gui>
```