---
title: "Aria — Member Profile"
platform: android
slug: aria-member-profile
screens: ["profile"]
domains: ["fitness"]
style: "minimal"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "card", "avatar", "badge", "chip", "button", "tab-bar"]
score: {clean: 100, consistent: 81, accessible: 98, comprehensible: 58}
url: https://gui.farm/android/aria-member-profile
raw: https://gui.farm/android/aria-member-profile/design.guix
download: https://gui.farm/android/aria-member-profile.gui
---

# Aria — Member Profile

Boutique fitness studio member profile with class count, weekly streak, badges, and a monthly class goal.

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

## Source (design.guix)

```xml
<gui version="0.2" name="Aria — Member Profile">
  <tokens>
    <color name="bg" value="#FDF7F8" />
    <color name="surface" value="#FFFFFF" />
    <color name="on-surface" value="#201619" />
    <color name="on-surface-variant" value="#5C4A4E" />
    <color name="muted" value="#6E5A5E" />
    <color name="primary" value="#BE123C" />
    <color name="primary-text" value="#9F1239" />
    <color name="on-primary" value="#FFFFFF" />
    <color name="tint" value="#FFF0F2" />
    <color name="track" value="#F0E0E3" />
    <color name="pill-empty" value="#F3E7E9" />
    <color name="outline" value="#EADBDE" />
    <number name="r-sm" value="6" />
    <number name="r-md" value="16" />
    <number name="r-lg" value="20" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="Numeral" font-family="Roboto" font-size="28" font-weight="700" line-height="34" />
    <text-style name="StatNum" font-family="Roboto" font-size="22" font-weight="700" line-height="28" />
    <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="17" font-weight="700" line-height="24" />
    <text-style name="TitleSmall" font-family="Roboto" font-size="15" font-weight="700" line-height="20" />
    <text-style name="BodyMedium" font-family="Roboto" font-size="14" font-weight="400" line-height="20" />
    <text-style name="BodySmall" font-family="Roboto" font-size="13" font-weight="400" line-height="18" />
    <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="Button" font-family="Roboto" font-size="15" font-weight="700" line-height="20" />
    <text-style name="Section" font-family="Roboto" font-size="11" font-weight="700" line-height="16" letter-spacing="0.6" />
  </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="LabelMedium" 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=%23201619" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23201619" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23201619" 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=%23201619" w="24" h="24" />
      </row>
      <text w="fill" text-style="TitleLarge" value="Profile" fill="$on-surface" />
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/settings-outline-rounded.svg?color=%23201619" w="24" h="24" />
      </row>
    </row>

    <col w="360" p="4 16 0 16">
      <row role="card" w="328" radius="$r-lg" fill="$surface" border="1 $outline" p="14" gap="14" align="middle-left">
        <frame role="avatar" w="72" h="72" radius="36" clip="true">
          <img x="0" y="0" w="72" h="72" fit="cover" src="https://images.unsplash.com/photo-1745434159123-5b99b94206ca?auto=format&amp;fit=crop&amp;w=200&amp;h=200&amp;q=80" />
        </frame>
        <col w="fill" gap="4">
          <row w="fill" gap="8" align="middle-left">
            <text text-style="TitleMedium" value="Maya Okafor" fill="$on-surface" />
            <row role="badge" h="20" radius="$r-sm" fill="$primary" p="0 8" align="middle-center">
              <text text-style="Section" value="PREMIER" fill="$on-primary" />
            </row>
          </row>
          <text text-style="BodySmall" value="Member since 2023" fill="$muted" />
          <text text-style="BodySmall" value="Aria Pilates &amp; Barre — Fillmore" fill="$primary-text" />
        </col>
      </row>
    </col>

    <col w="360" p="12 16 0 16">
      <row w="328" gap="8" align="middle-left">
        <col role="card" w="104" h="84" radius="$r-md" fill="$surface" border="1 $outline" p="12" gap="2" align="top-left">
          <img src="https://api.iconify.design/material-symbols/exercise-rounded.svg?color=%239F1239" w="20" h="20" />
          <text text-style="StatNum" value="148" fill="$on-surface" />
          <text text-style="LabelMedium" value="Classes" fill="$muted" />
        </col>
        <col role="card" w="104" h="84" radius="$r-md" fill="$surface" border="1 $outline" p="12" gap="2" align="top-left">
          <img src="https://api.iconify.design/material-symbols/local-fire-department-rounded.svg?color=%239F1239" w="20" h="20" />
          <text text-style="StatNum" value="6 wk" fill="$on-surface" />
          <text text-style="LabelMedium" value="Streak" fill="$muted" />
        </col>
        <col role="card" w="104" h="84" radius="$r-md" fill="$surface" border="1 $outline" p="12" gap="2" align="top-left">
          <img src="https://api.iconify.design/material-symbols/workspace-premium-rounded.svg?color=%239F1239" w="20" h="20" />
          <text text-style="StatNum" value="8" fill="$on-surface" />
          <text text-style="LabelMedium" value="Badges" fill="$muted" />
        </col>
      </row>
    </col>

    <col w="360" p="12 16 0 16">
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $outline" p="16" gap="12">
        <row w="296" gap="auto" align="middle-left">
          <text text-style="TitleSmall" value="Monthly goal" fill="$on-surface" />
          <text text-style="LabelMedium" value="February" fill="$muted" />
        </row>
        <row w="296" gap="auto" align="bottom-left">
          <row gap="6" align="bottom-left">
            <text text-style="Numeral" value="12" fill="$on-surface" />
            <col h="30" align="bottom-left">
              <text text-style="BodyMedium" value="of 16 classes" fill="$muted" />
            </col>
          </row>
          <col h="30" align="bottom-right">
            <text text-style="LabelLarge" value="4 to go" fill="$primary-text" />
          </col>
        </row>
        <frame w="296" h="10" radius="5" clip="true">
          <rect x="0" y="0" w="296" h="10" fill="$track" />
          <rect x="0" y="0" w="222" h="10" fill="$primary" />
        </frame>
      </col>
    </col>

    <col w="360" p="12 16 0 16">
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $outline" p="16" gap="14">
        <row w="296" gap="auto" align="middle-left">
          <text text-style="TitleSmall" value="This week" fill="$on-surface" />
          <text text-style="LabelMedium" value="3 of 4 · goal" fill="$muted" />
        </row>
        <row w="296" gap="12" align="middle-left">
          <col w="32" h="44" radius="16" fill="$primary" align="middle-center">
            <text text-style="LabelLarge" value="M" fill="$on-primary" />
          </col>
          <col w="32" h="44" radius="16" fill="$pill-empty" align="middle-center">
            <text text-style="LabelLarge" value="T" fill="$on-surface-variant" />
          </col>
          <col w="32" h="44" radius="16" fill="$primary" align="middle-center">
            <text text-style="LabelLarge" value="W" fill="$on-primary" />
          </col>
          <col w="32" h="44" radius="16" fill="$pill-empty" align="middle-center">
            <text text-style="LabelLarge" value="T" fill="$on-surface-variant" />
          </col>
          <col w="32" h="44" radius="16" fill="$primary" align="middle-center">
            <text text-style="LabelLarge" value="F" fill="$on-primary" />
          </col>
          <col w="32" h="44" radius="16" fill="$pill-empty" align="middle-center">
            <text text-style="LabelLarge" value="S" fill="$on-surface-variant" />
          </col>
          <col w="32" h="44" radius="16" fill="$pill-empty" align="middle-center">
            <text text-style="LabelLarge" value="S" fill="$on-surface-variant" />
          </col>
        </row>
        <text text-style="BodySmall" value="One more class this week to keep your streak alive." fill="$muted" />
      </col>
    </col>

    <col w="360" p="12 16 0 16">
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $outline" p="16" gap="12">
        <text text-style="TitleSmall" value="Favorite styles" fill="$on-surface" />
        <row w="296" gap="8" align="middle-left">
          <row role="chip" w="110" h="34" radius="17" fill="$primary" gap="6" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FFFFFF" w="16" h="16" />
            <text text-style="LabelLarge" value="Reformer" fill="$on-primary" />
          </row>
          <row role="chip" w="90" h="34" radius="17" fill="$primary" gap="6" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FFFFFF" w="16" h="16" />
            <text text-style="LabelLarge" value="Barre" fill="$on-primary" />
          </row>
          <row role="chip" w="76" h="34" radius="17" fill="$surface" border="1 $outline" p="0 14" align="middle-center">
            <text text-style="LabelLarge" value="Sculpt" fill="$on-surface" />
          </row>
        </row>
        <row w="296" gap="8" align="middle-left">
          <row role="chip" w="62" h="34" radius="17" fill="$surface" border="1 $outline" p="0 14" align="middle-center">
            <text text-style="LabelLarge" value="Flow" fill="$on-surface" />
          </row>
          <row role="chip" w="56" h="34" radius="17" fill="$surface" border="1 $outline" p="0 14" align="middle-center">
            <text text-style="LabelLarge" value="Mat" fill="$on-surface" />
          </row>
          <row role="chip" w="72" h="34" radius="17" fill="$surface" border="1 $outline" p="0 14" align="middle-center">
            <text text-style="LabelLarge" value="Cycle" fill="$on-surface" />
          </row>
          <row role="chip" w="62" h="34" radius="17" fill="$surface" border="1 $outline" p="0 14" align="middle-center">
            <text text-style="LabelLarge" value="Jump" fill="$on-surface" />
          </row>
        </row>
      </col>
    </col>

    <col w="360" p="12 16 0 16">
      <row role="card" w="328" radius="$r-lg" fill="$tint" border="1 $outline" p="16" gap="12" align="middle-left">
        <col w="fill" gap="4">
          <row gap="6" align="middle-left">
            <img src="https://api.iconify.design/material-symbols/calendar-month-rounded.svg?color=%239F1239" w="16" h="16" />
            <text text-style="Section" value="NEXT CLASS" fill="$primary-text" />
          </row>
          <text text-style="TitleMedium" value="Reformer Flow" fill="$on-surface" />
          <text text-style="BodyMedium" value="Sat, Feb 15 · 9:00 AM · Studio 2" fill="$muted" />
        </col>
        <img src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%239F1239" w="24" h="24" />
      </row>
    </col>

    <col w="360" p="16 16 20 16">
      <row role="button" w="328" h="52" radius="26" fill="$primary" gap="8" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23FFFFFF" w="20" h="20" />
        <text text-style="Button" value="Book a class" fill="$on-primary" />
      </row>
    </col>

    <line w="360" fill="$outline" />
    <row role="tab-bar" w="fill" h="80" fill="$surface" p="12 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=%235C4A4E" w="24" h="24" />
        </row>
        <text text-style="LabelMedium" value="Home" 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/calendar-today-outline-rounded.svg?color=%235C4A4E" w="24" h="24" />
        </row>
        <text text-style="LabelMedium" value="Schedule" 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/location-on-outline-rounded.svg?color=%235C4A4E" w="24" h="24" />
        </row>
        <text text-style="LabelMedium" value="Studios" fill="$on-surface-variant" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" radius="$r-full" fill="$tint" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/person-rounded.svg?color=%239F1239" w="24" h="24" />
        </row>
        <text text-style="LabelMedium" value="Profile" fill="$primary-text" />
      </col>
    </row>
  </col>
</gui>

```