---
title: "Valor — Solana vs Avalanche"
platform: android
slug: valor-solana-vs-avalanche
screens: ["comparison"]
domains: ["crypto"]
style: "material"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "button", "segmented-control", "card", "badge", "divider", "chip"]
score: {clean: 100, consistent: 86, accessible: 72, comprehensible: 38}
url: https://gui.farm/android/valor-solana-vs-avalanche
raw: https://gui.farm/android/valor-solana-vs-avalanche/design.guix
download: https://gui.farm/android/valor-solana-vs-avalanche.gui
---

# Valor — Solana vs Avalanche

A light Material 3 Android head-to-head comparison where a self-custody crypto investor weighs Solana against Avalanche across price, 24h change, market cap, volume, staking APY, drawdown from ATH and max supply, with the stronger value in each row highlighted and a 7-day price spark for each.

- **Live preview:** https://gui.farm/android/valor-solana-vs-avalanche
- **Raw source:** https://gui.farm/android/valor-solana-vs-avalanche/design.guix
- **Download (.gui):** https://gui.farm/android/valor-solana-vs-avalanche.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Valor — Solana vs Avalanche">
  <tokens>
    <color name="bg" value="#F7F1F4" />
    <color name="surface" value="#FFFFFF" />
    <color name="surface-variant" value="#F1E7EC" />
    <color name="on-surface" value="#1D1A1C" />
    <color name="on-surface-variant" value="#574E52" />
    <color name="outline" value="#6E646A" />
    <color name="outline-variant" value="#E5DBDF" />
    <color name="track" value="#ECE1E6" />
    <color name="primary" value="#B3164B" />
    <color name="on-primary" value="#FFFFFF" />
    <color name="primary-text" value="#A3124E" />
    <color name="primary-container" value="#FFD9E3" />
    <color name="on-primary-container" value="#3F0021" />
    <color name="bar" value="#EBA6C1" />
    <number name="r-lg" value="18" />
    <number name="r-xl" value="26" />
    <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="Overline" font-family="Roboto" font-size="10" font-weight="700" line-height="14" letter-spacing="0.8" />
    <text-style name="LabelSmall" font-family="Roboto" font-size="11" font-weight="500" line-height="15" letter-spacing="0.3" />
    <text-style name="LabelMedium" font-family="Roboto" font-size="12" font-weight="600" line-height="16" letter-spacing="0.3" />
    <text-style name="LabelLarge" font-family="Roboto" font-size="14" font-weight="600" line-height="20" />
    <text-style name="BodyMedium" font-family="Roboto" font-size="14" font-weight="400" line-height="20" />
    <text-style name="TitleSmall" font-family="Roboto" font-size="15" font-weight="600" line-height="20" />
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="500" line-height="22" />
    <text-style name="TitleLarge" font-family="Roboto" font-size="22" font-weight="600" line-height="28" letter-spacing="-0.2" />
    <text-style name="StatNum" font-family="Roboto" font-size="21" font-weight="700" line-height="24" letter-spacing="-0.3" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 600 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" color="$on-surface" />
      <row gap="6" align="middle-right">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%231D1A1C" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%231D1A1C" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%231D1A1C" 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 role="button" w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%231D1A1C" w="24" h="24" />
      </row>
      <col w="fill" gap="0" align="middle-left">
        <text text-style="TitleLarge" value="Compare" color="$on-surface" />
        <text text-style="LabelMedium" value="Layer-1 tokens" color="$on-surface-variant" />
      </col>
      <row role="button" w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/swap-horiz-rounded.svg?color=%23574E52" w="24" h="24" />
      </row>
      <row role="button" w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/more-vert-rounded.svg?color=%23574E52" w="23" h="23" />
      </row>
    </row>
    <col w="360" p="12 16 0 16">
      <row role="segmented-control" w="328" h="40" radius="$r-full" fill="$track" p="4" gap="4" align="middle-center">
        <row w="fill" h="32" radius="$r-full" fill="$surface" border="1 $outline-variant" align="middle-center">
          <text text-style="LabelLarge" value="Overview" color="$on-surface" />
        </row>
        <row w="fill" h="32" radius="$r-full" align="middle-center">
          <text text-style="LabelLarge" value="Markets" color="$on-surface-variant" />
        </row>
        <row w="fill" h="32" radius="$r-full" align="middle-center">
          <text text-style="LabelLarge" value="On-chain" color="$on-surface-variant" />
        </row>
      </row>
    </col>
    <col w="360" p="16 16 0 16">
      <row w="328" gap="12" align="top-left">
        <col role="card" w="158" radius="$r-xl" fill="$surface" border="1 $outline-variant" p="14" gap="14">
          <row w="fill" gap="10" align="middle-left">
            <row w="44" h="44" radius="$r-full" fill="$surface-variant" border="1 $outline-variant" align="middle-center">
              <text text-style="TitleMedium" value="S" color="$on-surface" />
            </row>
            <col w="fill" gap="1" align="middle-left">
              <text text-style="TitleMedium" value="SOL" color="$on-surface" />
              <text text-style="LabelSmall" value="Solana" color="$on-surface-variant" />
            </col>
          </row>
          <col gap="3" align="top-left">
            <text text-style="Overline" value="PRICE" color="$on-surface-variant" text-case="uppercase" />
            <text text-style="StatNum" value="$184.62" color="$on-surface" />
          </col>
          <row w="fill" gap="4" align="middle-left">
            <img src="https://api.iconify.design/material-symbols/trending-up-rounded.svg?color=%23574E52" w="16" h="16" />
            <text text-style="LabelLarge" value="+3.42%" color="$on-surface" />
            <text text-style="LabelSmall" value="24h" color="$on-surface-variant" />
          </row>
        </col>
        <col role="card" w="158" radius="$r-xl" fill="$surface" border="1 $outline-variant" p="14" gap="14">
          <row w="fill" gap="10" align="middle-left">
            <row w="44" h="44" radius="$r-full" fill="$surface-variant" border="1 $outline-variant" align="middle-center">
              <text text-style="TitleMedium" value="A" color="$on-surface" />
            </row>
            <col w="fill" gap="1" align="middle-left">
              <text text-style="TitleMedium" value="AVAX" color="$on-surface" />
              <text text-style="LabelSmall" value="Avalanche" color="$on-surface-variant" />
            </col>
          </row>
          <col gap="3" align="top-left">
            <text text-style="Overline" value="PRICE" color="$on-surface-variant" text-case="uppercase" />
            <text text-style="StatNum" value="$41.87" color="$on-surface" />
          </col>
          <row w="fill" gap="4" align="middle-left">
            <img src="https://api.iconify.design/material-symbols/trending-up-rounded.svg?color=%23574E52" w="16" h="16" />
            <text text-style="LabelLarge" value="+5.17%" color="$on-surface" />
            <text text-style="LabelSmall" value="24h" color="$on-surface-variant" />
          </row>
        </col>
      </row>
    </col>
    <col w="360" p="16 16 0 16">
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $outline-variant" p="16" gap="12">
        <row w="296" align="middle-center">
          <row w="fill" align="middle-right">
            <text text-style="Overline" value="SOL" color="$primary-text" text-case="uppercase" />
          </row>
          <row w="84" align="middle-center">
            <row role="badge" h="20" radius="$r-full" fill="$surface-variant" border="1 $outline-variant" p="0 9" align="middle-center">
              <text text-style="Overline" value="VS" color="$on-surface-variant" text-case="uppercase" />
            </row>
          </row>
          <row w="fill" align="middle-left">
            <text text-style="Overline" value="AVAX" color="$primary-text" text-case="uppercase" />
          </row>
        </row>
        <rect role="divider" w="296" h="1" fill="$outline-variant" />
        <row w="296" h="30" align="middle-center">
          <row w="fill" align="middle-right">
            <text text-style="LabelLarge" value="+3.42%" color="$on-surface" />
          </row>
          <col w="84" align="middle-center">
            <text text-style="Overline" value="24H" color="$on-surface-variant" text-case="uppercase" align="center" />
          </col>
          <row w="fill" align="middle-left">
            <row role="badge" h="28" radius="$r-full" fill="$primary-container" p="0 12" align="middle-center">
              <text text-style="LabelLarge" value="+5.17%" color="$on-primary-container" />
            </row>
          </row>
        </row>
        <rect role="divider" w="296" h="1" fill="$outline-variant" />
        <row w="296" h="30" align="middle-center">
          <row w="fill" align="middle-right">
            <row role="badge" h="28" radius="$r-full" fill="$primary-container" p="0 12" align="middle-center">
              <text text-style="LabelLarge" value="$88.7B" color="$on-primary-container" />
            </row>
          </row>
          <col w="84" align="middle-center">
            <text text-style="Overline" value="MKT CAP" color="$on-surface-variant" text-case="uppercase" align="center" />
          </col>
          <row w="fill" align="middle-left">
            <text text-style="LabelLarge" value="$17.6B" color="$on-surface" />
          </row>
        </row>
        <rect role="divider" w="296" h="1" fill="$outline-variant" />
        <row w="296" h="30" align="middle-center">
          <row w="fill" align="middle-right">
            <row role="badge" h="28" radius="$r-full" fill="$primary-container" p="0 12" align="middle-center">
              <text text-style="LabelLarge" value="$3.24B" color="$on-primary-container" />
            </row>
          </row>
          <col w="84" align="middle-center">
            <text text-style="Overline" value="24H VOL" color="$on-surface-variant" text-case="uppercase" align="center" />
          </col>
          <row w="fill" align="middle-left">
            <text text-style="LabelLarge" value="$1.09B" color="$on-surface" />
          </row>
        </row>
        <rect role="divider" w="296" h="1" fill="$outline-variant" />
        <row w="296" h="30" align="middle-center">
          <row w="fill" align="middle-right">
            <text text-style="LabelLarge" value="6.8%" color="$on-surface" />
          </row>
          <col w="84" align="middle-center">
            <text text-style="Overline" value="STAKING" color="$on-surface-variant" text-case="uppercase" align="center" />
          </col>
          <row w="fill" align="middle-left">
            <row role="badge" h="28" radius="$r-full" fill="$primary-container" p="0 12" align="middle-center">
              <text text-style="LabelLarge" value="8.3%" color="$on-primary-container" />
            </row>
          </row>
        </row>
        <rect role="divider" w="296" h="1" fill="$outline-variant" />
        <row w="296" h="30" align="middle-center">
          <row w="fill" align="middle-right">
            <row role="badge" h="28" radius="$r-full" fill="$primary-container" p="0 12" align="middle-center">
              <text text-style="LabelLarge" value="-37.4%" color="$on-primary-container" />
            </row>
          </row>
          <col w="84" align="middle-center">
            <text text-style="Overline" value="FROM ATH" color="$on-surface-variant" text-case="uppercase" align="center" />
          </col>
          <row w="fill" align="middle-left">
            <text text-style="LabelLarge" value="-71.1%" color="$on-surface" />
          </row>
        </row>
        <rect role="divider" w="296" h="1" fill="$outline-variant" />
        <row w="296" h="30" align="middle-center">
          <row w="fill" align="middle-right">
            <text text-style="LabelLarge" value="Uncapped" color="$on-surface" />
          </row>
          <col w="84" align="middle-center">
            <text text-style="Overline" value="MAX SUPPLY" color="$on-surface-variant" text-case="uppercase" align="center" />
          </col>
          <row w="fill" align="middle-left">
            <row role="badge" h="28" radius="$r-full" fill="$primary-container" p="0 12" align="middle-center">
              <text text-style="LabelLarge" value="720M" color="$on-primary-container" />
            </row>
          </row>
        </row>
        <row w="296" gap="6" align="middle-center">
          <ellipse w="8" h="8" radius="$r-full" fill="$primary" />
          <text text-style="LabelSmall" value="Rose marks the stronger value in each row" color="$on-surface-variant" />
        </row>
      </col>
    </col>
    <col w="360" p="16 16 0 16">
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $outline-variant" p="16" gap="14">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Overline" value="7-DAY PRICE" color="$on-surface-variant" text-case="uppercase" />
          <text text-style="LabelSmall" value="Aug 12-18" color="$on-surface-variant" />
        </row>
        <row w="296" gap="16" align="top-left">
          <col w="140" gap="10" align="top-left">
            <row w="fill" gap="auto" align="middle-left">
              <text text-style="TitleSmall" value="SOL" color="$on-surface" />
              <row gap="2" align="middle-right">
                <img src="https://api.iconify.design/material-symbols/trending-up-rounded.svg?color=%23A3124E" w="14" h="14" />
                <text text-style="LabelMedium" value="+4.8%" color="$primary-text" />
              </row>
            </row>
            <frame w="140" h="64">
              <rect x="0" y="63" w="140" h="1" fill="$outline-variant" />
              <rect x="0" y="46.37" w="14" h="17.63" radius="3" fill="$bar" />
              <rect x="21" y="31.51" w="14" h="32.49" radius="3" fill="$bar" />
              <rect x="42" y="52.00" w="14" h="12.00" radius="3" fill="$bar" />
              <rect x="63" y="23.40" w="14" h="40.60" radius="3" fill="$bar" />
              <rect x="84" y="34.84" w="14" h="29.16" radius="3" fill="$bar" />
              <rect x="105" y="15.75" w="14" h="48.25" radius="3" fill="$bar" />
              <rect x="126" y="8.00" w="14" h="56.00" radius="3" fill="$primary" />
            </frame>
          </col>
          <col w="140" gap="10" align="top-left">
            <row w="fill" gap="auto" align="middle-left">
              <text text-style="TitleSmall" value="AVAX" color="$on-surface" />
              <row gap="2" align="middle-right">
                <img src="https://api.iconify.design/material-symbols/trending-up-rounded.svg?color=%23A3124E" w="14" h="14" />
                <text text-style="LabelMedium" value="+9.6%" color="$primary-text" />
              </row>
            </row>
            <frame w="140" h="64">
              <rect x="0" y="63" w="140" h="1" fill="$outline-variant" />
              <rect x="0" y="52.00" w="14" h="12.00" radius="3" fill="$bar" />
              <rect x="21" y="33.14" w="14" h="30.86" radius="3" fill="$bar" />
              <rect x="42" y="18.86" w="14" h="45.14" radius="3" fill="$bar" />
              <rect x="63" y="28.00" w="14" h="36.00" radius="3" fill="$bar" />
              <rect x="84" y="8.00" w="14" h="56.00" radius="3" fill="$bar" />
              <rect x="105" y="21.14" w="14" h="42.86" radius="3" fill="$bar" />
              <rect x="126" y="10.06" w="14" h="53.94" radius="3" fill="$primary" />
            </frame>
          </col>
        </row>
      </col>
    </col>
    <col w="360" p="16 16 20 16">
      <col role="card" w="328" radius="$r-lg" fill="$primary-container" p="16" gap="12">
        <row w="296" gap="12" align="middle-left">
          <row w="40" h="40" radius="$r-full" fill="$surface" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/balance-rounded.svg?color=%23B3164B" w="22" h="22" />
          </row>
          <col w="fill" gap="2" align="middle-left">
            <text text-style="TitleMedium" value="Even match: 3 to 3" color="$on-primary-container" />
            <text text-style="BodyMedium" value="SOL leads on size and liquidity; AVAX on yield and scarcity." color="$on-primary-container" />
          </col>
        </row>
        <row w="296" gap="8" align="middle-left">
          <row role="chip" h="30" radius="$r-full" fill="$surface" p="0 12" gap="6" align="middle-center">
            <ellipse w="8" h="8" radius="$r-full" fill="$primary" />
            <text text-style="LabelMedium" value="SOL wins 3" color="$on-surface" />
          </row>
          <row role="chip" h="30" radius="$r-full" fill="$surface" p="0 12" gap="6" align="middle-center">
            <ellipse w="8" h="8" radius="$r-full" fill="$primary" />
            <text text-style="LabelMedium" value="AVAX wins 3" color="$on-surface" />
          </row>
        </row>
      </col>
    </col>
    <col w="fill" fill="$surface" border="1 0 0 0 $outline-variant">
      <row w="fill" h="76" p="0 16" gap="12" align="middle-left">
        <row role="button" w="56" h="56" radius="$r-full" fill="$surface-variant" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/bookmark-add-rounded.svg?color=%231D1A1C" w="24" h="24" />
        </row>
        <row role="button" w="fill" h="56" radius="$r-full" fill="$primary" gap="8" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/notifications-active-rounded.svg?color=%23FFFFFF" w="22" h="22" />
          <text text-style="TitleMedium" value="Set alerts on both" color="$on-primary" />
        </row>
      </row>
      <row w="fill" h="24" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$outline" />
      </row>
    </col>
  </col>
</gui>
```