---
title: "Chroma — Neon Nights, Weekly Leaderboard"
platform: ios
slug: chroma-neon-nights-weekly-leaderboard
screens: ["leaderboard"]
domains: ["social"]
style: null
fonts: ["Space Grotesk", "SF Pro Display"]
roles: ["top-navigation-bar", "button", "card", "badge", "divider", "banner", "tab-bar"]
score: {clean: 100, consistent: 81, accessible: 80, comprehensible: 28}
url: https://gui.farm/ios/chroma-neon-nights-weekly-leaderboard
raw: https://gui.farm/ios/chroma-neon-nights-weekly-leaderboard/design.guix
download: https://gui.farm/ios/chroma-neon-nights-weekly-leaderboard.gui
---

# Chroma — Neon Nights, Weekly Leaderboard

A Memphis-style iOS weekly photo-challenge leaderboard where a member checks the Neon Nights standings, with a proportional top-three podium, a full ranked list, a top-5 cutoff, and their own highlighted position.

- **Live preview:** https://gui.farm/ios/chroma-neon-nights-weekly-leaderboard
- **Raw source:** https://gui.farm/ios/chroma-neon-nights-weekly-leaderboard/design.guix
- **Download (.gui):** https://gui.farm/ios/chroma-neon-nights-weekly-leaderboard.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Chroma — Neon Nights, Weekly Leaderboard">
  <tokens>
    <color name="paper" value="#FBF3E9" />
    <color name="card" value="#FFFFFF" />
    <color name="ink" value="#181320" />
    <color name="muted" value="#615B67" />
    <color name="line" value="#E7DDCE" />
    <color name="pink" value="#EC1E79" />
    <color name="pink-deep" value="#C1116A" />
    <color name="pink-soft" value="#FCE0EC" />
    <color name="cobalt" value="#2B41CE" />
    <color name="blue-soft" value="#D7DDFA" />
    <color name="yellow" value="#FFC01E" />
    <color name="yellow-soft" value="#FCE7BE" />
    <color name="coral-soft" value="#FBD8CD" />
  </tokens>
  <fonts>
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
    <font family="Space Grotesk" source="google" weights="500 700" styles="normal" />
  </fonts>
  <styles>
    <text-style name="NavTitle" font-family="Space Grotesk" font-size="15" font-weight="700" line-height="18" letter-spacing="0.3" />
    <text-style name="NavSub" font-family="Space Grotesk" font-size="10" font-weight="700" line-height="13" letter-spacing="1.2" />
    <text-style name="Kicker" font-family="Space Grotesk" font-size="11" font-weight="700" line-height="14" letter-spacing="1.2" />
    <text-style name="KickerSm" font-family="Space Grotesk" font-size="10" font-weight="700" line-height="13" letter-spacing="1.4" />
    <text-style name="HeroTitle" font-family="Space Grotesk" font-size="34" font-weight="700" line-height="36" letter-spacing="-0.5" />
    <text-style name="HeroStat" font-family="Space Grotesk" font-size="18" font-weight="700" line-height="21" letter-spacing="-0.3" />
    <text-style name="SectionH" font-family="Space Grotesk" font-size="15" font-weight="700" line-height="19" letter-spacing="0.2" />
    <text-style name="PodName" font-family="SF Pro Display" font-size="13" font-weight="700" line-height="16" />
    <text-style name="PodHandle" font-family="SF Pro Display" font-size="11" font-weight="500" line-height="14" />
    <text-style name="PodPts" font-family="Space Grotesk" font-size="17" font-weight="700" line-height="20" letter-spacing="-0.3" />
    <text-style name="PodUnit" font-family="Space Grotesk" font-size="9" font-weight="700" line-height="11" letter-spacing="1.2" />
    <text-style name="RankBig" font-family="Space Grotesk" font-size="19" font-weight="700" line-height="22" />
    <text-style name="RankNum" font-family="Space Grotesk" font-size="15" font-weight="700" line-height="18" />
    <text-style name="Init" font-family="Space Grotesk" font-size="15" font-weight="700" line-height="18" />
    <text-style name="Name" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="19" />
    <text-style name="Handle" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="15" />
    <text-style name="Pts" font-family="Space Grotesk" font-size="15" font-weight="700" line-height="18" letter-spacing="-0.3" />
    <text-style name="Delta" font-family="SF Pro Display" font-size="11" font-weight="600" line-height="14" />
    <text-style name="Body" font-family="SF Pro Display" font-size="13" font-weight="500" line-height="18" />
    <text-style name="BtnLabel" font-family="Space Grotesk" font-size="15" font-weight="700" line-height="18" letter-spacing="0.4" />
    <text-style name="Chip" font-family="Space Grotesk" font-size="10" font-weight="700" line-height="13" letter-spacing="0.8" />
    <text-style name="TabLabel" font-family="SF Pro Display" font-size="10" font-weight="600" line-height="12" letter-spacing="0.2" />
  </styles>
  <col w="393" fill="$paper" clip="true">
    <!-- status bar (device chrome, untagged) -->
    <row w="393" h="54" p="16 20 0 20" align="middle-left">
      <text w="fill" value="9:41" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="18" color="$ink" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23181320" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23181320" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23181320" w="20" h="16" />
      </row>
    </row>
    <!-- top navigation -->
    <row w="393" h="58" p="0 16" gap="10" align="middle-left" fill="$paper" border-bottom="3 $ink" role="top-navigation-bar">
      <col w="40" h="40" fill="$card" border="2 $ink" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/arrow-left.svg?color=%23181320" w="18" h="18" />
      </col>
      <col w="fill" gap="2" align="middle-left">
        <text value="LEADERBOARD" text-style="NavTitle" color="$ink" />
        <text value="CHROMA · NEON NIGHTS" text-style="NavSub" color="$muted" />
      </col>
      <col w="40" h="40" fill="$card" border="2 $ink" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/info.svg?color=%23181320" w="18" h="18" />
      </col>
    </row>
    <!-- body -->
    <col w="393" p="18 20 24 20" gap="16">
      <!-- challenge hero -->
      <col w="353" fill="$pink-deep" border="2 $ink" p="18" gap="13" role="card">
        <appearance>
          <fill type="color" value="#C1116A" />
          <effect type="drop-shadow" x="6" y="6" radius="0" spread="0" color="#181320" />
        </appearance>
        <row w="317" gap="10" align="middle-left">
          <row p="6 10" fill="$yellow" border="2 $ink" align="middle-center" role="badge">
            <text value="WEEKLY CHALLENGE" text-style="Chip" color="$ink" />
          </row>
          <row w="fill" gap="7" align="middle-right">
            <ellipse w="16" h="16" fill="$yellow" border="2 $ink" />
            <rect w="14" h="14" fill="$card" border="2 $ink" />
            <ellipse w="16" h="16" fill="$cobalt" border="2 $ink" />
          </row>
        </row>
        <col w="317" gap="5" align="top-left">
          <text value="NEON NIGHTS" text-style="HeroTitle" color="$card" />
          <text value="After-dark photography, shot on Chroma · Aug 10-16" text-style="Body" color="$pink-soft" />
        </col>
        <line w="317" fill="$pink" thickness="2" role="divider" />
        <row w="317" gap="10" align="top-left">
          <col w="99" gap="3" align="top-left">
            <text value="412" text-style="HeroStat" color="$card" />
            <text value="ENTRIES" text-style="KickerSm" color="$pink-soft" />
          </col>
          <col w="99" gap="3" align="top-left">
            <text value="138" text-style="HeroStat" color="$card" />
            <text value="SHOOTERS" text-style="KickerSm" color="$pink-soft" />
          </col>
          <col w="99" gap="3" align="top-left">
            <text value="1D 6H" text-style="HeroStat" color="$card" />
            <text value="ENTRIES CLOSE" text-style="KickerSm" color="$pink-soft" />
          </col>
        </row>
      </col>
      <!-- podium: heights encode points. scale 128/2486 = 0.051488 px/pt -->
      <row w="353" gap="9" align="bottom-center">
        <!-- 2nd -->
        <col w="107" gap="7" align="bottom-center">
          <col w="66" h="66" radius="999" fill="$blue-soft" border="3 $ink" clip="true" align="middle-center">
            <img w="66" h="66" fit="cover" src="https://images.unsplash.com/photo-1651684215020-f7a5b6610f23?w=200&amp;h=200&amp;fit=crop&amp;crop=faces&amp;q=80&amp;auto=format" />
          </col>
          <col w="107" gap="1" align="top-center">
            <text w="107" value="Devon Ashby" text-style="PodName" color="$ink" align="center" />
            <text w="107" value="@dev.ashby" text-style="PodHandle" color="$muted" align="center" />
          </col>
          <col w="107" gap="1" align="top-center">
            <text w="107" value="2,213" text-style="PodPts" color="$ink" align="center" />
            <text w="107" value="POINTS" text-style="PodUnit" color="$muted" align="center" />
          </col>
          <col w="107" h="114" fill="$cobalt" border="2 $ink" align="middle-center">
            <col w="34" h="34" radius="999" fill="$card" border="2 $ink" align="middle-center">
              <text value="2" text-style="RankBig" color="$ink" />
            </col>
          </col>
        </col>
        <!-- 1st -->
        <col w="118" gap="6" align="bottom-center">
          <img src="https://api.iconify.design/lucide/crown.svg?color=%23FFC01E" w="26" h="26" />
          <col w="82" h="82" radius="999" fill="$pink-soft" border="3 $ink" clip="true" align="middle-center">
            <img w="82" h="82" fit="cover" src="https://images.unsplash.com/photo-1687360440094-949b8fe71c8c?w=220&amp;h=220&amp;fit=crop&amp;crop=faces&amp;q=80&amp;auto=format" />
          </col>
          <col w="118" gap="1" align="top-center">
            <text w="118" value="Mara Quinteros" text-style="PodName" color="$ink" align="center" />
            <text w="118" value="@mara.q" text-style="PodHandle" color="$muted" align="center" />
          </col>
          <col w="118" gap="1" align="top-center">
            <text w="118" value="2,486" text-style="PodPts" color="$pink-deep" align="center" />
            <text w="118" value="POINTS" text-style="PodUnit" color="$muted" align="center" />
          </col>
          <col w="118" h="128" fill="$pink" border="2 $ink" align="middle-center">
            <col w="38" h="38" radius="999" fill="$card" border="2 $ink" align="middle-center">
              <text value="1" text-style="RankBig" color="$ink" />
            </col>
          </col>
        </col>
        <!-- 3rd -->
        <col w="107" gap="7" align="bottom-center">
          <col w="66" h="66" radius="999" fill="$yellow-soft" border="3 $ink" clip="true" align="middle-center">
            <img w="66" h="66" fit="cover" src="https://images.unsplash.com/photo-1674851993962-5ea73166e6dd?w=200&amp;h=200&amp;fit=crop&amp;crop=faces&amp;q=80&amp;auto=format" />
          </col>
          <col w="107" gap="1" align="top-center">
            <text w="107" value="Theo Vance" text-style="PodName" color="$ink" align="center" />
            <text w="107" value="@theo.v" text-style="PodHandle" color="$muted" align="center" />
          </col>
          <col w="107" gap="1" align="top-center">
            <text w="107" value="1,974" text-style="PodPts" color="$ink" align="center" />
            <text w="107" value="POINTS" text-style="PodUnit" color="$muted" align="center" />
          </col>
          <col w="107" h="102" fill="$yellow" border="2 $ink" align="middle-center">
            <col w="34" h="34" radius="999" fill="$card" border="2 $ink" align="middle-center">
              <text value="3" text-style="RankBig" color="$ink" />
            </col>
          </col>
        </col>
      </row>
      <!-- full standings -->
      <col w="353" fill="$card" border="2 $ink" role="card" clip="true">
        <row w="fill" h="42" p="0 14" gap="10" fill="$ink" align="middle-left">
          <text w="fill" value="FULL STANDINGS" text-style="SectionH" color="$card" />
          <text value="138 SHOOTERS" text-style="KickerSm" color="$yellow" align="right" />
        </row>
        <!-- rank 4 -->
        <row w="fill" h="64" p="0 14" gap="11" align="middle-left">
          <text w="18" value="4" text-style="RankNum" color="$ink" />
          <col w="36" h="36" radius="999" fill="$yellow-soft" border="2 $ink" align="middle-center">
            <text value="P" text-style="Init" color="$ink" />
          </col>
          <col w="fill" gap="5" align="middle-left">
            <text value="Priya Raman" text-style="Name" color="$ink" />
            <frame w="156" h="8" clip="true">
              <rect x="0" y="0" w="156" h="8" fill="$line" />
              <rect x="0" y="0" w="113" h="8" fill="$pink" />
            </frame>
          </col>
          <col w="60" gap="3" align="top-right">
            <text w="60" value="1,802" text-style="Pts" color="$ink" align="right" />
            <row w="60" gap="3" align="middle-right">
              <img src="https://api.iconify.design/lucide/chevron-up.svg?color=%23181320" w="12" h="12" />
              <text value="2" text-style="Delta" color="$muted" />
            </row>
          </col>
        </row>
        <line w="325" fill="$line" thickness="1" role="divider" />
        <!-- rank 5 -->
        <row w="fill" h="64" p="0 14" gap="11" align="middle-left">
          <text w="18" value="5" text-style="RankNum" color="$ink" />
          <col w="36" h="36" radius="999" fill="$blue-soft" border="2 $ink" align="middle-center">
            <text value="L" text-style="Init" color="$ink" />
          </col>
          <col w="fill" gap="5" align="middle-left">
            <text value="Lena Fischer" text-style="Name" color="$ink" />
            <frame w="156" h="8" clip="true">
              <rect x="0" y="0" w="156" h="8" fill="$line" />
              <rect x="0" y="0" w="104" h="8" fill="$pink" />
            </frame>
          </col>
          <col w="60" gap="3" align="top-right">
            <text w="60" value="1,655" text-style="Pts" color="$ink" align="right" />
            <row w="60" gap="3" align="middle-right">
              <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%23615B67" w="12" h="12" />
              <text value="1" text-style="Delta" color="$muted" />
            </row>
          </col>
        </row>
        <!-- cutoff -->
        <row w="fill" h="34" p="0 14" gap="9" fill="$pink-soft" border-top="2 $ink" border-bottom="2 $ink" align="middle-center">
          <img src="https://api.iconify.design/lucide/trophy.svg?color=%23C1116A" w="14" h="14" />
          <text value="TOP 5 WIN THE COMMUNITY FEATURE" text-style="Chip" color="$pink-deep" />
        </row>
        <!-- rank 6 -->
        <row w="fill" h="64" p="0 14" gap="11" align="middle-left">
          <text w="18" value="6" text-style="RankNum" color="$ink" />
          <col w="36" h="36" radius="999" fill="$coral-soft" border="2 $ink" align="middle-center">
            <text value="K" text-style="Init" color="$ink" />
          </col>
          <col w="fill" gap="5" align="middle-left">
            <text value="Kojo Mensah" text-style="Name" color="$ink" />
            <frame w="156" h="8" clip="true">
              <rect x="0" y="0" w="156" h="8" fill="$line" />
              <rect x="0" y="0" w="97" h="8" fill="$pink" />
            </frame>
          </col>
          <col w="60" gap="3" align="top-right">
            <text w="60" value="1,540" text-style="Pts" color="$ink" align="right" />
            <row w="60" gap="3" align="middle-right">
              <img src="https://api.iconify.design/lucide/chevron-up.svg?color=%23181320" w="12" h="12" />
              <text value="1" text-style="Delta" color="$muted" />
            </row>
          </col>
        </row>
        <line w="325" fill="$line" thickness="1" role="divider" />
        <!-- rank 7 YOU -->
        <row w="fill" h="66" p="0 10 0 0" gap="0" fill="$pink-soft" align="middle-left">
          <rect w="5" h="66" fill="$pink" />
          <row w="fill" h="66" p="0 14" gap="11" align="middle-left">
            <text w="18" value="7" text-style="RankNum" color="$pink-deep" />
            <col w="36" h="36" radius="999" fill="$card" border="2 $pink-deep" align="middle-center">
              <text value="S" text-style="Init" color="$pink-deep" />
            </col>
            <col w="fill" gap="5" align="middle-left">
              <row gap="7" align="middle-left">
                <text value="Sam Okafor" text-style="Name" color="$ink" />
                <row p="2 7" fill="$pink-deep" align="middle-center" role="badge">
                  <text value="YOU" text-style="Chip" color="$card" />
                </row>
              </row>
              <frame w="156" h="8" clip="true">
                <rect x="0" y="0" w="156" h="8" fill="$card" />
                <rect x="0" y="0" w="87" h="8" fill="$pink" />
              </frame>
            </col>
            <col w="60" gap="3" align="top-right">
              <text w="60" value="1,388" text-style="Pts" color="$ink" align="right" />
              <row w="60" gap="3" align="middle-right">
                <img src="https://api.iconify.design/lucide/chevron-up.svg?color=%23C1116A" w="12" h="12" />
                <text value="3" text-style="Delta" color="$pink-deep" />
              </row>
            </col>
          </row>
        </row>
        <line w="325" fill="$line" thickness="1" role="divider" />
        <!-- rank 8 -->
        <row w="fill" h="64" p="0 14" gap="11" align="middle-left">
          <text w="18" value="8" text-style="RankNum" color="$ink" />
          <col w="36" h="36" radius="999" fill="$blue-soft" border="2 $ink" align="middle-center">
            <text value="I" text-style="Init" color="$ink" />
          </col>
          <col w="fill" gap="5" align="middle-left">
            <text value="Ivy Delgado" text-style="Name" color="$ink" />
            <frame w="156" h="8" clip="true">
              <rect x="0" y="0" w="156" h="8" fill="$line" />
              <rect x="0" y="0" w="80" h="8" fill="$pink" />
            </frame>
          </col>
          <col w="60" gap="3" align="top-right">
            <text w="60" value="1,271" text-style="Pts" color="$ink" align="right" />
            <row w="60" gap="3" align="middle-right">
              <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%23615B67" w="12" h="12" />
              <text value="2" text-style="Delta" color="$muted" />
            </row>
          </col>
        </row>
      </col>
      <!-- progress note -->
      <row w="353" fill="$cobalt" border="2 $ink" p="13 15" gap="11" align="middle-left" role="banner">
        <appearance>
          <fill type="color" value="#2B41CE" />
          <effect type="drop-shadow" x="4" y="4" radius="0" spread="0" color="#181320" />
        </appearance>
        <img src="https://api.iconify.design/lucide/flame.svg?color=%23FFFFFF" w="20" h="20" />
        <text w="fill" value="152 points behind Kojo for the last feature spot. 2 days to close it." text-style="Body" color="$card" />
      </row>
      <!-- primary CTA -->
      <row w="353" h="54" fill="$pink-deep" border="2 $ink" gap="9" align="middle-center" role="button">
        <appearance>
          <fill type="color" value="#C1116A" />
          <effect type="drop-shadow" x="4" y="4" radius="0" spread="0" color="#181320" />
        </appearance>
        <img src="https://api.iconify.design/lucide/upload.svg?color=%23FFFFFF" w="19" h="19" />
        <text value="SUBMIT TONIGHT'S SHOT" text-style="BtnLabel" color="$card" />
      </row>
    </col>
    <!-- sticky tab bar (last flow child) -->
    <col w="393" fill="$card" border-top="3 $ink" p="8 12 8 12" role="tab-bar">
      <row w="369" align="top-center">
        <col w="fill" gap="4" align="top-center">
          <img src="https://api.iconify.design/lucide/house.svg?color=%23615B67" w="22" h="22" />
          <text value="HOME" text-style="TabLabel" color="$muted" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <img src="https://api.iconify.design/lucide/flame.svg?color=%23615B67" w="22" h="22" />
          <text value="PLAY" text-style="TabLabel" color="$muted" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <col w="46" h="46" radius="999" fill="$pink" border="2 $ink" align="middle-center" role="button">
            <img src="https://api.iconify.design/lucide/camera.svg?color=%23FFFFFF" w="22" h="22" />
          </col>
        </col>
        <col w="fill" gap="4" align="top-center">
          <img src="https://api.iconify.design/lucide/trophy.svg?color=%23C1116A" w="22" h="22" />
          <text value="RANKS" text-style="TabLabel" color="$pink-deep" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <img src="https://api.iconify.design/lucide/user.svg?color=%23615B67" w="22" h="22" />
          <text value="PROFILE" text-style="TabLabel" color="$muted" align="center" />
        </col>
      </row>
      <row w="369" h="16" align="bottom-center">
        <rect w="134" h="5" radius="3" fill="$ink" />
      </row>
    </col>
  </col>
</gui>
```