---
title: "Summit — Step Challenge Leaderboard"
platform: android
slug: summit-step-challenge-leaderboard
screens: ["leaderboard"]
domains: ["fitness"]
style: "flat"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "card", "badge", "avatar", "divider", "segmented-control", "button", "tab-bar"]
score: {clean: 100, consistent: 80, accessible: 86, comprehensible: 39}
url: https://gui.farm/android/summit-step-challenge-leaderboard
raw: https://gui.farm/android/summit-step-challenge-leaderboard/design.guix
download: https://gui.farm/android/summit-step-challenge-leaderboard.gui
---

# Summit — Step Challenge Leaderboard

Step-challenge leaderboard with a top-three podium, a your-rank card, and a weekly step goal.

- **Live preview:** https://gui.farm/android/summit-step-challenge-leaderboard
- **Raw source:** https://gui.farm/android/summit-step-challenge-leaderboard/design.guix
- **Download (.gui):** https://gui.farm/android/summit-step-challenge-leaderboard.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Summit — Step Challenge Leaderboard">
  <tokens>
    <color name="bg" value="#F6F3EC" />
    <color name="surface" value="#FFFFFF" />
    <color name="surface-low" value="#ECE6DA" />
    <color name="amber-tint" value="#FBEACB" />
    <color name="line" value="#E5DFD2" />
    <color name="ink" value="#1B1913" />
    <color name="body" value="#47433A" />
    <color name="muted" value="#6B6456" />
    <color name="amber" value="#F2A413" />
    <color name="amber-deep" value="#8A5A00" />
    <color name="on-amber" value="#241A00" />
    <color name="silver" value="#BFC4CB" />
    <color name="bronze" value="#C8825A" />
    <color name="down" value="#B3261E" />
    <color name="white" value="#FFFFFF" />
    <color name="av-slate" value="#55606E" />
    <color name="av-taupe" value="#6E5D4C" />
    <color name="av-blue" value="#4F6070" />
    <color name="av-mauve" value="#74566A" />
    <color name="av-olive" value="#5E6A4E" />
    <number name="r-sm" value="8" />
    <number name="r-md" value="12" />
    <number name="r-lg" value="20" />
    <number name="r-card" value="24" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="Status" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style
      name="Display"
      font-family="Roboto"
      font-size="40"
      font-weight="500"
      line-height="44"
      letter-spacing="-1"
    />
    <text-style name="TitleLarge" font-family="Roboto" font-size="20" font-weight="500" line-height="26" />
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="500" line-height="22" />
    <text-style name="BodyMedium" 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="18" />
    <text-style name="LabelSmall" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Micro" font-family="Roboto" font-size="11" font-weight="500" line-height="14" />
    <text-style
      name="Section"
      font-family="Roboto"
      font-size="11"
      font-weight="700"
      line-height="16"
      letter-spacing="0.6"
    />
    <text-style name="Steps" font-family="Roboto" font-size="15" font-weight="500" line-height="20" />
    <text-style name="Rank" font-family="Roboto" font-size="15" font-weight="700" line-height="20" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 700" styles="normal" />
  </fonts>
  <col w="360" fill="$bg">
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="Status" value="9:41" fill="$ink" />
      <row gap="6" align="middle-right">
        <img
          src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%231B1913"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%231B1913" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%231B1913"
          w="15"
          h="15"
        />
      </row>
    </row>
    <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=%231B1913"
          w="24"
          h="24"
        />
      </row>
      <text w="fill" text-style="TitleLarge" value="Step Challenge" fill="$ink" />
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/more-vert-rounded.svg?color=%231B1913"
          w="24"
          h="24"
        />
      </row>
    </row>
    <col w="360" p="4 16 20 16" gap="16">
      <col role="card" w="328" radius="$r-card" fill="$surface" border="1 $line" p="16 16 18 16" gap="18">
        <row w="fill" gap="auto" align="top-left">
          <col gap="2">
            <text text-style="Section" value="END-OF-SUMMER CHALLENGE" fill="$amber-deep" />
            <text text-style="TitleLarge" value="This Week's Podium" fill="$ink" />
          </col>
          <row role="badge" h="26" radius="$r-full" fill="$amber-tint" p="0 10" gap="4" align="middle-center">
            <img
              src="https://api.iconify.design/material-symbols/schedule-rounded.svg?color=%238A5A00"
              w="14"
              h="14"
            />
            <text text-style="LabelSmall" value="3 DAYS LEFT" fill="$amber-deep" />
          </row>
        </row>
        <row w="fill" gap="12" align="bottom-center">
          <col w="96" gap="7" align="middle-center">
            <row role="avatar" w="44" h="44" radius="22" fill="$av-taupe" align="middle-center">
              <text text-style="Label" value="M" fill="$white" />
            </row>
            <text text-style="LabelSmall" value="Marcus" fill="$ink" />
            <text text-style="Micro" value="58,120" fill="$muted" />
            <col w="76" h="111" radius="$r-sm" fill="$silver" p="8 0 0 0" align="top-center">
              <text text-style="Rank" value="2" fill="$ink" />
            </col>
          </col>
          <col w="96" gap="7" align="middle-center">
            <img
              src="https://api.iconify.design/material-symbols/trophy-rounded.svg?color=%23F2A413"
              w="22"
              h="22"
            />
            <row role="avatar" w="52" h="52" radius="26" fill="$av-slate" align="middle-center">
              <text text-style="TitleMedium" value="P" fill="$white" />
            </row>
            <text text-style="LabelSmall" value="Priya" fill="$ink" />
            <text text-style="Micro" value="62,940" fill="$muted" />
            <col w="76" h="120" radius="$r-sm" fill="$amber" p="8 0 0 0" align="top-center">
              <text text-style="Rank" value="1" fill="$on-amber" />
            </col>
          </col>
          <col w="96" gap="7" align="middle-center">
            <row role="avatar" w="44" h="44" radius="22" fill="$av-blue" align="middle-center">
              <text text-style="Label" value="D" fill="$white" />
            </row>
            <text text-style="LabelSmall" value="Dana" fill="$ink" />
            <text text-style="Micro" value="51,330" fill="$muted" />
            <col w="76" h="98" radius="$r-sm" fill="$bronze" p="8 0 0 0" align="top-center">
              <text text-style="Rank" value="3" fill="$ink" />
            </col>
          </col>
        </row>
      </col>
      <col role="card" w="328" radius="$r-card" fill="$surface" border="1 $line" p="16" gap="14">
        <row w="fill" gap="auto" align="middle-left">
          <row gap="12" align="middle-left">
            <row role="avatar" w="44" h="44" radius="22" fill="$amber" align="middle-center">
              <text text-style="Label" value="S" fill="$on-amber" />
            </row>
            <col gap="2">
              <text text-style="Section" value="YOUR RANK" fill="$muted" />
              <row gap="6" align="bottom-left">
                <text text-style="Display" value="#4" fill="$amber-deep" />
                <col h="30" align="bottom-left">
                  <text text-style="BodyMedium" value="of 128 walkers" fill="$muted" />
                </col>
              </row>
            </col>
          </row>
          <col gap="6" align="middle-right" w="fill">
            <row role="badge" h="26" radius="$r-full" fill="$amber-tint" p="0 10" gap="3" align="middle-center">
              <img
                src="https://api.iconify.design/material-symbols/arrow-upward-rounded.svg?color=%238A5A00"
                w="14"
                h="14"
              />
              <text text-style="LabelSmall" value="Up 2 this week" fill="$amber-deep" />
            </row>
            <text text-style="Steps" value="48,210 steps" fill="$ink" align="right" />
          </col>
        </row>
        <line role="divider" w="fill" fill="$line" />
        <col w="fill" gap="8">
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="Micro" value="WEEKLY GOAL" fill="$muted" />
            <row gap="8" align="middle-right">
              <text text-style="LabelSmall" value="48,210 / 60,000" fill="$body" />
              <text text-style="LabelSmall" value="3,120 behind 3rd" fill="$amber-deep" />
            </row>
          </row>
          <frame w="296" h="8" radius="4" clip="true">
            <rect x="0" y="0" w="296" h="8" fill="$surface-low" />
            <rect x="0" y="0" w="238" h="8" fill="$amber" />
          </frame>
        </col>
      </col>
      <row
        role="segmented-control"
        w="328"
        h="44"
        radius="$r-full"
        fill="$surface-low"
        p="3"
        gap="2"
        align="middle-center"
      >
        <row w="fill" h="fill" radius="$r-full" fill="$amber" align="middle-center">
          <text text-style="Label" value="This Week" fill="$on-amber" />
        </row>
        <row w="fill" h="fill" radius="$r-full" align="middle-center">
          <text text-style="Label" value="All Time" fill="$muted" />
        </row>
      </row>
      <col w="328" gap="8">
        <row w="328" p="0 14" gap="10" align="middle-left">
          <text w="24" text-style="Micro" value="#" fill="$muted" align="center" />
          <text w="fill" text-style="Micro" value="WALKER" fill="$muted" />
          <text w="60" text-style="Micro" value="STEPS" fill="$muted" align="right" />
        </row>
        <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $line" clip="true">
          <row w="fill" h="60" p="0 14" gap="10" align="middle-left">
            <row role="badge" w="24" h="24" radius="$r-md" fill="$amber" align="middle-center">
              <text text-style="LabelSmall" value="1" fill="$on-amber" />
            </row>
            <row role="avatar" w="36" h="36" radius="18" fill="$av-slate" align="middle-center">
              <text text-style="Label" value="P" fill="$white" />
            </row>
            <col w="150" gap="5">
              <row w="fill" gap="auto" align="middle-left">
                <text text-style="TitleMedium" value="Priya K." fill="$ink" />
                <row gap="2" align="middle-center">
                  <img
                    src="https://api.iconify.design/material-symbols/arrow-upward-rounded.svg?color=%238A5A00"
                    w="13"
                    h="13"
                  />
                  <text text-style="Micro" value="1" fill="$amber-deep" />
                </row>
              </row>
              <frame w="150" h="6" radius="3" clip="true">
                <rect x="0" y="0" w="150" h="6" fill="$surface-low" />
                <rect x="0" y="0" w="150" h="6" fill="$amber" />
              </frame>
            </col>
            <text w="60" text-style="Steps" value="62,940" fill="$ink" align="right" />
          </row>
          <line role="divider" w="fill" fill="$line" />
          <row w="fill" h="60" p="0 14" gap="10" align="middle-left">
            <row role="badge" w="24" h="24" radius="$r-md" fill="$silver" align="middle-center">
              <text text-style="LabelSmall" value="2" fill="$ink" />
            </row>
            <row role="avatar" w="36" h="36" radius="18" fill="$av-taupe" align="middle-center">
              <text text-style="Label" value="M" fill="$white" />
            </row>
            <col w="150" gap="5">
              <row w="fill" gap="auto" align="middle-left">
                <text text-style="TitleMedium" value="Marcus T." fill="$ink" />
                <row gap="2" align="middle-center">
                  <img
                    src="https://api.iconify.design/material-symbols/arrow-downward-rounded.svg?color=%23B3261E"
                    w="13"
                    h="13"
                  />
                  <text text-style="Micro" value="1" fill="$down" />
                </row>
              </row>
              <frame w="150" h="6" radius="3" clip="true">
                <rect x="0" y="0" w="150" h="6" fill="$surface-low" />
                <rect x="0" y="0" w="139" h="6" fill="$amber" />
              </frame>
            </col>
            <text w="60" text-style="Steps" value="58,120" fill="$ink" align="right" />
          </row>
          <line role="divider" w="fill" fill="$line" />
          <row w="fill" h="60" p="0 14" gap="10" align="middle-left">
            <row role="badge" w="24" h="24" radius="$r-md" fill="$bronze" align="middle-center">
              <text text-style="LabelSmall" value="3" fill="$ink" />
            </row>
            <row role="avatar" w="36" h="36" radius="18" fill="$av-blue" align="middle-center">
              <text text-style="Label" value="D" fill="$white" />
            </row>
            <col w="150" gap="5">
              <row w="fill" gap="auto" align="middle-left">
                <text text-style="TitleMedium" value="Dana R." fill="$ink" />
                <row gap="2" align="middle-center">
                  <img
                    src="https://api.iconify.design/material-symbols/arrow-upward-rounded.svg?color=%238A5A00"
                    w="13"
                    h="13"
                  />
                  <text text-style="Micro" value="2" fill="$amber-deep" />
                </row>
              </row>
              <frame w="150" h="6" radius="3" clip="true">
                <rect x="0" y="0" w="150" h="6" fill="$surface-low" />
                <rect x="0" y="0" w="122" h="6" fill="$amber" />
              </frame>
            </col>
            <text w="60" text-style="Steps" value="51,330" fill="$ink" align="right" />
          </row>
          <line role="divider" w="fill" fill="$line" />
          <row w="fill" h="60" p="0 14 0 10" gap="10" fill="$amber-tint" border="0" align="middle-left">
            <text w="24" text-style="Rank" value="4" fill="$amber-deep" align="center" />
            <row role="avatar" w="36" h="36" radius="18" fill="$amber" align="middle-center">
              <text text-style="Label" value="S" fill="$on-amber" />
            </row>
            <col w="150" gap="5">
              <row w="fill" gap="auto" align="middle-left">
                <row gap="6" align="middle-left">
                  <text text-style="TitleMedium" value="You" fill="$ink" />
                  <text text-style="Micro" value="Sam" fill="$body" />
                </row>
                <row gap="2" align="middle-center">
                  <img
                    src="https://api.iconify.design/material-symbols/arrow-upward-rounded.svg?color=%238A5A00"
                    w="13"
                    h="13"
                  />
                  <text text-style="Micro" value="2" fill="$amber-deep" />
                </row>
              </row>
              <frame w="150" h="6" radius="3" clip="true">
                <rect x="0" y="0" w="150" h="6" fill="$surface" />
                <rect x="0" y="0" w="115" h="6" fill="$amber" />
              </frame>
            </col>
            <text w="60" text-style="Steps" value="48,210" fill="$ink" align="right" />
          </row>
          <line role="divider" w="fill" fill="$line" />
          <row w="fill" h="60" p="0 14" gap="10" align="middle-left">
            <text w="24" text-style="Rank" value="5" fill="$muted" align="center" />
            <row role="avatar" w="36" h="36" radius="18" fill="$av-mauve" align="middle-center">
              <text text-style="Label" value="L" fill="$white" />
            </row>
            <col w="150" gap="5">
              <row w="fill" gap="auto" align="middle-left">
                <text text-style="TitleMedium" value="Leo M." fill="$ink" />
                <row gap="2" align="middle-center">
                  <img
                    src="https://api.iconify.design/material-symbols/arrow-downward-rounded.svg?color=%23B3261E"
                    w="13"
                    h="13"
                  />
                  <text text-style="Micro" value="2" fill="$down" />
                </row>
              </row>
              <frame w="150" h="6" radius="3" clip="true">
                <rect x="0" y="0" w="150" h="6" fill="$surface-low" />
                <rect x="0" y="0" w="107" h="6" fill="$amber" />
              </frame>
            </col>
            <text w="60" text-style="Steps" value="44,870" fill="$ink" align="right" />
          </row>
          <line role="divider" w="fill" fill="$line" />
          <row w="fill" h="60" p="0 14" gap="10" align="middle-left">
            <text w="24" text-style="Rank" value="6" fill="$muted" align="center" />
            <row role="avatar" w="36" h="36" radius="18" fill="$av-olive" align="middle-center">
              <text text-style="Label" value="A" fill="$white" />
            </row>
            <col w="150" gap="5">
              <row w="fill" gap="auto" align="middle-left">
                <text text-style="TitleMedium" value="Aisha B." fill="$ink" />
                <row gap="2" align="middle-center">
                  <img
                    src="https://api.iconify.design/material-symbols/arrow-upward-rounded.svg?color=%238A5A00"
                    w="13"
                    h="13"
                  />
                  <text text-style="Micro" value="1" fill="$amber-deep" />
                </row>
              </row>
              <frame w="150" h="6" radius="3" clip="true">
                <rect x="0" y="0" w="150" h="6" fill="$surface-low" />
                <rect x="0" y="0" w="98" h="6" fill="$amber" />
              </frame>
            </col>
            <text w="60" text-style="Steps" value="41,020" fill="$ink" align="right" />
          </row>
          <line role="divider" w="fill" fill="$line" />
          <row w="fill" h="60" p="0 14" gap="10" align="middle-left">
            <text w="24" text-style="Rank" value="7" fill="$muted" align="center" />
            <row role="avatar" w="36" h="36" radius="18" fill="$av-slate" align="middle-center">
              <text text-style="Label" value="T" fill="$white" />
            </row>
            <col w="150" gap="5">
              <row w="fill" gap="auto" align="middle-left">
                <text text-style="TitleMedium" value="Tom W." fill="$ink" />
                <img
                  src="https://api.iconify.design/material-symbols/remove-rounded.svg?color=%236B6456"
                  w="13"
                  h="13"
                />
              </row>
              <frame w="150" h="6" radius="3" clip="true">
                <rect x="0" y="0" w="150" h="6" fill="$surface-low" />
                <rect x="0" y="0" w="90" h="6" fill="$amber" />
              </frame>
            </col>
            <text w="60" text-style="Steps" value="37,650" fill="$ink" align="right" />
          </row>
          <line role="divider" w="fill" fill="$line" />
          <row w="fill" h="60" p="0 14" gap="10" align="middle-left">
            <text w="24" text-style="Rank" value="8" fill="$muted" align="center" />
            <row role="avatar" w="36" h="36" radius="18" fill="$av-taupe" align="middle-center">
              <text text-style="Label" value="N" fill="$white" />
            </row>
            <col w="150" gap="5">
              <row w="fill" gap="auto" align="middle-left">
                <text text-style="TitleMedium" value="Nadia S." fill="$ink" />
                <row gap="2" align="middle-center">
                  <img
                    src="https://api.iconify.design/material-symbols/arrow-upward-rounded.svg?color=%238A5A00"
                    w="13"
                    h="13"
                  />
                  <text text-style="Micro" value="3" fill="$amber-deep" />
                </row>
              </row>
              <frame w="150" h="6" radius="3" clip="true">
                <rect x="0" y="0" w="150" h="6" fill="$surface-low" />
                <rect x="0" y="0" w="80" h="6" fill="$amber" />
              </frame>
            </col>
            <text w="60" text-style="Steps" value="33,480" fill="$ink" align="right" />
          </row>
        </col>
      </col>
      <row role="button" w="328" h="52" radius="$r-full" fill="$amber" gap="8" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/person-add-rounded.svg?color=%23241A00"
          w="20"
          h="20"
        />
        <text text-style="Label" value="Invite friends" fill="$on-amber" />
      </row>
    </col>
    <row
      role="tab-bar"
      w="fill"
      h="80"
      fill="$surface"
      border="1 0 0 0 $line"
      p="10 0 16 0"
      gap="auto"
      align="top-center"
    >
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/home-outline-rounded.svg?color=%236B6456"
            w="24"
            h="24"
          />
        </row>
        <text text-style="Micro" value="Home" fill="$muted" />
      </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-walk-rounded.svg?color=%236B6456"
            w="24"
            h="24"
          />
        </row>
        <text text-style="Micro" value="Challenges" fill="$muted" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" radius="$r-full" fill="$amber-tint" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/leaderboard-rounded.svg?color=%238A5A00"
            w="24"
            h="24"
          />
        </row>
        <text text-style="Micro" value="Rankings" fill="$amber-deep" />
      </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=%236B6456"
            w="24"
            h="24"
          />
        </row>
        <text text-style="Micro" value="Profile" fill="$muted" />
      </col>
    </row>
  </col>
</gui>
```