---
title: "Switchback — Runner Profile"
platform: android
slug: switchback-runner-profile
screens: ["profile"]
domains: ["fitness"]
style: "flat"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "avatar", "chip", "button", "segmented-control", "card", "tab-bar"]
score: {clean: 100, consistent: 87, accessible: 79, comprehensible: 32}
url: https://gui.farm/android/switchback-runner-profile
raw: https://gui.farm/android/switchback-runner-profile/design.guix
download: https://gui.farm/android/switchback-runner-profile.gui
---

# Switchback — Runner Profile

Social runner profile with follower stats, a weekly distance goal, and an activity chart.

- **Live preview:** https://gui.farm/android/switchback-runner-profile
- **Raw source:** https://gui.farm/android/switchback-runner-profile/design.guix
- **Download (.gui):** https://gui.farm/android/switchback-runner-profile.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Switchback — Runner Profile">
  <tokens>
    <!-- Material 3 light, warm near-white ground; violet accent (library is thin on purple: 13 files) -->
    <color name="surface" value="#FCFAFF" />
    <color name="surface-container" value="#F3EFFA" />
    <color name="surface-container-high" value="#EBE3F6" />
    <color name="on-surface" value="#1B1A20" />
    <color name="on-surface-variant" value="#463F52" />
    <color name="outline" value="#6E6779" />
    <color name="outline-variant" value="#CEC6DA" />
    <color name="primary" value="#6A3FC0" />
    <color name="on-primary" value="#FFFFFF" />
    <color name="primary-container" value="#E9DDFB" />
    <color name="on-primary-container" value="#25105A" />
    <color name="primary-text" value="#5A2FB0" />
    <number name="r-full" value="999" />
    <number name="r-lg" value="16" />
    <number name="r-md" value="12" />
  </tokens>
  <styles>
    <text-style name="Name" font-family="Roboto" font-size="24" font-weight="600" line-height="30" />
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="500" line-height="24" />
    <text-style name="StatNum" font-family="Roboto" font-size="20" font-weight="700" line-height="24" />
    <text-style name="Big" font-family="Roboto" font-size="28" font-weight="600" line-height="34" />
    <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="500" 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="500" line-height="16" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>
  <!-- No scroll in .gui: root col hugs its children; the bottom navigation bar is the
       last flow child, not an overlay. Bubbles/thumbnails without a confirmed role term
       stay untagged, same convention the library uses for device chrome. -->
  <col w="360" fill="$surface">
    <!-- status bar : device chrome, deliberately untagged -->
    <row w="fill" h="28" p="0 20" gap="auto" align="middle-center">
      <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=%231B1A20"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%231B1A20" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%231B1A20"
          w="15"
          h="15"
        />
      </row>
    </row>
    <!-- M3 top app bar -->
    <row role="top-navigation-bar" w="fill" h="64" p="0 4" gap="8" align="middle-left">
      <row w="44" h="44" radius="$r-full" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%231B1A20"
          w="24"
          h="24"
        />
      </row>
      <col w="fill">
        <text font-family="Roboto" font-size="20" font-weight="500" value="Profile" fill="$on-surface" />
      </col>
      <row w="44" h="44" radius="$r-full" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/share-rounded.svg?color=%23463F52"
          w="22"
          h="22"
        />
      </row>
      <row w="44" h="44" radius="$r-full" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/more-vert-rounded.svg?color=%23463F52"
          w="22"
          h="22"
        />
      </row>
    </row>
    <!-- cover photo + avatar straddling its lower edge (frame + absolute placement:
         genuine overlap is the one case the spec reserves x/y for) -->
    <frame w="360" h="198" fill="$surface">
      <img
        x="0"
        y="0"
        w="360"
        h="150"
        fit="cover"
        src="https://images.unsplash.com/photo-1551632811-561732d1e306?auto=format&amp;fit=crop&amp;w=720&amp;h=300&amp;q=80"
      />
      <ellipse x="132" y="102" w="96" h="96" fill="$surface" />
      <frame role="avatar" x="136" y="106" w="88" h="88" radius="44" clip="true" fill="$surface-container-high">
        <img
          x="0"
          y="0"
          w="88"
          h="88"
          fit="cover"
          src="https://images.unsplash.com/photo-1489659831163-682b5af42225?auto=format&amp;fit=crop&amp;crop=faces&amp;w=176&amp;h=176&amp;q=80"
        />
      </frame>
    </frame>
    <!-- identity -->
    <col w="fill" p="12 16 0 16" gap="6" align="top-center">
      <text text-style="Name" value="Maya Okonkwo" fill="$on-surface" align="center" />
      <text
        text-style="BodyMedium"
        value="@maya.runs  ·  Boulder, CO"
        fill="$on-surface-variant"
        align="center"
      />
      <row role="chip" h="26" radius="$r-full" fill="$primary-container" p="0 10" gap="5" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/flag-outline-rounded.svg?color=%2325105A"
          w="14"
          h="14"
        />
        <text text-style="LabelMedium" value="Trailblazer · Lvl 7" fill="$on-primary-container" />
      </row>
      <text
        w="fill"
        text-style="BodyMedium"
        align="center"
        value="Chasing vert in the Front Range. Two ultras deep, always plotting one more."
        fill="$on-surface-variant"
      />
    </col>
    <!-- primary actions : Follow carries the accent, Message is the quiet outline -->
    <row w="fill" p="16 16 0 16" gap="12">
      <row role="button" w="fill" h="40" radius="$r-full" fill="$primary" gap="6" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/person-add-rounded.svg?color=%23FFFFFF"
          w="18"
          h="18"
        />
        <text text-style="LabelLarge" value="Follow" fill="$on-primary" />
      </row>
      <row
        role="button"
        w="fill"
        h="40"
        radius="$r-full"
        fill="none"
        border="1 $outline"
        gap="6"
        align="middle-center"
      >
        <img
          src="https://api.iconify.design/material-symbols/chat-bubble-outline-rounded.svg?color=%235A2FB0"
          w="18"
          h="18"
        />
        <text text-style="LabelLarge" value="Message" fill="$primary-text" />
      </row>
    </row>
    <!-- social stat trio, split by hairline dividers -->
    <row w="fill" p="18 16 2 16" align="middle-center">
      <col w="fill" gap="1" align="top-center">
        <text text-style="StatNum" value="128" fill="$on-surface" align="center" />
        <text text-style="LabelMedium" value="Following" fill="$on-surface-variant" align="center" />
      </col>
      <line direction="vertical" thickness="1" h="34" fill="$outline-variant" />
      <col w="fill" gap="1" align="top-center">
        <text text-style="StatNum" value="2,431" fill="$on-surface" align="center" />
        <text text-style="LabelMedium" value="Followers" fill="$on-surface-variant" align="center" />
      </col>
      <line direction="vertical" thickness="1" h="34" fill="$outline-variant" />
      <col w="fill" gap="1" align="top-center">
        <text text-style="StatNum" value="486" fill="$on-surface" align="center" />
        <text text-style="LabelMedium" value="Runs" fill="$on-surface-variant" align="center" />
      </col>
    </row>
    <!-- timeframe selector : selected segment carries the accent -->
    <col w="fill" p="16 16 0 16">
      <row
        role="segmented-control"
        w="fill"
        h="40"
        radius="$r-full"
        fill="$surface-container-high"
        p="4"
        gap="4"
      >
        <row w="fill" h="fill" radius="$r-full" fill="$primary" align="middle-center">
          <text text-style="LabelLarge" value="This Week" fill="$on-primary" />
        </row>
        <row w="fill" h="fill" radius="$r-full" align="middle-center">
          <text text-style="LabelLarge" value="Month" fill="$on-surface-variant" />
        </row>
        <row w="fill" h="fill" radius="$r-full" align="middle-center">
          <text text-style="LabelLarge" value="Year" fill="$on-surface-variant" />
        </row>
      </row>
    </col>
    <!-- weekly summary card : goal progress + per-day distance bars -->
    <col w="fill" p="16 16 0 16">
      <col role="card" w="fill" radius="$r-lg" fill="$surface-container" p="16" gap="14">
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="TitleMedium" value="This week" fill="$on-surface" />
          <text text-style="LabelMedium" value="Aug 4-10" fill="$on-surface-variant" />
        </row>
        <row w="fill" gap="auto" align="bottom-left">
          <text text-style="Big" value="34.2 km" fill="$on-surface" />
          <text text-style="LabelMedium" value="of 40 km goal" fill="$on-surface-variant" />
        </row>
        <!-- goal bar : fill = 34.2 / 40 * 296 = 253px -->
        <frame w="296" h="8" radius="4" fill="$surface-container-high">
          <rect x="0" y="0" w="253" h="8" radius="4" fill="$primary" />
        </frame>
        <!-- distance bars : height = km * (64 / 9.2), value label rides above each bar -->
        <row w="fill" h="84" gap="26" align="bottom-left">
          <col w="20" h="84" gap="4" align="bottom-center">
            <text text-style="LabelSmall" value="4.2" fill="$on-surface-variant" align="center" />
            <rect w="20" h="29" radius="4" fill="$primary" />
          </col>
          <col w="20" h="84" gap="4" align="bottom-center">
            <text text-style="LabelSmall" value="6.8" fill="$on-surface-variant" align="center" />
            <rect w="20" h="47" radius="4" fill="$primary" />
          </col>
          <col w="20" h="84" gap="4" align="bottom-center">
            <text text-style="LabelSmall" value="2.0" fill="$on-surface-variant" align="center" />
            <rect w="20" h="14" radius="4" fill="$primary" />
          </col>
          <col w="20" h="84" gap="4" align="bottom-center">
            <text text-style="LabelSmall" value="8.4" fill="$on-surface-variant" align="center" />
            <rect w="20" h="58" radius="4" fill="$primary" />
          </col>
          <col w="20" h="84" gap="4" align="bottom-center">
            <text text-style="LabelSmall" value="3.6" fill="$on-surface-variant" align="center" />
            <rect w="20" h="25" radius="4" fill="$primary" />
          </col>
          <col w="20" h="84" gap="4" align="bottom-center">
            <text text-style="LabelSmall" value="9.2" fill="$on-surface" align="center" />
            <rect w="20" h="64" radius="4" fill="$primary" />
          </col>
          <col w="20" h="84" gap="4" align="bottom-center">
            <text text-style="LabelSmall" value="0" fill="$on-surface-variant" align="center" />
            <rect w="20" h="3" radius="2" fill="$outline-variant" />
          </col>
        </row>
        <!-- weekday axis : today (Sat) sits in an accent pill -->
        <row w="fill" gap="26" align="middle-center">
          <row w="20" align="middle-center">
            <text text-style="LabelSmall" value="M" fill="$on-surface-variant" align="center" />
          </row>
          <row w="20" align="middle-center">
            <text text-style="LabelSmall" value="T" fill="$on-surface-variant" align="center" />
          </row>
          <row w="20" align="middle-center">
            <text text-style="LabelSmall" value="W" fill="$on-surface-variant" align="center" />
          </row>
          <row w="20" align="middle-center">
            <text text-style="LabelSmall" value="T" fill="$on-surface-variant" align="center" />
          </row>
          <row w="20" align="middle-center">
            <text text-style="LabelSmall" value="F" fill="$on-surface-variant" align="center" />
          </row>
          <row w="20" align="middle-center">
            <row w="20" h="20" radius="$r-full" fill="$primary-container" align="middle-center">
              <text text-style="LabelSmall" value="S" fill="$on-primary-container" align="center" />
            </row>
          </row>
          <row w="20" align="middle-center">
            <text text-style="LabelSmall" value="S" fill="$on-surface-variant" align="center" />
          </row>
        </row>
      </col>
    </col>
    <!-- recent runs -->
    <col w="fill" p="20 16 0 16" gap="12">
      <row w="fill" gap="auto" align="middle-center">
        <text text-style="TitleMedium" value="Recent runs" fill="$on-surface" />
        <text text-style="LabelLarge" value="See all" fill="$primary-text" />
      </row>
      <row w="fill" gap="12" align="middle-left">
        <row w="44" h="44" radius="$r-md" fill="$primary-container" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/route-rounded.svg?color=%2325105A"
            w="24"
            h="24"
          />
        </row>
        <col w="fill" gap="2">
          <text text-style="TitleMedium" value="Skyline Ridge Loop" fill="$on-surface" />
          <text text-style="LabelMedium" value="Sat · 9.2 km · 1,240 m ↑" fill="$on-surface-variant" />
        </col>
        <col gap="1" align="top-right">
          <text text-style="TitleMedium" value="5:42 /km" fill="$on-surface" align="right" />
          <text text-style="LabelSmall" value="58:12" fill="$on-surface-variant" align="right" />
        </col>
      </row>
      <line thickness="1" fill="$outline-variant" />
      <row w="fill" gap="12" align="middle-left">
        <row w="44" h="44" radius="$r-md" fill="$primary-container" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/route-rounded.svg?color=%2325105A"
            w="24"
            h="24"
          />
        </row>
        <col w="fill" gap="2">
          <text text-style="TitleMedium" value="Boulder Creek Path" fill="$on-surface" />
          <text text-style="LabelMedium" value="Thu · 8.4 km · 320 m ↑" fill="$on-surface-variant" />
        </col>
        <col gap="1" align="top-right">
          <text text-style="TitleMedium" value="5:20 /km" fill="$on-surface" align="right" />
          <text text-style="LabelSmall" value="44:48" fill="$on-surface-variant" align="right" />
        </col>
      </row>
    </col>
    <!-- ======== bottom navigation : last flow child ======== -->
    <col w="fill" p="0" fill="$surface-container">
      <row role="tab-bar" w="fill" h="72" p="0 8" align="middle-center">
        <col w="fill" gap="4" align="top-center">
          <img
            src="https://api.iconify.design/material-symbols/home-outline-rounded.svg?color=%23463F52"
            w="24"
            h="24"
          />
          <text text-style="LabelSmall" value="Home" fill="$on-surface-variant" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <img
            src="https://api.iconify.design/material-symbols/explore-outline-rounded.svg?color=%23463F52"
            w="24"
            h="24"
          />
          <text text-style="LabelSmall" value="Explore" fill="$on-surface-variant" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <row w="48" h="48" radius="$r-lg" fill="$primary" align="middle-center">
            <img
              src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23FFFFFF"
              w="26"
              h="26"
            />
          </row>
        </col>
        <col w="fill" gap="4" align="top-center">
          <img
            src="https://api.iconify.design/material-symbols/group-outline-rounded.svg?color=%23463F52"
            w="24"
            h="24"
          />
          <text text-style="LabelSmall" value="Clubs" fill="$on-surface-variant" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <row w="56" h="28" radius="$r-full" fill="$primary-container" align="middle-center">
            <img
              src="https://api.iconify.design/material-symbols/person-rounded.svg?color=%2325105A"
              w="22"
              h="22"
            />
          </row>
          <text text-style="LabelSmall" value="Profile" fill="$primary-text" align="center" />
        </col>
      </row>
      <row w="fill" h="24" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$outline" />
      </row>
    </col>
  </col>
</gui>
```