---
title: "Amethyst League — Weekly Leaderboard"
platform: android
slug: amethyst-league-leaderboard
screens: ["leaderboard"]
domains: ["education"]
style: "flat"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "card", "chip", "badge", "segmented-control", "button", "tab-bar"]
score: {clean: 100, consistent: 82, accessible: 82, comprehensible: 26}
url: https://gui.farm/android/amethyst-league-leaderboard
raw: https://gui.farm/android/amethyst-league-leaderboard/design.guix
download: https://gui.farm/android/amethyst-league-leaderboard.gui
---

# Amethyst League — Weekly Leaderboard

Language-learning weekly league leaderboard with promotion and demotion tiers, XP totals, and a your-standing tracker.

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

## Source (design.guix)

```xml
<gui version="0.2" name="Amethyst League — Weekly Leaderboard">
  <tokens>
    <color name="bg" value="#FCFBFF" />
    <color name="surface" value="#FFFFFF" />
    <color name="surface-alt" value="#F5F3FB" />
    <color name="line" value="#ECEAF2" />
    <color name="user-fill" value="#F0EAFC" />
    <color name="promo-band" value="#F3EEFD" />
    <color name="demote-band" value="#FCEEF0" />
    <color name="accent" value="#6D28D9" />
    <color name="accent-str" value="#5B21B6" />
    <color name="accent-tint" value="#EDE7FB" />
    <color name="ink" value="#1B1A22" />
    <color name="ink-2" value="#4C4956" />
    <color name="ink-3" value="#605D6B" />
    <color name="white" value="#FFFFFF" />
    <color name="green" value="#26692C" />
    <color name="green-tint" value="#DCEEDD" />
    <color name="red" value="#C62828" />
    <color name="demote-txt" value="#B3261E" />
    <color name="rankchip" value="#ECEAF2" />
    <color name="gold" value="#F4C430" />
    <color name="gold-ink" value="#4A3800" />
    <color name="silver" value="#C7CBD4" />
    <color name="silver-ink" value="#33343A" />
    <color name="bronze" value="#CD8B54" />
    <color name="bronze-ink" value="#3D2410" />
    <color name="av-rose" value="#FBD7E4" />
    <color name="av-blue" value="#D7E9FB" />
    <color name="av-amber" value="#FBEBCF" />
    <color name="av-peach" value="#FAD9C6" />
    <color name="av-teal" value="#DFF1F0" />
    <number name="r-xs" value="6" />
    <number name="r-md" value="14" />
    <number name="r-lg" value="20" />
    <number name="r-full" value="999" />
  </tokens>

  <styles>
    <text-style name="DisplaySmall" font-family="Roboto" font-size="22" font-weight="700" line-height="28" />
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="700" line-height="22" />
    <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="13" font-weight="500" line-height="18" />
    <text-style name="LabelSmall" font-family="Roboto" font-size="11" font-weight="700" line-height="16" />
    <text-style name="Metric" font-family="Roboto" font-size="15" font-weight="700" line-height="20" />
    <text-style name="RankNum" font-family="Roboto" font-size="14" font-weight="700" line-height="20" />
  </styles>

  <fonts>
    <font family="Roboto" source="google" weights="500 700" styles="normal" />
  </fonts>

  <col w="360" fill="$bg">

    <!-- device chrome : status bar (untagged) -->
    <row w="360" h="28" p="0 16" align="middle-left">
      <text text-style="LabelMedium" value="9:41" fill="$ink" />
      <row gap="6" align="middle-right" w="fill">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt.svg?color=%231B1A22" w="16" h="16" />
        <img src="https://api.iconify.design/material-symbols/wifi.svg?color=%231B1A22" w="16" h="16" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt.svg?color=%231B1A22" w="16" h="16" />
      </row>
    </row>

    <!-- top app bar -->
    <row role="top-navigation-bar" w="360" h="56" p="0 8 0 4" gap="4" align="middle-left" fill="$bg">
      <row w="40" h="40" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%231B1A22" w="24" h="24" />
      </row>
      <text w="fill" text-style="TitleMedium" value="Leagues" fill="$ink" />
      <row w="40" h="40" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/help-outline-rounded.svg?color=%234C4956" w="22" h="22" />
      </row>
    </row>

    <col w="360" p="4 16 0 16" gap="12">

      <!-- league identity card -->
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $line" p="14" gap="12">
        <row w="300" gap="12" align="middle-left">
          <row w="44" h="44" radius="$r-full" fill="$accent" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/diamond-rounded.svg?color=%23FFFFFF" w="24" h="24" />
          </row>
          <col w="fill" gap="2">
            <text text-style="DisplaySmall" value="Amethyst League" fill="$ink" />
            <text text-style="LabelMedium" value="Top 3 promote · Bottom 2 drop" fill="$ink-2" />
          </col>
          <row role="chip" h="28" radius="$r-full" fill="$accent-tint" p="0 10" gap="4" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/schedule-rounded.svg?color=%235B21B6" w="15" h="15" />
            <text text-style="LabelSmall" value="2d 14h" fill="$accent-str" />
          </row>
        </row>
        <row w="300" h="1" fill="$line" />
        <!-- tier progression rail -->
        <row w="300" gap="8" align="middle-center">
          <row gap="5" align="middle-center">
            <row w="24" h="24" radius="$r-full" fill="$silver" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/diamond-outline-rounded.svg?color=%2333343A" w="14" h="14" />
            </row>
            <text text-style="LabelSmall" value="Sapphire" fill="$ink-3" />
          </row>
          <row w="20" h="2" fill="$line" />
          <row gap="5" align="middle-center">
            <row w="28" h="28" radius="$r-full" fill="$accent" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/diamond-rounded.svg?color=%23FFFFFF" w="17" h="17" />
            </row>
            <text text-style="LabelSmall" value="Amethyst" fill="$accent-str" />
          </row>
          <row w="20" h="2" fill="$line" />
          <row gap="5" align="middle-center">
            <row w="24" h="24" radius="$r-full" fill="$surface-alt" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/lock-rounded.svg?color=%23605D6B" w="13" h="13" />
            </row>
            <text text-style="LabelSmall" value="Diamond" fill="$ink-3" />
          </row>
        </row>
      </col>

      <!-- your standing card -->
      <col role="card" w="328" radius="$r-lg" fill="$user-fill" border="1 $accent-tint" p="14" gap="10">
        <row w="300" align="middle-left">
          <text w="fill" text-style="LabelSmall" value="YOUR STANDING" fill="$accent-str" />
          <row role="badge" h="22" radius="$r-full" fill="$green-tint" p="0 9" gap="3" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/shield-rounded.svg?color=%2326692C" w="13" h="13" />
            <text text-style="LabelSmall" value="Safe" fill="$green" />
          </row>
        </row>
        <row w="300" gap="10" align="middle-left">
          <text text-style="DisplaySmall" value="5" fill="$ink" />
          <col w="fill" gap="1">
            <text text-style="TitleMedium" value="of 8 learners" fill="$ink" />
            <row gap="3" align="middle-left">
              <img src="https://api.iconify.design/material-symbols/arrow-upward-rounded.svg?color=%2326692C" w="14" h="14" />
              <text text-style="LabelMedium" value="Up 2 places this week" fill="$green" />
            </row>
          </col>
        </row>
        <col w="300" gap="6">
          <row w="300" align="middle-left">
            <text w="fill" text-style="LabelMedium" value="2,760 / 3,990 XP to promote" fill="$ink-2" />
            <text text-style="LabelMedium" value="Reach rank 3" fill="$accent-str" />
          </row>
          <row w="296" h="10" radius="$r-full" fill="$accent-tint" clip="true" align="middle-left">
            <row w="205" h="10" radius="$r-full" fill="$accent" />
          </row>
        </col>
      </col>

      <!-- range toggle -->
      <row role="segmented-control" w="328" h="40" radius="$r-full" fill="$surface-alt" p="4" gap="4" align="middle-center">
        <row w="156" h="32" radius="$r-full" fill="$surface" border="1 $line" align="middle-center">
          <text text-style="LabelLarge" font-weight="700" value="This week" fill="$accent-str" />
        </row>
        <row w="156" h="32" radius="$r-full" fill="none" align="middle-center">
          <text text-style="LabelLarge" value="All time" fill="$ink-2" />
        </row>
      </row>

      <!-- column header -->
      <row w="328" p="2 14 0 14" gap="12" align="middle-left">
        <text w="28" text-style="LabelSmall" value="#" fill="$ink-3" />
        <text w="fill" text-style="LabelSmall" value="LEARNER" fill="$ink-3" />
        <row gap="3" align="middle-right">
          <img src="https://api.iconify.design/material-symbols/bolt-rounded.svg?color=%235B21B6" w="14" h="14" />
          <text text-style="LabelSmall" value="XP" fill="$ink-3" />
        </row>
      </row>
    </col>

    <!-- leaderboard -->
    <col w="360" p="0 16" gap="0">
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $line" p="0" gap="0" clip="true">

        <!-- rank 1 -->
        <row w="328" p="12 14" gap="12" align="middle-left">
          <row w="28" h="28" radius="$r-full" fill="$gold" align="middle-center">
            <text text-style="RankNum" value="1" fill="$gold-ink" />
          </row>
          <row w="40" h="40" radius="$r-full" fill="$av-rose" align="middle-center">
            <text text-style="TitleMedium" value="PN" fill="$ink" />
          </row>
          <col w="132" gap="5">
            <text w="132" max-lines="1" truncate="true" text-style="TitleMedium" value="Priya Nair" fill="$ink" />
            <row w="132" h="8" radius="$r-full" fill="$accent-tint" clip="true" align="middle-left">
              <row w="132" h="8" radius="$r-full" fill="$accent" />
            </row>
          </col>
          <col w="64" gap="2" align="middle-right">
            <text text-style="Metric" value="4,820" fill="$ink" />
            <row gap="2" align="middle-right">
              <img src="https://api.iconify.design/material-symbols/arrow-upward-rounded.svg?color=%2326692C" w="12" h="12" />
              <text text-style="LabelSmall" value="1" fill="$green" />
            </row>
          </col>
        </row>
        <row w="328" h="1" fill="$line" />

        <!-- rank 2 -->
        <row w="328" p="12 14" gap="12" align="middle-left">
          <row w="28" h="28" radius="$r-full" fill="$silver" align="middle-center">
            <text text-style="RankNum" value="2" fill="$silver-ink" />
          </row>
          <row w="40" h="40" radius="$r-full" fill="$av-blue" align="middle-center">
            <text text-style="TitleMedium" value="MS" fill="$ink" />
          </row>
          <col w="132" gap="5">
            <text w="132" max-lines="1" truncate="true" text-style="TitleMedium" value="Mateo Silva" fill="$ink" />
            <row w="132" h="8" radius="$r-full" fill="$accent-tint" clip="true" align="middle-left">
              <row w="118" h="8" radius="$r-full" fill="$accent" />
            </row>
          </col>
          <col w="64" gap="2" align="middle-right">
            <text text-style="Metric" value="4,310" fill="$ink" />
            <row gap="2" align="middle-right">
              <img src="https://api.iconify.design/material-symbols/arrow-upward-rounded.svg?color=%2326692C" w="12" h="12" />
              <text text-style="LabelSmall" value="3" fill="$green" />
            </row>
          </col>
        </row>
        <row w="328" h="1" fill="$line" />

        <!-- rank 3 -->
        <row w="328" p="12 14" gap="12" align="middle-left">
          <row w="28" h="28" radius="$r-full" fill="$bronze" align="middle-center">
            <text text-style="RankNum" value="3" fill="$bronze-ink" />
          </row>
          <row w="40" h="40" radius="$r-full" fill="$av-amber" align="middle-center">
            <text text-style="TitleMedium" value="SK" fill="$ink" />
          </row>
          <col w="132" gap="5">
            <text w="132" max-lines="1" truncate="true" text-style="TitleMedium" value="Sana Khan" fill="$ink" />
            <row w="132" h="8" radius="$r-full" fill="$accent-tint" clip="true" align="middle-left">
              <row w="109" h="8" radius="$r-full" fill="$accent" />
            </row>
          </col>
          <col w="64" gap="2" align="middle-right">
            <text text-style="Metric" value="3,990" fill="$ink" />
            <row gap="2" align="middle-right">
              <img src="https://api.iconify.design/material-symbols/arrow-downward-rounded.svg?color=%23C62828" w="12" h="12" />
              <text text-style="LabelSmall" value="1" fill="$red" />
            </row>
          </col>
        </row>

        <!-- promotion divider -->
        <row w="328" p="7 14" fill="$promo-band" gap="6" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/keyboard-double-arrow-up-rounded.svg?color=%235B21B6" w="16" h="16" />
          <text text-style="LabelSmall" value="PROMOTION ZONE" fill="$accent-str" />
          <text text-style="LabelSmall" value="· Top 3 advance to Diamond" fill="$accent-str" />
        </row>

        <!-- rank 4 -->
        <row w="328" p="12 14" gap="12" align="middle-left">
          <row w="28" h="28" radius="$r-full" fill="$rankchip" align="middle-center">
            <text text-style="RankNum" value="4" fill="$ink-2" />
          </row>
          <row w="40" h="40" radius="$r-full" fill="$av-peach" align="middle-center">
            <text text-style="TitleMedium" value="DR" fill="$ink" />
          </row>
          <col w="132" gap="5">
            <text w="132" max-lines="1" truncate="true" text-style="TitleMedium" value="Devon Reyes" fill="$ink" />
            <row w="132" h="8" radius="$r-full" fill="$accent-tint" clip="true" align="middle-left">
              <row w="97" h="8" radius="$r-full" fill="$accent" />
            </row>
          </col>
          <col w="64" gap="2" align="middle-right">
            <text text-style="Metric" value="3,540" fill="$ink" />
            <row gap="2" align="middle-right">
              <img src="https://api.iconify.design/material-symbols/arrow-upward-rounded.svg?color=%2326692C" w="12" h="12" />
              <text text-style="LabelSmall" value="2" fill="$green" />
            </row>
          </col>
        </row>
        <row w="328" h="1" fill="$line" />

        <!-- rank 5 : current user -->
        <row w="328" fill="$user-fill" p="12 14 12 10" gap="8" align="middle-left">
          <row w="4" h="44" radius="$r-full" fill="$accent" />
          <row w="28" h="28" radius="$r-full" fill="$accent" align="middle-center">
            <text text-style="RankNum" value="5" fill="$white" />
          </row>
          <row w="40" h="40" radius="$r-full" fill="$accent" align="middle-center">
            <text text-style="TitleMedium" value="JJ" fill="$white" />
          </row>
          <col w="fill" gap="5">
            <row w="fill" gap="5" align="middle-left">
              <text max-lines="1" truncate="true" text-style="TitleMedium" value="You" fill="$accent-str" />
              <row role="badge" h="16" radius="$r-xs" fill="$accent" p="0 5" align="middle-center">
                <text text-style="LabelSmall" value="YOU" fill="$white" />
              </row>
            </row>
            <row w="120" h="8" radius="$r-full" fill="$white" clip="true" align="middle-left">
              <row w="69" h="8" radius="$r-full" fill="$accent" />
            </row>
          </col>
          <col w="64" gap="2" align="middle-right">
            <text text-style="Metric" value="2,760" fill="$ink" />
            <row gap="2" align="middle-right">
              <img src="https://api.iconify.design/material-symbols/arrow-upward-rounded.svg?color=%2326692C" w="12" h="12" />
              <text text-style="LabelSmall" value="2" fill="$green" />
            </row>
          </col>
        </row>
        <row w="328" h="1" fill="$line" />

        <!-- rank 6 -->
        <row w="328" p="12 14" gap="12" align="middle-left">
          <row w="28" h="28" radius="$r-full" fill="$rankchip" align="middle-center">
            <text text-style="RankNum" value="6" fill="$ink-2" />
          </row>
          <row w="40" h="40" radius="$r-full" fill="$av-teal" align="middle-center">
            <text text-style="TitleMedium" value="AT" fill="$ink" />
          </row>
          <col w="132" gap="5">
            <text w="132" max-lines="1" truncate="true" text-style="TitleMedium" value="Aiko Tan" fill="$ink" />
            <row w="132" h="8" radius="$r-full" fill="$accent-tint" clip="true" align="middle-left">
              <row w="68" h="8" radius="$r-full" fill="$accent" />
            </row>
          </col>
          <col w="64" gap="2" align="middle-right">
            <text text-style="Metric" value="2,480" fill="$ink" />
            <row gap="2" align="middle-right">
              <img src="https://api.iconify.design/material-symbols/arrow-downward-rounded.svg?color=%23C62828" w="12" h="12" />
              <text text-style="LabelSmall" value="2" fill="$red" />
            </row>
          </col>
        </row>

        <!-- demotion divider -->
        <row w="328" p="7 14" fill="$demote-band" gap="6" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/keyboard-double-arrow-down-rounded.svg?color=%23B3261E" w="16" h="16" />
          <text text-style="LabelSmall" value="DEMOTION ZONE" fill="$demote-txt" />
          <text text-style="LabelSmall" value="· Bottom 2 drop to Sapphire" fill="$demote-txt" />
        </row>

        <!-- rank 7 -->
        <row w="328" p="12 14" gap="12" align="middle-left">
          <row w="28" h="28" radius="$r-full" fill="$rankchip" align="middle-center">
            <text text-style="RankNum" value="7" fill="$ink-2" />
          </row>
          <row w="40" h="40" radius="$r-full" fill="$av-rose" align="middle-center">
            <text text-style="TitleMedium" value="LM" fill="$ink" />
          </row>
          <col w="132" gap="5">
            <text w="132" max-lines="1" truncate="true" text-style="TitleMedium" value="Luca Moretti" fill="$ink" />
            <row w="132" h="8" radius="$r-full" fill="$accent-tint" clip="true" align="middle-left">
              <row w="61" h="8" radius="$r-full" fill="$accent" />
            </row>
          </col>
          <col w="64" gap="2" align="middle-right">
            <text text-style="Metric" value="2,210" fill="$ink" />
            <row gap="2" align="middle-right">
              <img src="https://api.iconify.design/material-symbols/arrow-upward-rounded.svg?color=%2326692C" w="12" h="12" />
              <text text-style="LabelSmall" value="1" fill="$green" />
            </row>
          </col>
        </row>
        <row w="328" h="1" fill="$line" />

        <!-- rank 8 -->
        <row w="328" p="12 14" gap="12" align="middle-left">
          <row w="28" h="28" radius="$r-full" fill="$rankchip" align="middle-center">
            <text text-style="RankNum" value="8" fill="$ink-2" />
          </row>
          <row w="40" h="40" radius="$r-full" fill="$av-blue" align="middle-center">
            <text text-style="TitleMedium" value="HC" fill="$ink" />
          </row>
          <col w="132" gap="5">
            <text w="132" max-lines="1" truncate="true" text-style="TitleMedium" value="Hana Cho" fill="$ink" />
            <row w="132" h="8" radius="$r-full" fill="$accent-tint" clip="true" align="middle-left">
              <row w="54" h="8" radius="$r-full" fill="$accent" />
            </row>
          </col>
          <col w="64" gap="2" align="middle-right">
            <text text-style="Metric" value="1,980" fill="$ink" />
            <row gap="2" align="middle-right">
              <img src="https://api.iconify.design/material-symbols/arrow-downward-rounded.svg?color=%23C62828" w="12" h="12" />
              <text text-style="LabelSmall" value="4" fill="$red" />
            </row>
          </col>
        </row>

      </col>
    </col>

    <!-- primary action -->
    <col w="360" p="14 16 16 16" gap="6">
      <row role="button" w="328" h="52" radius="$r-md" fill="$accent" gap="8" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/play-arrow-rounded.svg?color=%23FFFFFF" w="22" h="22" />
        <text text-style="TitleMedium" value="Start a focus session" fill="$white" />
      </row>
      <text w="328" text-style="LabelMedium" value="Earn 50 XP per 25-minute session" fill="$ink-3" align="middle-center" />
    </col>

    <!-- bottom navigation (viewport-fixed bar : last flow child) -->
    <row role="tab-bar" w="360" p="8 0 12 0" fill="$surface" border="1 $line" align="middle-center">
      <col w="90" gap="3" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/home-outline-rounded.svg?color=%23605D6B" w="24" h="24" />
        <text text-style="LabelSmall" font-weight="500" value="Home" fill="$ink-3" />
      </col>
      <col w="90" gap="3" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/social-leaderboard-rounded.svg?color=%236D28D9" w="24" h="24" />
        <text text-style="LabelSmall" value="Leagues" fill="$accent-str" />
      </col>
      <col w="90" gap="3" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/local-fire-department-outline-rounded.svg?color=%23605D6B" w="24" h="24" />
        <text text-style="LabelSmall" font-weight="500" value="Streak" fill="$ink-3" />
      </col>
      <col w="90" gap="3" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/person-outline-rounded.svg?color=%23605D6B" w="24" h="24" />
        <text text-style="LabelSmall" font-weight="500" value="Profile" fill="$ink-3" />
      </col>
    </row>

    <!-- device chrome : home indicator (untagged) -->
    <row w="360" h="24" align="middle-center">
      <row w="120" h="4" radius="$r-full" fill="$ink" />
    </row>

  </col>
</gui>

```