---
title: "Meridian Wallet — Swap USDC to ETH"
platform: android
slug: meridian-wallet-swap-usdc-to-eth
screens: []
domains: ["crypto"]
style: "glassmorphism"
fonts: ["Roboto", "Roboto Mono"]
roles: ["top-navigation-bar", "button", "segmented-control", "card", "divider", "chip", "tab-bar"]
score: {clean: 100, consistent: 82, accessible: 41, comprehensible: 59}
url: https://gui.farm/android/meridian-wallet-swap-usdc-to-eth
raw: https://gui.farm/android/meridian-wallet-swap-usdc-to-eth/design.guix
download: https://gui.farm/android/meridian-wallet-swap-usdc-to-eth.gui
---

# Meridian Wallet — Swap USDC to ETH

A dark glassmorphism Android crypto-wallet token-swap screen where a self-custody user converts 1,500 USDC to ETH, with paired pay/receive token cards, live rate, price impact, network fee, max slippage, route, and minimum received before reviewing the swap.

- **Live preview:** https://gui.farm/android/meridian-wallet-swap-usdc-to-eth
- **Raw source:** https://gui.farm/android/meridian-wallet-swap-usdc-to-eth/design.guix
- **Download (.gui):** https://gui.farm/android/meridian-wallet-swap-usdc-to-eth.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Meridian Wallet — Swap USDC to ETH">
  <tokens>
    <color name="text" value="#FBF7F2" />
    <color name="text-70" value="#FBF7F2CC" />
    <color name="text-55" value="#FBF7F2A6" />
    <color name="ink" value="#1E1206" />
    <color name="seam" value="#141010" />
    <color name="glass" value="#FFFFFF12" />
    <color name="glass-2" value="#FFFFFF1F" />
    <color name="glass-line" value="#FFFFFF2E" />
    <color name="glass-line-soft" value="#FFFFFF1A" />
    <color name="ember" value="#FF7A18" />
    <color name="ember-text" value="#FFAE63" />
    <color name="ember-dim" value="#FF7A1826" />
    <color name="usdc" value="#1F63AE" />
    <color name="eth" value="#3A47B0" />
    <number name="r-pill" value="999" />
    <number name="r-lg" value="20" />
  </tokens>

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

  <styles>
    <text-style name="Clock" font-family="Roboto" font-size="13" font-weight="600" line-height="16" />
    <text-style name="Kicker" font-family="Roboto" font-size="10" font-weight="700" line-height="12" letter-spacing="1.4" />
    <text-style name="H1" font-family="Roboto" font-size="21" font-weight="700" line-height="26" />
    <text-style name="Micro" font-family="Roboto" font-size="11" font-weight="600" line-height="14" letter-spacing="0.6" />
    <text-style name="Seg" font-family="Roboto" font-size="13" font-weight="600" line-height="16" />
    <text-style name="Ticker" font-family="Roboto" font-size="16" font-weight="700" line-height="20" />
    <text-style name="TokenName" font-family="Roboto" font-size="11" font-weight="500" line-height="14" />
    <text-style name="Disc" font-family="Roboto" font-size="17" font-weight="700" line-height="20" />
    <text-style name="BigAmt" font-family="Roboto Mono" font-size="26" font-weight="700" line-height="30" />
    <text-style name="Fiat" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Bal" font-family="Roboto Mono" font-size="12" font-weight="600" line-height="16" />
    <text-style name="Chip" font-family="Roboto" font-size="12" font-weight="700" line-height="14" />
    <text-style name="RowLabel" font-family="Roboto" font-size="13" font-weight="500" line-height="18" />
    <text-style name="RowVal" font-family="Roboto" font-size="13" font-weight="600" line-height="18" />
    <text-style name="RowValMono" font-family="Roboto Mono" font-size="13" font-weight="600" line-height="18" />
    <text-style name="Cta" font-family="Roboto" font-size="16" font-weight="700" line-height="20" />
    <text-style name="TabLabel" font-family="Roboto" font-size="10" font-weight="600" line-height="12" />
  </styles>

  <col w="360" fill="linear-gradient(178deg, #2A1608 0%, #1B1310 38%, #120E0E 70%, #0C0A0A 100%)">

    <row w="fill" h="26" p="0 16" gap="auto" align="middle-center">
      <text text-style="Clock" value="9:41" color="$text" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt.svg?color=%23FBF7F2" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi.svg?color=%23FBF7F2" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full.svg?color=%23FBF7F2" w="15" h="15" />
      </row>
    </row>

    <row role="top-navigation-bar" w="fill" h="58" p="0 12 0 16" gap="auto" align="middle-center">
      <col gap="2">
        <text text-style="Kicker" value="MERIDIAN WALLET" color="$ember-text" />
        <text text-style="H1" value="Swap" color="$text" />
      </col>
      <row gap="10" align="middle-center">
        <row role="button" w="40" h="40" radius="$r-pill" fill="$glass" border="1 $glass-line-soft" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/history.svg?color=%23FBF7F2" w="22" h="22" />
        </row>
        <row role="button" w="40" h="40" radius="$r-pill" fill="$glass" border="1 $glass-line-soft" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/tune.svg?color=%23FBF7F2" w="22" h="22" />
        </row>
      </row>
    </row>

    <col w="fill" p="6 16 16 16" gap="12">

      <row role="segmented-control" w="fill" h="42" radius="$r-pill" fill="$glass" border="1 $glass-line" p="4" gap="2" align="middle-center">
        <row w="fill" h="fill" radius="$r-pill" fill="$ember" align="middle-center">
          <text text-style="Seg" value="Swap" color="$ink" />
        </row>
        <row w="fill" h="fill" radius="$r-pill" align="middle-center">
          <text text-style="Seg" value="Limit" color="$text-55" />
        </row>
        <row w="fill" h="fill" radius="$r-pill" align="middle-center">
          <text text-style="Seg" value="Bridge" color="$text-55" />
        </row>
      </row>

      <col w="fill" gap="0">

        <col role="card" w="fill" radius="$r-lg" p="14 16 16 16" gap="12" clip="true">
          <appearance>
            <fill type="color" value="$glass" />
            <border color="$glass-line" w="1" />
            <effect type="background-blur" radius="28" />
          </appearance>
          <row w="fill" gap="auto" align="middle-center">
            <text text-style="Micro" value="YOU PAY" color="$text-55" />
            <row gap="6" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/account-balance-wallet-outline.svg?color=%23FBF7F2A6" w="14" h="14" />
              <text text-style="Bal" value="3,142.60" color="$text-55" />
            </row>
          </row>
          <row w="fill" gap="auto" align="middle-center">
            <row role="button" gap="10" align="middle-center">
              <row w="38" h="38" radius="$r-pill" fill="$usdc" align="middle-center">
                <text text-style="Disc" value="$" color="#FFFFFF" />
              </row>
              <col gap="1">
                <text text-style="Ticker" value="USDC" color="$text" />
                <text text-style="TokenName" value="USD Coin" color="$text-55" />
              </col>
              <img src="https://api.iconify.design/material-symbols/expand-more.svg?color=%23FBF7F2CC" w="20" h="20" />
            </row>
            <col gap="2" align="top-right">
              <text text-style="BigAmt" value="1,500.00" color="$text" align="right" />
              <text text-style="Fiat" value="≈ $1,500.15" color="$text-55" align="right" />
            </col>
          </row>
          <row w="fill" gap="8" align="middle-center">
            <row w="fill" h="30" radius="$r-pill" fill="$glass" border="1 $glass-line-soft" align="middle-center">
              <text text-style="Chip" value="25%" color="$text-70" />
            </row>
            <row w="fill" h="30" radius="$r-pill" fill="$glass" border="1 $glass-line-soft" align="middle-center">
              <text text-style="Chip" value="50%" color="$text-70" />
            </row>
            <row w="fill" h="30" radius="$r-pill" fill="$glass" border="1 $glass-line-soft" align="middle-center">
              <text text-style="Chip" value="75%" color="$text-70" />
            </row>
            <row w="fill" h="30" radius="$r-pill" fill="$ember-dim" border="1 $ember" align="middle-center">
              <text text-style="Chip" value="Max" color="$ember-text" />
            </row>
          </row>
        </col>

        <row w="fill" p="8 0 6 0" align="middle-center">
          <row role="button" w="46" h="46" radius="$r-pill" fill="$ember" border="4 $seam" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/swap-vert.svg?color=%231E1206" w="26" h="26" />
          </row>
        </row>

        <col role="card" w="fill" radius="$r-lg" p="14 16 16 16" gap="12" clip="true">
          <appearance>
            <fill type="color" value="$glass" />
            <border color="$glass-line" w="1" />
            <effect type="background-blur" radius="28" />
          </appearance>
          <row w="fill" gap="auto" align="middle-center">
            <text text-style="Micro" value="YOU RECEIVE" color="$text-55" />
            <row gap="6" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/account-balance-wallet-outline.svg?color=%23FBF7F2A6" w="14" h="14" />
              <text text-style="Bal" value="0.4820" color="$text-55" />
            </row>
          </row>
          <row w="fill" gap="auto" align="middle-center">
            <row role="button" gap="10" align="middle-center">
              <row w="38" h="38" radius="$r-pill" fill="$eth" align="middle-center">
                <text text-style="Disc" value="Ξ" color="#FFFFFF" />
              </row>
              <col gap="1">
                <text text-style="Ticker" value="ETH" color="$text" />
                <text text-style="TokenName" value="Ethereum" color="$text-55" />
              </col>
              <img src="https://api.iconify.design/material-symbols/expand-more.svg?color=%23FBF7F2CC" w="20" h="20" />
            </row>
            <col gap="2" align="top-right">
              <text text-style="BigAmt" value="0.52683" color="$text" align="right" />
              <text text-style="Fiat" value="≈ $1,498.66" color="$text-55" align="right" />
            </col>
          </row>
          <rect role="divider" w="fill" h="1" fill="$glass-line-soft" />
          <row w="fill" gap="auto" align="middle-center">
            <row gap="6" align="middle-center">
              <text text-style="RowLabel" value="Price impact" color="$text-55" />
              <text text-style="RowVal" value="-0.06%" color="$text-70" />
            </row>
            <row role="chip" h="24" radius="$r-pill" fill="$ember-dim" p="0 10" gap="5" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/bolt.svg?color=%23FFAE63" w="13" h="13" />
              <text text-style="Chip" value="Best route" color="$ember-text" />
            </row>
          </row>
        </col>

      </col>

      <col role="card" w="fill" radius="$r-lg" p="4 16" gap="0" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="28" />
        </appearance>

        <row w="fill" h="46" gap="auto" align="middle-center">
          <text text-style="RowLabel" value="Rate" color="$text-55" />
          <row gap="6" align="middle-center">
            <text text-style="RowValMono" value="1 ETH = 2,847.20 USDC" color="$text" />
            <img src="https://api.iconify.design/material-symbols/refresh.svg?color=%23FFAE63" w="16" h="16" />
          </row>
        </row>
        <rect role="divider" w="fill" h="1" fill="$glass-line-soft" />

        <row w="fill" h="46" gap="auto" align="middle-center">
          <text text-style="RowLabel" value="Network fee" color="$text-55" />
          <text text-style="RowValMono" value="$1.34 · 0.00047 ETH" color="$text" />
        </row>
        <rect role="divider" w="fill" h="1" fill="$glass-line-soft" />

        <row w="fill" h="46" gap="auto" align="middle-center">
          <text text-style="RowLabel" value="Max slippage" color="$text-55" />
          <row gap="8" align="middle-center">
            <row role="chip" h="24" radius="$r-pill" fill="$ember-dim" border="1 $ember" p="0 10" align="middle-center">
              <text text-style="Chip" value="Auto · 0.5%" color="$ember-text" />
            </row>
            <img src="https://api.iconify.design/material-symbols/chevron-right.svg?color=%23FBF7F2A6" w="18" h="18" />
          </row>
        </row>
        <rect role="divider" w="fill" h="1" fill="$glass-line-soft" />

        <row w="fill" h="46" gap="auto" align="middle-center">
          <text text-style="RowLabel" value="Route" color="$text-55" />
          <row gap="6" align="middle-center">
            <text text-style="RowVal" value="Uniswap v3 · 0.05%" color="$text" />
            <img src="https://api.iconify.design/material-symbols/chevron-right.svg?color=%23FBF7F2A6" w="18" h="18" />
          </row>
        </row>
        <rect role="divider" w="fill" h="1" fill="$glass-line-soft" />

        <row w="fill" h="46" gap="auto" align="middle-center">
          <text text-style="RowLabel" value="Min received" color="$text-55" />
          <text text-style="RowValMono" value="0.52420 ETH" color="$text" />
        </row>
      </col>

      <row role="button" w="fill" h="54" radius="$r-lg" fill="$ember" gap="8" align="middle-center">
        <text text-style="Cta" value="Review swap" color="$ink" />
        <img src="https://api.iconify.design/material-symbols/arrow-forward.svg?color=%231E1206" w="20" h="20" />
      </row>

    </col>

    <row role="tab-bar" w="360" h="64" p="0 8" gap="0" fill="$glass-2" border="1 0 0 0 $glass-line" align="middle-center">
      <col w="fill" h="fill" align="middle-center" gap="3">
        <img src="https://api.iconify.design/material-symbols/home-outline.svg?color=%23FBF7F2A6" w="24" h="24" />
        <text text-style="TabLabel" value="Home" color="$text-55" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="3">
        <img src="https://api.iconify.design/material-symbols/monitoring.svg?color=%23FBF7F2A6" w="24" h="24" />
        <text text-style="TabLabel" value="Markets" color="$text-55" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="3">
        <img src="https://api.iconify.design/material-symbols/swap-horiz.svg?color=%23FFAE63" w="24" h="24" />
        <text text-style="TabLabel" value="Swap" color="$ember-text" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="3">
        <img src="https://api.iconify.design/material-symbols/savings-outline.svg?color=%23FBF7F2A6" w="24" h="24" />
        <text text-style="TabLabel" value="Earn" color="$text-55" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="3">
        <img src="https://api.iconify.design/material-symbols/account-balance-wallet-outline.svg?color=%23FBF7F2A6" w="24" h="24" />
        <text text-style="TabLabel" value="Wallet" color="$text-55" />
      </col>
    </row>

  </col>
</gui>
```